Commit 2bca4305 authored by dkasliwal's avatar dkasliwal

Add JS file for Bubble Chart


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@104446 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 8b692d04
function bubbleChart(jsonData , ContainerId)
{
//alert("ContainerId in Bubble Dhanendra :"+ContainerId);
jsonData = JSON.parse(jsonData);
var innerDiv = document.createElement('div');
innerDiv.id = "Innerdiv"+ContainerId;
innerDiv.className ='bubbleChartDiv'
var canvasDiv = document.createElement('canvas');
canvasDiv.id = "canvas"+ContainerId;
canvasDiv.className ='bubbleChartDiv'
document.getElementById(ContainerId).appendChild(innerDiv);
document.getElementById("Innerdiv"+ContainerId).appendChild(canvasDiv);
var addedCount = 0;
var color = Chart.helpers.color;
var bubbleChartData = {
animation: {
duration: 10000
},
datasets: [{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Mumbai",
backgroundColor: color(window.chartColors.red).alpha(0.9).rgbString(),
borderColor: window.chartColors.red,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 500,
y: 35,
r: 15
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Andheri",
backgroundColor: color(window.chartColors.yellow).alpha(0.9).rgbString(),
borderColor: window.chartColors.yellow,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 10,
y: 15,
r: 20
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Jogeshwari",
backgroundColor: color(window.chartColors.purple).alpha(0.9).rgbString(),
borderColor: window.chartColors.purple,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 15,
y: 20,
r: 25
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Pune",
backgroundColor: color(window.chartColors.pink).alpha(0.9).rgbString(),
borderColor: window.chartColors.pink,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 20,
y: 25,
r: 30
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Borivali",
backgroundColor: color(window.chartColors.blue).alpha(0.9).rgbString(),
borderColor: window.chartColors.blue,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 25,
y: 30,
r: 35
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Goregaon",
backgroundColor: color(window.chartColors.voilet).alpha(0.9).rgbString(),
borderColor: window.chartColors.voilet,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 30,
y: 35,
r: 40
}]
},
{
//xLabels:{"red","green","blue","white","black","pink"},
label: "Malad",
backgroundColor: color(window.chartColors.orange).alpha(0.9).rgbString(),
borderColor: window.chartColors.orange,
hoverBackgroundColor: window.chartColors.green,
borderWidth: 1,
data: [{
x: 35,
y: 40,
r: 45
}]
}]
};
console.log("bubbleChartData from JS :"+JSON.stringify(bubbleChartData));
//jsonData='{"animation": { "duration" : "10000" }, "datasets": [ { "label":"LAHABRA", "backgroundColor":"#FFC0CB", "data":[ { "x":10, "y":10, "r":10 } ] }, { "label":"SILVASSA", "data":[ { "x":15, "y":10, "r":25 } ] }, { "label":"WOONSOCKET", "data":[ { "x":20, "y":30, "r":15 } ] }, { "label":"SOLAPUR", "data":[ { "x":5, "y":10, "r":10 } ] }, { "label":"BESSEMER", "data":[ { "x":40, "y":50, "r":20 } ] }, { "label":"LA HABRA", "data":[ { "x":50, "y":60, "r":10 } ] }, { "label":"WAVERLY", "data":[ { "x":35, "y":45, "r":10 } ] }, { "label":"WOONSOCKET", "data":[ { "x":25, "y":45, "r":10 } ] } ] }';
//jsonData = '{"datasets":[{"label":"LAHABRA", "backgroundColor":"#FFC0CB", "borderWidth":"1", "data":[{"x":2200, "y":625, "r":40}]},{"label":"SOLAPUR", "backgroundColor":"rgba(29,244,62,0.9)", "borderColor":"rgb(29,244,62)", "hoverBackgroundColor":"rgb(29,244,62)", "borderWidth":"1", "data":[{"x":"0", "y":"325", "r":"4"}]},{"label":"SOLAPUR", "backgroundColor":"rgba(121,38,106,0.9)", "borderColor":"rgb(121,38,106)", "borderWidth":"1", "data":[{"x":"1000", "y":"325", "r":"2"}]},{"label":"WOONSOCKET", "backgroundColor":"rgba(77,85,93,0.9)", "borderColor":"rgb(77,85,93)", "hoverBackgroundColor":"rgb(77,85,93)", "borderWidth":"1", "data":[{"x":"220", "y":"650", "r":"1"}]},{"label":"WOONSOCKET", "backgroundColor":"rgba(194,195,209,0.9)", "borderColor":"rgb(194,195,209)", "hoverBackgroundColor":"rgb(194,195,209)", "borderWidth":"1", "data":[{"x":"0", "y":"650", "r":"1"}]}]}';
//jsonData = JSON.parse(jsonData);
var ctx = document.getElementById("canvas"+ContainerId).getContext("2d");
window.myChart = new Chart(ctx, {
type: 'bubble',
// data: bubbleChartData,
data: jsonData,
// position: 'top',
options: {
responsive: true,
title:{
display:true,
text:''
},
legend: {
display:true,
position: 'top',
labels: { padding:20},
reverse: false,
//labels: {
//fontColor: 'rgb(255, 99, 132)',
//generateLabels:function(Chart){
// text: "Bubble"
//}
//}
},
tooltips: {
mode: 'point',
enabled: true,
//mode: 'nearest',
intersect: true,
position: 'average',
backgroundColor:'rgba(255,186,200,0.8)',
xPadding: 10,
yPadding:10,
caretSize:10,
cornerRadius: 10,
displayColors: true,
bodyFontFamily:'sans-serif',
bodyFontSize:15,
bodyFontColor: 'green'
}
}
});
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment