O'Reilly logo

Learning Highcharts by Joe Kuan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Highcharts extension

In this section we are going to examine how simple it is to create a Highcharts component in Ext JS. We do this by importing from an existing Highcharts configuration. Let's continue from the previous JsonStore example and incorporate it with the extension.

Step 1 – removing some of the Highcharts options

Assume we already have a working independent Highcharts configuration, as follows:

var myConfig = {
      chart: {
            renderTo: 'container',
            width: 350,
            height: 300,
            ....
      },
      series: [{
          type: 'column',
          data: [ 126633683, 55840235, .... ]
      }],
      xAxis: { 
          categories: [ "192.168.200.145", 
                        "192.168.200.99", ... ],
          ....
      },
      yAxis: { .... },
      title: { .... },
      ....
};

The first step is to remove all the fields that the extension will internally ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required