Skip to content

July 6, 2011

2

Integrating Highcharts Gauge/Dial chart into ExtJS

by Joe Kuan

Although Highcharts currently doesn’t support Gauge/Dial chart, it is planned in the future release. However, I found there is a quick mocked up code in the feature request post with an online demo. So I have modified the code with the following features:

  • display the gauge chart within a ExtJS 3 panel.
  • autoscale within the panel
  • add subtitle next to the gauge
  • animation when value change
Click the below screenshot to see the animation

Use it with ExtJS

The following code shows you how to display a gauge chart inside a ExtJS BoxComponent. Basically, once the BoxComponent is displayed, then display the gauge chart inside the container. Bind the load event of the store to update the gauge value and set the description text. The drawDial is the modified code from the original forum with couple new features. You can download it from the bottom of this blog.

var display = new Ext.BoxComponent({
        height: 150,
        layout: 'hbox',
        width: 500,
        listeners: {
          afterrender: function(box) {
            var gauge = drawDial({
              centerX: (box.getWidth() * 0.55) / 2,
              centerY: box.getHeight() - 20,
              width: box.getWidth(),
              height: box.getHeight(),
              renderTo: box.el.id,
              value: 0,
              min: 0,
              max: 100,
              minAngle: -Math.PI,
              maxAngle: 0,
              tickInterval: 10,
              ranges: [{
                from: 0,
                to: 50,
                fromColor: '#CCECC4',
                toColor: '#44992F',
                linearGradient: [ 100, 200, 200, 100 ]
                }, {
                from: 50,
                to: 80,
                fromColor: '#EEEF86',
                toColor: '#FF9900',
                linearGradient: [ 100, 150, 200, 200 ]
                }, {
                from: 80,
                to: 100,
                fromColor: '#FF4719',
                toColor: '#801A00',
                linearGradient: [ 150, 150, 200, 200 ]
              }]
           });

           // Bind the store onload to update the value
           jsonStore.on('load', function(store, records, opts) {
             if (records.length) {
               var rec = records[0];
               var val = rec.data.val;

               // Set the value and animate from the previous value
               gauge.setValueAnim(val);

               // setSubtitle - 2nd parameter is append. If not set,
               // it means start need a new subtitle content
               gauge.setSubtitle("Utilisation (%)  : " + val);
               // 2nd parameter is true means start newline from previous text
               gauge.setSubtitle("Since      : " + rec.data.time, true);
               gauge.setSubtitle("Bytes      : " + rec.data.numbytes, true);
               gauge.setSubtitle("Packets    : " + rec.data.numpackets, true);
               gauge.setSubtitle("Sessions   : " + rec.data.numsessions, true);
             }
           });
        }  // after render
     } // listenrers
  });

Download

You can download the code from my github. If you find any bug, then please let me know. I have tested it on IE 8, Safari 5 and Firefox 5.

The appearance of the gauge chart does look primitive but I am not going to improve it or adding more features as Highcharts will come with up a much better one in the very near future.

2 Comments Post a comment
  1. Christophe
    Mar 27 2013

    Hello,

    Do you have an example in extjs4 for a gauge, I have look in the book but it’s not running with extjs.

    Thanks for your great job and the book is realy nice
    Christophe

    Reply
    • Joe Kuan
      Mar 27 2013

      Thank you for your kind words. The Highcharts ExtJs 4 extension is only an introductory in the book. It would exceed the chapter page limit if all the charts are covered. Also the APIs extend quite rapidly.

      However, you can find gauge examples inside the http://github.com/JoeKuan/Highcharts_Sencha

      Thanks
      Joe

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: