In my previous post , discussed how to generate Charts using Google APIs. This is the continuation of my previous post. So I am using the same example here. Now we will see how to customize the chart. That means how to change the colors of the bars,adjust the height and width etc.
First we will see how to change the color.
If you check my previous post, you can find a few lines of codes as below:
var options = {
title: 'Population
of Largest U.S. Cities',
hAxis: {
title: 'Total Population',
minValue: 0,maxValue:6,
slantedText: true, slantedTextAngle: 70,
},
vAxis: {
title: 'City'
},
};
By adding "Series" attribute, you can change the color of the bar.
var options = {
title: 'Population of Largest U.S. Cities',
hAxis: {
title: 'Total Population',
minValue: 0,maxValue:6, slantedText: true, slantedTextAngle: 70,
},
series: {0: { type: 'bars', targetAxisIndex: 0, color: '#1B496D', visibleInLegend: true }},
vAxis: {
title: 'City'
},
};
Incase you want to give different colors to each bar, then you should go for a loop. In that case "Series" attribute not required.
function drawchart(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Population');
data.addColumn({ type: 'string', role: 'style' });
var colors = ['red', 'green', 'Yellow', 'grey', 'pink', 'black'];
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].City, dataValues[i].Population]);
}
var options = {
title: 'Population of Largest U.S. Cities',
width: 1050, height: 500,
hAxis: {
title: 'Total Population',
minValue: 0,maxValue:6,
slantedText: true, slantedTextAngle: 70,
ticks: [0, 100000, 2000000,
3000000, 4000000, 5000000, 6000000, 7000000, 8000000, 9000000, 1000000],
},
vAxis: {
title: 'City'
},
pointSize: 5,
};
var formatter = new google.visualization.NumberFormat({ prefix: '$', negativeColor: 'red', negativeParens: true });
for (var i = 1; i < data.getNumberOfColumns() ; i++) {
formatter.format(data, i);
}
var chart = new google.visualization.BarChart(document.getElementById('Inchart_div'));
chart.draw(data, options);
}
You need to add another column to data table for styles and while binding data to the table, you can change the color.
If you observe my code piece in the above, you can find two attributes "slantedText: true, slantedTextAngle: 70," , they are to change the angle of the hAxis(x-axis) scale labels.
formatter attribute :
Formatter attribute is to change the format of the data. In the above example you are showing the data of population. In case you want to show some money related data, you may have to show either in dollors/rupees. In such a case, this formatter attribute will be useful.
"Ticks" attribute is to change the label names of the haxis
No comments:
Post a Comment