Highcharts - Ajax Loaded Data Chart

Here, we will discuss an example of an ajax loaded data chart. To begin with, we will make an ajax call to load a csv file from Highcharts.Com using the jQuery.getJSON() method and when the data gets retrieved, we will populate the chart with received data and draw the chart.

We have understood most of the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

Import data.js

In order to work with ajax data, import the following script.

<script src = "https://code.highcharts.com/modules/data.js"></script>

Configurations

Let us now understand additional configurations/step taken.

xAxis

Configure the tick intervals to be based on weekly basis on the X-Axis.

var xAxis = {
   tickInterval: 7 * 24 * 3600 * 1000, // one week
   tickWidth: 0,
   gridLineWidth: 1,
   
   labels: {
      align: 'left',
      x: 3,
      y: -3
   }
};

yAxis

Configure two axes on the y-Axis.

var yAxis = [
   { // left y axis
      title: {
         text: null
      },
      labels: {
         align: 'left',
         x: 3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
   },
   { // right y axis
      linkedTo: 0,
      gridLineWidth: 0,
      opposite: true,
      
      title: {
         text: null
      },
      labels: {
         align: 'right',
         x: -3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
   }
];

plotOptions

plotOptions is used to control the formatting of various parts of chart like series, marker on series.

var plotOptions = {
   series: {
      cursor: 'pointer',
      point: {
         events: {
            click: function (e) {
               hs.htmlExpand(null, {
                  pageOrigin: {
                     x: e.pageX || e.clientX,
                     y: e.pageY || e.clientY
                  },
                  headingText: this.series.name,
                  maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x)
                     + ':<br/> ' + this.y + ' visits', width: 200
               });
            } 
         }
      },
      marker: {
         lineWidth: 1
      }
   }
}

Example

highcharts_line_ajax.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
      <script src = "https://code.highcharts.com/highcharts-more.js"></script>    
      <script src = "https://code.highcharts.com/modules/data.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Daily visits at www.highcharts.com'   
            };
            
            var subtitle = {
               text: 'Source: Google Analytics'
            };
            
            var xAxis = {
               tickInterval: 7 * 24 * 3600 * 1000, // one week
               tickWidth: 0,
               gridLineWidth: 1,
               
               labels: {
                  align: 'left',
                  x: 3,
                  y: -3
               }
            };
            
            var yAxis = [
               { // left y axis
                  title: {
                     text: null
                  },
                  labels: {
                     align: 'left',
                     x: 3,
                     y: 16,
                     format: '{value:.,0f}'
                  },
                  showFirstLabel: false
               }, 
               { // right y axis
                  linkedTo: 0,
                  gridLineWidth: 0,
                  opposite: true,
                  
                  title: {
                     text: null
                  },
                  labels: {
                     align: 'right',
                     x: -3,
                     y: 16,
                     format: '{value:.,0f}'
                  },
                  showFirstLabel: false
               }
            ];   
            
            var tooltip = {
               shared: true,
               crosshairs: true
            }
            
            var legend = {
               align: 'left',
               verticalAlign: 'top',
               y: 20,
               floating: true,
               borderWidth: 0
            };
            
            var plotOptions = {
               series: {
                  cursor: 'pointer',
                  point: {
                     events: {
                        click: function (e) {
                           hs.htmlExpand(null, {
                              pageOrigin: {
                                 x: e.pageX || e.clientX,
                                 y: e.pageY || e.clientY
                              },
                              headingText: this.series.name,
                              maincontentText: Highcharts.dateFormat(
                                 '%A, %b %e, %Y', this.x) +
                                 ':<br/> ' + this.y +
                                 ' visits', width: 200
                           });
                        }
                     }
                  },
                  marker: {
                     lineWidth: 1
                  }
               }
            }
            
            var series =  [
               {
                  name: 'All visits',
                  lineWidth: 4,
                  marker: {
                     radius: 4
                  }
               }, 
               {
                  name: 'New visitors'
               }
            ]
            
            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;
            json.plotOptions = plotOptions;
   
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename =
            analytics.csv&callback = ?', function (csv) {
               var data = {
                  csv: csv
               };
               json.data = data;
               $('#container').highcharts(json);
            });   
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_line_charts.htm
Advertisements