Skip to main content

Google Chart API perfect way to visualize data in your web site

Google Chart API perfect way to visualize data in your web site

JavaScript classes. Many Chat Types. Easily Customizable. Highly Interactive with events. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. No plugins are needed.

Perfect right?

You should identify there are two types of charts are  provided by google.

1. http://code.google.com/apis/chart/
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. 

2. http://code.google.com/apis/chart/image/
The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.


Its not hard  to build up a chart using google. Its easy. Google documentation gives you enough details to customize your chart.

Sample example

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1], 
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Have fun make you chart
Labels:

Comments

Post a Comment

Popular posts from this blog

Application Configuration FIle Visual Studio 2005

Through the application configaration file You can easily save values to later usage. you can create a application configuration file from project > Add New Item (Ctrl + Shift + A) example You want to add get string from config file Create a Config file using above step. after that insert following code to the config file. its a XML file. appsettings add key="DatabasePath" value="c:\\projects\data\spider.mdb" add key="SupportEmail" value="webmaster-1@dotnetspider.com" appsettings configuration in the coding add following Dim app As New System.Configuration.AppSettingsReader Dim s As String s = app.GetValue("DatabasePath", Type.GetType("System.String")) MessageBox.Show(s) its very easy when you are handling databases. you can store database connection string in that config for later reusabilty. Please post your comments
Post a Comment
Read more

Expire Session When the Browser Close [Codeigniter]

I wanted user to log again to the site whenever they close the browser. i searched everywhere and i found the easiest way. application/config/config.php sess_expire_on_close = TRUE Easy Session Preferences You'll find the following Session related preferences in your file: Preference Default Options Description sess_cookie_name ci_session None The name you want the session cookie saved as. sess_expiration 7200 None The number of seconds you would like the session to last. The default value is 2 hours (7200 seconds). If you would like a non-expiring session set the value to zero: 0 sess_expire_on_close FALSE TRUE/FALSE (boolean) Whether to cause the session to expire automatically when the browser window is closed. sess_encrypt_cookie FALSE TRUE/FALSE (boolean) Whether to encrypt the session data. sess_use_database FALSE TRUE/FALSE (boolean) Whether to save the session data to a database. You must...
3 comments
Read more