Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

seo Embed charts in webpages with one of our simplest APIs yet 2013

Seo Master present to you: By Steve Crossan, Chart API Team

Today we're launching the Google Chart API, a really simple tool for creating charts and graphs that are perfect for websites.

Let's get straight in with an example. This URL:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Creates this image:



That's it - no state, no calls, just send your data in an http request and get a png image graph back. Embed the request in an img tag and you're done. We currently support line charts, bar charts, pie charts, scatter plots, and sparklines.

We actually built this originally to use internally - we use it on Google Video and Google Finance for example. It seemed like it would be a good thing to open up to other users too. You can find out all about it at on the Google Chart API homepage and there's a Google Chart API group for questions and support.

The Google Chart API started out as a 20% time project here in Zurich, and we're really happy to be launching it to the world today. Let the charting begin!2013, By: Seo Master

seo DataView Makes Working with Visualizations Even Easier 2013

Seo Master present to you: By Yaniv Shuba and Nir Bar-Lev, Google Visualization Team

Visualizations are usually nifty, small pieces of code that make our data come alive. In order to live in peace on the web, they need to be streamlined and compact.

At times, these visualization applications are a product of a creative designer who publishes their work for free for all of us to use. Often these designers do not have the time and resources to deal with data input structures.

Therefore, when integrating with a specific visualization, we often need to format the DataTable just right, so it fits the way the visualization expects to get the data. Say as an example, a first column needs to be of type date, the second a number and the third a text comment. What if our DataTable is not in that exact format? What if we want to create several visualizations over the same data source? To date this required manipulating the DataTable to fit the particular visualization and made the API a bit less flexible.

To make fitting data to the visualization even easier and simpler, and the Visualization API even more flexible, we've borrowed from the well-known SQL concept of Views and created our own DataView. Today, with Google Visualization's DataView you can reorder columns and "hide" a column such that the view includes only the columns you need to visualize. And, the DataView stays fully synchronized with the DataTable at all times, so any change to the underlying DataTable is reflected in the DataView.

Let's see a simple example that demonstrates this.

The following code creates three charts from a DataTable. The data displayed is yearly results for the imaginary Acme Rail company. We display a table, a bar chart and a BarsOfStuff chart. The BarsOfStuff chart is used because we are showing data for Acme Rail, and we thought it'd be cool to use the little trains in the chart:
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <link rel="stylesheet" type="text/css" href="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.css"/>
    <script type="text/javascript" src="http://visapi- gadgets.googlecode.com/svn/trunk/barsofstuff/bos.js"></script>
    <script type="text/javascript">

      google.load("visualization", "1", {packages:["barchart","table"]});

      google.setOnLoadCallback(drawData);

      // Initialize the DataTable
      function drawData() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Line');
        data.addColumn('number', 'Revenue');
        data.addColumn('number', 'Expenses');
        data.addColumn('number', 'Commuters');
        data.addRows(4);
        data.setValue(0, 0, 'NorthEast');
        data.setValue(0, 1, 38350);
        data.setValue(0, 2, 15724);
        data.setValue(0, 3, 1534);
        data.setValue(1, 0, 'Cross-Pacific');
        data.setValue(1, 1, 25740);
        data.setValue(1, 2, 12613);
        data.setValue(1, 3, 1170);
        data.setValue(2, 0, 'Midwest');
        data.setValue(2, 1, 11550);
        data.setValue(2, 2, 4389);
        data.setValue(2, 3, 660);
        data.setValue(3, 0, 'Pan-America');
        data.setValue(3, 1, 21720);
        data.setValue(3, 2, 9774);
        data.setValue(3, 3, 362);

        //Draw the charts
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: false, title: 'Acme Rail Yearly Performance'});

        var stuffoptions = {title: 'Acme Rail Commuters by Line'};
        var stuffchart = new BarsOfStuff(document.getElementById('stuff_div'))
        stuffchart.draw(data, stuffoptions);

      }
    </script>
  </head>

  <body>
    <div id="table_div"></div>
    <div id="chart_div"></div>
    <div id="stuff_div" style="width: 400px"></div>
  </body>
</html>
The result looks like this:



The problem is that BarsOfStuff is a cool chart, but it is very simple. It can only accept a single data series in the format: [Series Title; Series Value].

Notice that right now the chart compares revenue per rail line, but we wanted it to display the number of commuters per line (as the title suggests).

How can we fix this? With DataView it is a simple matter of adding two lines of code and pointing the BarsOfStuff chart to the DataView instead of the DataTable. We add:
        var view = new google.visualization.DataView(data);
        view.setColumns([0,3]);
And initialize the BarsOfStuff chart with the DataView:
        stuffchart.draw(view, stuffoptions);
And we get:



Voila! The BarsOfStuff chart now shows the data we wanted it to visualize - commuters per rail line.

Yet another new feature to make developing complex dashboards with Google Visualization even easier is the clone() method, used to clone a DataTable instead of constructing a new copy from scratch.

We're working on making the DataView even more powerful, and of-course, working on other features and additions to the Visualization platform.

For more information on Google Visualization, check out our developer documentation pages.

Happy visualizing!2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser