Thursday, 3 July 2014

Googe charts

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">



     
        google.load('visualization', '1.0', { 'packages': ['corechart'] });      
        google.setOnLoadCallback(drawChart);
        function drawChart() {
         
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "webservice.asmx/test",
                data: "{'test':'test1'}",
                dataType: "json",
                success: function (response) {
                    drawVisualization(response.d);
                },
                error: function (response) {
                    alert("Error accured while updating item Status.");
                }
            });

        }

        function drawVisualization(dataValues) {        
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'CustomerName');
            data.addColumn('number', 'POHeaderID');
            for (var i = 0; i < dataValues.length; i++) {            
                data.addRow([dataValues[i].CustomerName, dataValues[i].POHeaderID]);
            }        
            var options = { 'title': 'PO List',
                'width': 400,
                'height': 300
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>

No comments:

Post a Comment