Multi chart with Google Chart API

Hi friends,
Today i am sharing how you create a multi chart with Google API  in single page. The code is defined below:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Google Charts Tutorial</title>

        <style type="text/css">
            #eventsExample {
                position: relative;
            }
            #details0, #details1, #details2, #details3 {
                visibility:hidden;
                background: #FFFF7F;
                border: solid 1px;
                width: 350px;
                padding: 5px;
                font-size:smaller;
                position:absolute;
                top: 250px;
            }
        </style>


        <!-- load Google AJAX API -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages':['columnchart','piechart']});

            //set callback
            google.setOnLoadCallback (createChart);

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

               //create data table object
                var dataTableMulticolumn = new google.visualization.DataTable();


                //define columns for first example
                dataTable.addColumn('string','Quarters 2010');
                dataTable.addColumn('number', 'Earnings1');

                //define columns for second example
                dataTableMulticolumn.addColumn('string','Quarters');
                dataTableMulticolumn.addColumn('number', 'Earnings 2009');
                dataTableMulticolumn.addColumn('number', 'Earnings 2008');
                dataTableMulticolumn.addColumn('number', 'Earnings 2007');



                //define rows of data for first example
                dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);

                //define rows of data for secondf example
                dataTableMulticolumn.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);

                //instantiate our chart objects
                var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));
                var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));

                //instantiate our multicolumn chart
                var multiColumnChart = new google.visualization.ColumnChart (document.getElementById('Chart3'));
             
                //instantiate a new chart to use as dataView Example
                var pieChartWithView = new google.visualization.PieChart (document.getElementById('Chart4'));

                //instantiate our Event example chart
                var eventsChart = new google.visualization.ColumnChart (document.getElementById('Chart5'));

                //create a view of the multicolumn data table
                var view = new google.visualization.DataView(dataTableMulticolumn);

                //filter it to get only first two columns
                view.setColumns([0, 1]);

                //define options for visualization
                var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
           
                //draw our chart charts
                chart.draw(dataTable, options);
                secondChart.draw(dataTable, options);
                multiColumnChart.draw(dataTableMulticolumn, options);
                pieChartWithView.draw(view, options);
                eventsChart.draw(dataTable, options);


               //register callbacks
                google.visualization.events.addListener(eventsChart, 'onmouseover', showDetails);
                google.visualization.events.addListener(eventsChart, 'onmouseout', hideDetails);

            }

            function showDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='visible';
                        break;
                    case 1: document.getElementById('details1').style.visibility='visible';
                        break;
                    case 2: document.getElementById('details2').style.visibility='visible';
                        break;
                    case 3: document.getElementById('details3').style.visibility='visible';
                        break;
                }
            }


            function hideDetails(e) {
                switch (e['row']) {
                    case 0: document.getElementById('details0').style.visibility='hidden';
                        break;
                    case 1: document.getElementById('details1').style.visibility='hidden';
                        break;
                    case 2: document.getElementById('details2').style.visibility='hidden';
                        break;
                    case 3: document.getElementById('details3').style.visibility='hidden';
                        break;
                }
            }
         

        </script>

    </head>

    <body>
        <h1>Visualizing our Data as a Column Chart</h1>
        <!--Div for our chart -->
        <div id="Chart"></div>
        <div id="Chart2"></div>
        <h1>More Bars for our Bar Chart and DataView Example</h1>
        <div id="Chart3"></div>
        <div id="Chart4"></div>
        <h1>Introducing Events</h1>

        <div id="eventsExample">
            <div id="Chart5"></div>

            <!--Divs for our messages -->
            <div id="details0">These are the details for Q1...</div>
            <div id="details1">Here you have the numbers for Q2...</div>
            <div id="details2">Explanations for the third quarter...</div>
            <div id="details3">Q4 was as expected...</div>
        </div>

    </body>
</html>

 I hope it will help you allot


Regards
Rashid Imran Bilgrami
CEO
Best visualization
http://www.bestvisualization.com