Click here to Skip to main content
15,064,166 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.

XML
<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
Posted
Comments
jhez25 8-Mar-13 22:12pm
   
you try to run another application...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900