Blog

Area Chart with missing points

Following is an example of an area chart with missing values. We’ve already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So let’s see the complete example.

Example

googlecharts_area_missing.htm

<html>
   <head>
      <title>Google Charts</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      null],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);
 
            var options = {title: 'Population (in millions)',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };  
 
            // Instantiate and draw the chart.
            var chart = new google.visualization.AreaChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

This Post Has One Comment

Leave a Reply