Code Samples: chart

Monday, April 8, 2013

google api chart tools Visualization

https://developers.google.com/chart/interactive/docs/gallery/areachart

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages: ["corechart"]});
        jQuery(document).ready(function () {
            google.setOnLoadCallback(drawGraph);
            function drawGraph() {
                var data = google.visualization.arrayToDataTable([
                    ['Month', 'Pritom', 'Samir', 'Raju', 'Sanjoy', 'Kamol'],
                    ['2004/05', 165,      938,     522,     998,     450],
                    ['2005/06', 135,      1120,    599,     1268,    288],
                    ['2006/07', 157,      1167,    587,     807,     397],
                    ['2007/08', 139,      1110,    615,     968,     215],
                    ['2008/09', 136,      691,     629,     1026,    366]
                ]);

                // Create and draw the visualization.
                var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
                ac.draw(data, {
                    title: 'Monthly Point Distribution',
                    isStacked: true,
                    width: 600,
                    height: 400,
                    vAxis: {title: "Point"},
                    hAxis: {title: "Month"}
                });
            }
        });
    </script>
</head>
<body>
<div id='visualization'></div>
</body>
</html>

And output will be like this:

Pages

Monday, April 8, 2013

google api chart tools Visualization