Tuesday, March 19, 2024

Google Charts: How to Add Charts to Your Website

Undoubtedly, graphics are an important source of information, so good systems for creating them are important. In the course of the article, we will learn how to build charts using JavaScript.

Graphics offer some difficulty for construction in any language, but why reinvent the wheel when someone has already done it for us (and very well, by the way)?

With a quick search on the internet we will find some great libraries for this purpose, but for this article we will use a Google library: the Google Chart Tools, as it is considered by many to be the best available nowadays because it is of great clarity, having a small curve of learning and very good documentation.

With it, we can draw the main types of charts: pie, bars, lines, tables, etc.

Drawing the Graphics

Let’s start with a simple pie chart example. But first of all, we need to incorporate the library and import the Google Chart Tools core. Take a look at Listing 1 for that.

Listing 1. Incorporating the library.

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
</script>
</head>
</html>

The listing is quite self-explanatory, we basically imported the Google API and loaded the visualization module of the package corechart.

Okay, now we can start the real thing. Let’s implement a pie chart (Listing 2) with the percentages of which foods people like the most.

Listing 2. Drawing the pie chart.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // loading the visualization module
    google.load("visualization", "1", {
        packages: ["corechart"]
    });

    // function to compose and draw the chart
    function drawChart() {
        // variable with the data, an array of array's 
        // in which the first position are the column names
        var data = google.visualization.arrayToDataTable([
            ['Food', 'How much people like it'],
            ['Pasta', 20],
            ['Pizza', 40],
            ['Fish n Fries', 5],
            ['Sushi', 35],

        ]);

        // options for chart display
        var options = {
            title: 'Food', // chart title
            is3D: true // false for 2d and true for 3d. Default is false
        };

        // create a new PieChart object that receives 
        // as param a div where the chart will be rendered
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        // draw with args and options
        chart.draw(data, options);
    }

    // function to be called after loading
    google.setOnLoadCallback(drawChart);
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Figure 1 shows how the chart will be presented.


Figure 1. Pie chart in action

Comments have been placed in the middle of the code to make it clearer to follow each step, but many other options can be used. There are so many that we will not be able to include them here, but there will be a link at the end of this article where we can find all the details about them.

Continuing, let’s draw three more types of charts: Lines, Bars and Tables.

Basically, what changes from one type of chart to another with respect to the code is the format of the array of data we pass to it and the object that is instantiated. Let’s look, for example, at the Rows and Bars formats that have the identical data format.

Listing 3. Drawing Bars and Lines Graphics.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {
          packages: ["corechart"]
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
          // initializing the array with the data
          var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004', 1000, 400],
              ['2005', 1170, 460],
              ['2006', 660, 1120],
              ['2007', 1030, 540]
          ]);
        
          // options for the Bar chart
          var options1 = {
              title: 'Performance',
              vAxis: {
                  title: 'Years',
                  titleTextStyle: {
                      color: 'red'
                  }
              } // vertical subtitle
          };
        
          // instantiating and drawing the Bar chart
          var barras = new google.visualization.BarChart(document.getElementById('bars'));
          barras.draw(data, options1);
          // options for the Line chart
          var options2 = {
              title: 'Performance',
              hAxis: {
                  title: 'Years',
                  titleTextStyle: {
                      color: 'red'
                  }
              } // vertical subtitle
          };
        
          // instantiating and drawing the Line chart
          var linhas = new google.visualization.LineChart(document.getElementById('lines'));
          linhas.draw(data, options2);
     }
    </script>
  </head>
  <body>
    <div id="bars" style="width: 900px; height: 500px;"></div>
    <div id="lines" style="width: 900px; height: 500px;"></div>
  </body>
</html>

You can follow up how those charts will look like at Figures 2 and 3.


Figure 2. Final result for bar chart


Figure 3. Final result for line chart

The format of the array has changed relatively to the pie chart, but it has code in common with the two in Listing 3. Now, let’s look at the table format that has a slightly different mode than the other three in the array grinding (Listing 4).

Listing 4. Drawing the table chart.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      // importing the table package
      google.load('visualization', '1', {
          packages: ['table']
      });
      google.setOnLoadCallback(drawTable);

      function drawTable() {
          // instantiating the array of table format
          var data = new google.visualization.DataTable();
          // adding columns, type and name
          data.addColumn('string', 'Appraisee');
          data.addColumn('number', 'Points');
          data.addColumn('boolean', 'Approved');
          // adding lines
          data.addRows([
              ['Roger', {
                  v: 10,
                  f: '10'
              }, true],
              ['Anna', {
                  v: 8,
                  f: '8'
              }, true],
              ['Douglas', {
                  v: 5.5,
                  f: '5,5'
              }, false],
              ['John', {
                  v: 7,
                  f: '7'
              }, true]
          ]);
          // instantiating and drawing the table
          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {
              showRowNumber: true,
              width: '70%'
          });
      }
    </script>
  </head>
 
  <body>
    <div id='table_div'></div>
  </body>
</html>


Figure 4. Final result for table chart

Although different from the other examples, with regard to importing the table package and the array object type to store the data, it is still very easy to understand the code unfolding. An interesting thing is the second column which, as you can see, is an array that has two positions: one for the value “v: 10” and another for the formatted text.

Conclusion

Here’s the official API link for more details: https://developers.google.com/chart/. There’s a lot more you can do with Google Charts and the flexibility this tool provides front-end software developers today is enormous. Feel free to try yourself.

Well folks, I’m staying here. Comment, share, be at ease and see you next time.

About the Author

Diogo Souza works as a Java Developer at PagSeguro and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured