Google Charts Example: A Simple Chart

The following Line chart, drawn by Google Charts library, is just a very basic example of what this library can do.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="chart_div" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);
 
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };
 
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script> 
<div id="chart_div" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = google.visualization.arrayToDataTable([
		  ['Year', 'Sales', 'Expenses'],
		  ['2013',  1000,      400],
		  ['2014',  1170,      460],
		  ['2015',  660,       1120],
		  ['2016',  1030,      540]
		]);

		var options = {
		  title: 'Company Performance',
		  hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
		  vAxis: {minValue: 0}
		};

		var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
</script> 

4 thoughts on “Google Charts Example: A Simple Chart”

  1. This plugin works well.
    However the biggest problem is that when I copy the code you post above and paste it to my wordpress form. It automatically ADD some and tag in the code.
    I can only check all lines manually.
    Can you tell me how to avoid this problem?
    And I think this is the main problem why most demo does not work properly by simply copying and pasting.

    Regards,
    Yu

    1. Thanks for your kind words.
      At the top-right side of every source box, there is a magnifier icon and when you hover over it, it says “view source code”.
      By clicking that icon, you can get the raw text of the source. Then you can copy and paste it to a text editor or add it to wordpress as a “chart snippet”.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.