Dear All,
I am developing chart
using google charp api.
I am using asp.net 3.5 & google map api.
how to format Y axis display unit (for eg display bugdet in amount or lac or millon)?
My code is given below.
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var data;
google.load("visualization", "1", { packages: ["columnchart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var hf = document.getElementById("jason");
// alert(hf.value);
var hfcharttype = document.getElementById("charttype");
var response = $.parseJSON(hf.value);
data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
// data.addColumn('string', 'Type');
data.addColumn('number', 'Budget');
data.addColumn('number', 'Actual');
for (var i = 0; i < response.test.length; i++) {
var row = new Array();
var str = response.test[i].Month;
var dt = str.substring(0, 9);
row[0] = dt;
//row[1] = response.test[i].Type;
row[1] = parseFloat(response.test[i].Budget);
row[2] = parseFloat(response.test[i].Actual);
data.addRow(row);
}
if (hfcharttype.value == "1") {
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
}
else if (hfcharttype.value == "2") {
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
}
else if (hfcharttype.value == "3") {
chart = new google.visualization.BarChart(document.getElementById('chart_div'));
}
else if (hfcharttype.value == "4") {
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
}
var options = {
width: 800, height: 540,
title: 'MIS TB',
hAxis: { title: 'Month', titleTextStyle: { color: 'red'} },
colors: ['red', 'green'],
is3D: true,
legend:{position: 'top'}
};
chart.draw(data, { width: 800, height: 340, is3D: true, title: 'MIS TB', titleX: 'Month', titleY: 'Budget / Actual', axisFontSize:9, enableTooltip: true, tooltipFontSize: 12, tooltipHeight: 50, tooltipWidth: 130 });
// chart.draw(data, options);
// chart.draw(data, { width: 700, height: 440, title: 'MIS Trial Balance', vAxis:{title: 'Budget/Actual', titleTextStyle: { color: 'black' }},
// hAxis: { title: 'Month', titleTextStyle: { color: 'black' }, textstyle: { fontsize: 10 }, animation: { duration: 1000, easing: 'out'} }, is3D: true
// });
// google.visualization.events.addListener(chart, 'select', selectHandler);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert(value);
}
</script>
<script type="text/javascript">
$(document).ready(drawChart);
</script>
</head>
Please guide & help.
Thanks
Submit an article or tip