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

How To Disable Export Button In Crystal Report When you are taking crystal report printouts through a program, such as program written using vb6. you might have a problem how to disable Export button in print preview. All you have to change following property to false or Uncheck the Export option in Property Pages. You CR.WindowShowExportBtn = False Crystal Report Object in Visual Basic 6. (CR is refer to Crystal Report Object ) You can go to Property Pages by right click and choose Properties on Crystal Report Object After you done those things you crystal Report print preview will showing like follows. I was face to above problem. We implemented a software program which is written using vb6. Cashier can take daily sale print out. before printing it is showing a preview to the user. So when the time pass user click export button and saved that report as a excel file. Then he modified the values and took printout to the management. That gives Security problem to the program a
Post a Comment
Read more

Magento Generate Google Sitemap using Cron

I had a problem with generating the Google sitemap using cron job. To do that you can simply change following database value. SELECT * FROM core_config_data WHERE path = 'crontab/jobs/sitemap_generate/schedule/cron_expr' Change the value as you set time in cron jobs. EX: Generate the Sitemap for every 5 minutes value = */5 * * * * That's it. Now you have to worry about cron is working or not. Just type following in your browser and hit enter. http://youresite.com/cron.php
Post a Comment
Read more
Git script which shows little bit advanced status. Save with Preferred file name in /usr/local/bin/XX branch="" branches="git branch --list" ESC_SEQ="\x1b[" COL_RESET=$ESC_SEQ"39;49;00m" COL_RED=$ESC_SEQ"31;01m" while read -r branch; do clean_branch_name=${branch//\*\ /} description=`git config branch.$clean_branch_name.description` if [ "${branch::1}" == "*" ]; then printf "$COL_RED$branch$COL_RESET $description \n" else printf " $branch $description\n" fi done <<< "$branches" git status Use the following command to add a description to your local branches. git branch --edit-description
Post a Comment
Read more