I have three pie charts being generated from an array of objects. They have different colors and data values. I now want them to change size according to the value of the data being passed to them. I have an array that has three predefined sizes I want to use, with the largest value correlating to the pie chart with the highest data etc. The code:
if (data) {
var allData = [{
arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]],
container : 'today-sales-chart',
customTooltips: data.salesToday,
color: ['green']
}
,{
arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]],
container : 'yesterday-sales-chart',
customTooltips: data.salesYesterday,
color: ['blue']
}
,{
arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]],
container : 'lastweek-sales-chart',
customTooltips: data.salesLastWeek
color: ['yellow']
}
];
var theRadius = ['10', '30', '50'];
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: allData[index].customTooltips,
container: allData[index].container,
options: {
width: 'auto',
height: 300,
chartArea: { width: theRadius[1] + '%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: allData[index].color,
pieSliceText: 'none'
}
});
}
for(var index in builds) {
charts.push(builds[index]);
google.setOnLoadCallback.drawCharts(builds[index].container);
}
The three charts are all the same size at the moment, determined by
var theRadius = ['10', '30', '50'];
chartArea: { width: theRadius[1]...
so they are all at 30%. I would like to have them render at the various sizes dynamically, using an if statement or for loop?
Aucun commentaire:
Enregistrer un commentaire