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 diff is collapsed.
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