Skip to main content

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

Comments

Popular posts from this blog

OLEDB jet 4.0 driver In Vista 64bit / he 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine

Well i think you must be thankful for me specailly for this research i am really getting the solution after 6 month research that is how to enable the oledb jet 4.0 driver in vista, i read arround 100s of articles and maximum said that is not possible to enable it and ala bla well at the end i got the answer that is so easy Acctually that is correct that oledb jet 4.0 driver is not avaialble for 64 bit but if you run your IIS on 32 bit instead of 64 then Oledb jet will working fine Here are the steps Click on the Start > Program > Administrative Tool > IIS Management panel Select the Computer name Right click on the application pool and select properties Select "TRUE" in Enable 32 Bit Application by default it is false Then this problem will resolve if you need any assitance then feel free to email me rashidbilgrami@hotmail.com Regards Rashid Imran Bilgrami CEO Best visualization www.bestvisualization.com

How to create a search engine for your DotNetNuke site

Dear Readers today i found very interesting item now you can create your own search engine like google in just few steps by using dotnetnuke technology Original URL  http://www.wrensoft.com/zoom/support/tutorial_dnn.html thanks for zoom Zoom Search Engine is a software package that allows you to create a powerful custom search engine for your website. It is unlike other search solutions in that it gives you full control over its indexing capabilities, and there is no advertising or annual fees, while being one of the easiest to use and most feature packed solutions on the market. More on the advantages of using Zoom here . The following tutorial explains how to use Zoom with your DotNetNuke website. Since many DotNetNuke (DNN) users find the built-in search functionalities of DNN Search to be lacking, they have found that Zoom is far more capable in providing a much more effective (both in relevance and performance) search function to their DNN website. We provide

How to convert and crack windows server 2012 from Evaluation to Full

Dear All This is a way how you Convert Evalution to Full Step1: Open CMD and run following command DISM /online /Get-CurrentEdition <edition ID> is like ServerStandard with out Eval Step 2: DISM /online /Set-Edition:<edition ID> /ProductKey:XXXXX-XXXXX-XXXXX-XXXXX-XXXXX /AcceptEula WINDOWS SERVER 2012 Serial Key Windows Server 2012 DataCenter: 48HP8-DN98B-MYWDG-T2DCC-8W83P Datacenter: Y4TGP-NPTV9-HTC2H-7MGQ3-DV4TW Standard: XC9B7-NBPP2-83J2H-RHMBY-92BT4 Standard R2: DBGBW-NPF86-BJVTX-K3WKJ-MTB6V Server Essentials: K2XGM-NMBT3-2R6Q8-WF2FK-P36R2 For Standard R2 here is a command For R2 its like that DISM /online /Set-Edition:ServerStandard /ProductKey:DBGBW-NPF86-BJVTX-K3WKJ-MTB6V /AcceptEula Regards