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

Post a Comment

Thanks for the Comments , Your review will display soon

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
3 comments
Read more

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
Post a Comment
Read more

C# Generate All Dates between starting and ending date

Dear Readers This code  will return a generic list of DateTime containing the dates between a starting date and ending date:  //Here is the function private List<DateTime> GetDateRange(DateTime StartingDate, DateTime EndingDate) {     if (StartingDate > EndingDate)     {         return null;     }     List<DateTime> rv = new List<DateTime>();     DateTime tmpDate = StartingDate;     do     {         rv.Add(tmpDate);         tmpDate = tmpDate.AddDays(1);     } while (tmpDate <= EndingDate);     return rv; } //Here you call this function DateTime StartingDate = DateTime.Parse("02/25/2007"); DateTime EndingDate = DateTime.Parse("03/06/2007"); foreach (DateTime date in GetDateRange(StartingDate,EndingDate)) {    Response.Write(date.ToShortDateString()); } And it will r...
2 comments
Read more