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

RegisterStartupScript updated way to right Java script JS (Javascript) in code behind also work with update panel

Dear All
RegisterStartupScript is obsolete now the new way that works with update panel  is given below its is code behind file code also

VB Code Dim csname1 As String = "PopupScript"
Dim cstype As Type = Me.GetType()
Dim cs As ClientScriptManager = Page.ClientScript
Dim cstext1 As String = "alert('Your message');"
cs.RegisterStartupScript(cstype, csname1, cstext1, True)

C# Code
String csname1 = "PopupScript";
Type cstype = this.GetType();
ClientScriptManager cs = Page.ClientScript;
String cstext1 = "alert('Hello World');"; cs.RegisterStartupScript(cstype, csname1, cstext1, true);
I hope it will help you also 
Regards  Rashid Imran Bilgrami

Calling LoadLibraryEx on ISAPI filter “C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_filter.dll” failed

Dear Readers
if you get the error

Calling LoadLibraryEx on ISAPI filter “C:\Windows\Microsoft.NET\Framework\v4.0.30319\aspnet_filter.dll” failed


Here is the solution 
Get a command prompt in administrator mode and go to C:\Windows\Microsoft .NET\FrameWork64\v4.xxx
and run aspnet_regiis -r. This will re-register the right libraries. It has happened twice already to me.
For other frameworks (32 bit or other versions of .net make sure you go to the correct folder (i.e. Framework/v2.xxx, etc.)

xxxx is the the number which is present with the folder name so i suggest you guys to check the folder name in your directory

If "run aspnet_regiis -r" is not working and if you get the error run is not recognized command then just type " aspnet_regiis -r" it will run fine

Reason of problem
Your asp.net frame work has been change may be you have install the lower version on the higher version or may be because of any reason you have register another version in your IIS, in my cas…

Multi Language Website In DNN Or Content Localization in DNN

Dear Readers
Before that when we create the Multi Language website in dnn we always create two portal but with DNN 5.x version you will use the language resource for creating multi language website website

You are facing two major challenges to create Multi language website
1) Translation of the DNN controls in to local language
2) Translate your own pages navigation or menu in to multi languages
3) Translate your own custom content in to local language
4) Translate your custom modules in to the local languages

Lets start with the first challange

Challenge 1: Translation of the DNN controls in to local language 
This is an easiest part, you can follow the steps achieve this challenge

1) Login with your host/Admin  account
2) Go to the Admin / Languages
3) Click on ADD Languages
4) Select the language that you need and Add it
5) You will see now two languages in your language section
6) With the list you will see the three option

Static Resources
System | Host |Site

7) you can click on t…