Skip to content

January 27, 2012

75

HighCharts extension for ExtJS 4

by Joe Kuan

The article is obsolete. For information of the latest Highcharts extension supports for Sencha ExtJs 4 and Touch 2, click here.

Recently, I received more emails asking me for getting the HighCharts to run on ExtJs 4. I didn’t expect anyone will be interested as ExtJs 4 comes with its own chart library. Well, here is it is. I have ported the HighChart ExtJs 3 Adapter to ExtJs 4. Note that this is a true native ExtJs 4 port, such that none of the ExtJs 3 compatible classes are required. Please read this article before using the extension. Enjoy!!

Release Notes

ExtJs 4 comes with many major design changes, in order to get the HighChart extension working on ExtJs 4. Some changes are inevitable:

  • Instead of Ext.ux.HighChart.js, the hierarchy is renamed to Chart.ux.HighChart.js as ExtJs 4 doesn’t use Ext.ux prefix anymore.
  • ExtJs 4 uses path for each class components. So the actual Javascript file, HighChart.js, is relocated to /Chart/ux/HighChart.js.
  • The core implementation hasn’t been changed from the original one released by buz. The only thing changed is to adopt the new class definition and creating the new class in ExtJs 4 style (which is not a straightforward port because the way HighChart.js uses classes).
  • No animation support yet.

Download & Demo

The whole package can be downloaded from github or you can try the demo on joekuan.org. It comes with two examples. Most of the files in the package are demo files for the MVC example. The actual HighChart extension is located in /Chart/ux/HighChart.js.

At the time of writing, this is implemented using ExtJs 4.0.7 and HighCharts 2.1.9. and tested on Safari 5.1.2, Firefox 9.0.1 and IE 8. The multiple graphs example requires Php to generate random data.

Examples

There are two different examples in the package file.

One is a standalone version, standalone.html, only uses a html and js files to run. This is for people who want to quickly see how the extension works with ExtJs 4. The file, standalone.js, contains a short example which displays a single graph.

The second example contains a tree panel with 3 different choice of graphs, line graph, column chart and a pie chart. It is implemented in full ExtJs recommended MVC structure (mvc.html). Here is a screenshot.

Using HighChart extension

The good news is that you can use the new extension pretty much the same as before. The series and chartConfig are the same. The only difference is the instantiation of the class.

var chart = Ext.create("Chart.ux.HighChart", {
  series: [{
    ...
  }],
  store: store,
  chartConfig: {
    chart: {
      .....
  ...
});

Or declare in xtype fashion which is the same as before

items:[
  xtype: 'highchart',
  series: ....
}]

Change HighChart prefix path

If you need to change the HighChart path, then simply change all the instances of “Chart.ux.” in HighChart.js file. Put the file into the right path hierarchy. You may need to setup the path using Ext.Loader.setConfig.

Enjoy!!

[ Updated on 8th Feb ]

A scatter plot is now included in the multiple graphs example.

[ Updated on 9th Feb ]

Standalone version now uses a single Json file for the backend data, instead of a Php page. Easier for some people to quickly experiment the extension.

[ Updated on 12th Apr ]

Fixed and extended addSeries method, so that you can add a new series with data to the displayed chart. A demo for this feature is in joekuan.org

chart.addSeries([{
  type: 'spline',
  name: 'New Series',
  data: [ y1, y2, y3, ... ]
}]);

[ Updated on 16th Apr ]

Added support for donut chart. Please read this for usage and demo.

Advertisements
75 Comments Post a comment
  1. Feb 24 2012

    Thanks a lot for this :)

    Reply
  2. peter
    Mar 17 2012

    Sir:
    I write some code for a Time Series chart. I want to show one label of one hour for a day in the xAxis. But the chart only show the first label in the xAxis. I don’t know what’s wrong. Please help me to solve it. Thanks for your help.

    //CPU Store
    var storeCPU = new Ext.data.JsonStore({
    fields: [
    {name: ‘updatetime’, type: ‘number’},
    {name: ‘os_1’, type: ‘float’}
    ],

    proxy: new Ext.data.HttpProxy({
    type: ‘ajax’,
    url: ‘../getGustCPUChart.do?device_id=1&QryType=day&QryDate=20120303’,
    reader: {
    type: ‘json’,
    root: ‘data’
    }
    }),
    autoLoad: true,

    listeners : {
    beforeload: function(){
    },
    load: function() {
    },
    exception: function(proxy, type, action, options, response, arguments) {
    //msgTip.hide();
    Ext.alert(response.responseText);
    }
    }
    });

    //create chart
    CPUChart = Ext.create(‘Chart.ux.HighChart’, {
    series : [{
    type: ‘area’,
    dataIndex : ‘os_1’,
    name : ‘CPU’,
    visible : true
    }],
    store : storeCPU,
    xField : ‘updatetime’,
    chartConfig : {
    chart : {
    zoomType : ‘x’,
    animation : {
    duration : 1500,
    easing : ‘swing’
    }
    },

    title : {text : ‘CPU Utilization (%)’,x : -20},

    xAxis: {
    type:”datetime”,
    tickInterval : 24 * 3600 * 1000 ,
    dateTimeLabelFormats:
    {
    second: ‘%H:%M:%S’,
    minute: ‘%e. %b %H:%M’,
    hour: ‘%H:%M’,
    day: ‘%B %e %Y’,
    week: ‘%e. %b’,
    month: ‘%b %y’,
    year: ‘%Y’
    }
    },
    yAxis : {
    min:0,
    title : {
    text : ”
    },
    plotLines : [{
    value : 0,
    width : 1,
    color : ‘#808080’
    }]
    },
    legend: { enabled: false},
    plotOptions : {
    series : {
    animation : {
    duration : 3000,
    easing : ‘swing’
    },
    lineWidth: 1
    },
    area: {
    stacking: ‘normal’,
    lineColor: ‘#666666’,
    lineWidth: 1,
    marker: {
    enabled: false,
    states: {
    hover: {
    enabled: true,
    symbol: ‘circle’,
    radius: 5,
    lineWidth: 1
    }
    }
    }
    }
    }
    }
    })

    Reply
    • Joe Kuan
      Mar 17 2012

      You do it like this:

      Put the xField inside the series. Otherwise, it is treated as a xAxis category, ie label literally.

      series : [{
      type : 'area',
      yField : 'os_1',
      name : 'CPU',
      xField: 'updatetime',
      visible : true
      }],

      Reply
      • peter
        Mar 19 2012

        Thanks for your reply. But I have another issues for this case. I setting the property: “useUTC”. It doesn’t work.

        CPUChart = Ext.create(‘Chart.ux.HighChart’, {
        series : [{
        type: ‘area’,
        yField : ‘os_1’,
        name : ‘CPU’,
        xField: ‘updatetime’,
        visible : true
        }
        ],
        store : storeCPU,
        chartConfig : {
        chart : {
        zoomType : ‘x’,
        animation : {
        duration : 1500,
        easing : ‘swing’
        }
        },
        global: {useUTC: false},
        title : {text : ‘CPU Utilization (%)’,x : -20},
        :
        :
        })

      • peter
        Mar 19 2012

        I have another issue for this case. I want to change this tooltip of chart dynamically.

        var oMonthTooltip = [ {
        formatter : function() {
        return ‘‘ + this.series.name + ‘‘ + Highcharts.dateFormat(‘%B/%e’, this.x) + ‘ ‘ + ‘‘ + this.y +’‘;
        }
        }];

        CPUChart.chartConfig.tooltip = oMonthTooltip;
        CPUChart.afterRender();

        But it doesn’t work.

      • Joe Kuan
        Mar 20 2012

        No, you do it like this:

        Ext.getCmp(‘chart’).chart.options.tooltip.formatter = MyApp.tooltip;

  3. Raul Sebastia
    Apr 1 2012

    I’m adding dinamically new series but I can’t redraw the chart:

    var variable = [[10,15],[25,65],[35,15]];
    var flipo = Ext.getCmp(‘chart’);
    var series = {
    type : ‘spline’,
    lineWidth: 1,
    data: variable,
    name : ‘IMPRESIONADO!!’
    visible : true
    };

    flipo.series.push(series);

    flipo.chart.redraw(); It doesn’t work!!!!

    Reply
    • Joe Kuan
      Apr 1 2012

      It won’t work because the Highchart extension uses ExtJs Store for accessing the data. Then use store.load() with new data loaded it, the chart will automatically redraw.

      Reply
  4. Raul Sebastia
    Apr 1 2012

    Yes but I’m pushing new data Series dinamically and I have not used store

    {
    xtype : ‘highchart’,
    id : ‘chart’,
    showAxes: ‘true’,
    exporting:{
    enabled: true,
    buttons:{
    printbutton:{
    enabled: true
    }

    }
    },
    series : [{
    type : ‘spline’,
    lineWidth: 1,
    data: [[1332740842000, 0],[1332745342000, 1.56],[1332745342000, 1.56],[1332759142000, 6.98],[1332779842000, 1.49]],
    // dataIndex : ‘Valor’,
    name : ‘Pac1’,
    visible : true
    }, HERE I WANT TO ADD NEW SERIES DINAMICALLY…

    Thanks

    Reply
    • Joe Kuan
      Apr 1 2012

      If you want to add a series dynamically, try this method

      /**
      * Add one or more series to the chart
      * @param {Array} series An array of series
      * @param {Boolean} append the serie. Defaults to true
      */
      addSeries : function(series, append) {

      Ext.getCmp(‘chart’).addSeries

      This method is provided from the original adapter which I have extended from.

      Reply
      • Raul Sebastia
        Apr 1 2012

        Thank you this is the solution:

        var flipo = Ext.getCmp(‘chart’);

        var serieNueva =
        [{
        type : ‘spline’,
        lineWidth: 1,
        data: variable,
        name : ‘IMPRESIONADO!!’,
        visible : true
        }];

        var listaSeries = flipo.series;

        if (listaSeries.length == 0){

        var serieTotal = new Array();
        serieTotal = serieNueva;

        } else{
        serieTotal = listaSeries.concat(serieNueva);
        }

        flipo.addSeries(serieTotal,true);

        But the first line series does not appear, next series appear and when I hide all the first one appears, do you understand? can you help me please?

        Thanks

      • Joe Kuan
        Apr 2 2012

        TBH, I haven’t really used much addSeries method before but I will investigate.

  5. Raul Sebastia
    Apr 3 2012

    Hello, again. I have noticed that I add the series correctly, but the first time I add a serie the chart does not draw the line, but the legend it’s correct and the data is in the chart. Then If I make a browser resize (Keyboard Crtl+) the line appears.
    Have you any idea?

    Thank you

    Reply
    • Joe Kuan
      Apr 3 2012

      I think I have fixed the problem. Please pass me your email address and then I post you the new code to see whether it works for you.

      Also, I have setup a new demo ‘Single Highcharts Demo’ at http://joekuan.org with ‘Add Series’ button. You can give it a try

      Reply
  6. Raul Sebastia
    Apr 10 2012

    It doesn’t work, I don’t know if I’m doing something wrong…

    Reply
    • Joe Kuan
      Apr 10 2012

      Did you do it in the following way?

      Ext.getCmp(‘chart’).addSeries({
      type: ‘spline’,
      name: ‘New Series’,
      data: [ y1, y2, y3, … ]
      }, true);

      If still doesn’t work, then tar up all your code and send it to kuan.joe@gmail.com. I will have a look

      Reply
  7. andres
    Apr 12 2012

    I need set specific color to each slice of pie, similar http://www.highcharts.com/demo/pie-donut,
    can be done?

    thanks for you work

    Atte.:
    Andres

    Reply
    • Joe Kuan
      Apr 12 2012

      Oh, TBH I haven’t really tried that kind of pie chart. I will examine and let u know in a few days time.

      Reply
      • andres
        Apr 12 2012

        ok tahnks

    • Joe Kuan
      Apr 16 2012

      Ok, donut pie support is out now. Check out the latest post and demo.

      Reply
  8. Prashant
    Jun 18 2012

    I get a single JSON response from the server which contains data for 2 series:
    e.g.
    {
    “avg” : 59,
    “Time” : 1339760791,
    “avg_trend” : 39.313,
    “Date” : “2012/06/15 17:16:31”
    }
    These are returned in a JSON array. Towards the end of the JSON array-last 5-6 objects, the objects only contain the “avg_trend” data and not the “avg” data.
    In this case, the chart defaults the values for “avg” to 0 and plots the line accordingly. Is there some way to avoid this?
    Basically, my line graph has to display an average and trend of average forecast. And the last few objects in the JSON array are the projected forecast data, which will not have the “avg” data. So I do not want to render these.

    Also, I was trying to find out the API docs for your extension. Do you have that published anywhwere

    Reply
    • Joe Kuan
      Jun 22 2012

      Sorry, I have been pretty busy. I will have a look this weekend.

      Reply
      • Prashant
        Jun 25 2012

        Sure. Thanks Joe. :)

    • Joe Kuan
      Jun 27 2012

      If I understand you correctly, the only way to do that is to set your JSON data source to return null values instead of zero values. This is the only way Highcharts can distinguish whether to plot a data point actually with zero value or there is no data (null) at all.

      Reply
      • Prashant
        Jun 27 2012

        Actually, the JSON Data Source does not have the field “avg” in the last few objects of the JSON Array. e.g. [
        {“avg” : 59,
        “Time” : 1339760791,
        “avg_trend” : 39.313,
        “Date” : “2012/06/15 17:16:31″
        },
        {“avg” : 64,
        “Time” : 1339760791,
        “avg_trend” : 39.313,
        “Date” : “2012/06/15 17:16:31″
        },
        {
        “Time” : 1339760791,
        “avg_trend” : 39.313,
        “Date” : “2012/06/15 17:16:31″
        },
        {
        “Time” : 1339760791,
        “avg_trend” : 39.313,
        “Date” : “2012/06/15 17:16:31″
        },
        {
        “Time” : 1339760791,
        “avg_trend” : 39.313,
        “Date” : “2012/06/15 17:16:31″
        }
        ]

        If you look at the JSON Array above, the last 3 entries do not have the “avg” field at all.
        Now in my Line Series graph, I am plotting both “avg” and “avg_trend” using this same JSON Array. Since the last few entries of the JSON Array do not have the “avg” field, the graph plots the “avg” series as zero in the graph, while I would expect it to not plot those points at all.
        Hope I have been able to explain the problem clearly to you :)

      • Joe Kuan
        Jun 27 2012

        Can u email me the whole JSON data? I give it a try and see. kuan.joe@gmail.com

      • Joe Kuan
        Jun 27 2012

        I have answered your question in my latest blog. Please check it out.

  9. Vinutha
    Jun 27 2012

    Hi.. I hope someone can help me..
    I intend to generate multiple Y axis graph containing 3 series.
    The data from each of the series is coming from 3 different extjs stores. How can I bind 3 stores to these series. Note – All the stores have same fields.

    Reply
    • Joe Kuan
      Jun 27 2012

      There are 2 possible ways that u can try:

      1. Create an array store (let say store A) to wrap around 3 stores (let say S1, S2 and S3). Bind store A to the extension, each S store load event handler is implemented to update A store’s records. Overwrite A load method to load each S store.

      2. Create one series with one store first. Then use the extension method addSeries (as how you use Highcharts natively, just data without dataIndex) to dynamically add the 2nd and 3rd series into the chart. e.g.
      addSeries({
      name: ‘2nd series’,
      data: [ y1, y2, y3 … ],
      yAxis: 1
      }, true);

      Note, the 2nd parameter is to append the series into the graph. Otherwise it will overwrite the first series.

      addSeries not only supports the store record but also can use raw data if data field is defined. This is the feature someone asked me to support a while ago and I have implemented and tested the feature.

      Reply
      • Vinutha
        Jun 28 2012

        Hi Joe, Thanks for ur suggestion. I am trying to use it. I am able to addSeries with the data array but facing some issue when i use the store. I will work on it in parallel.

        I have another small question. hope u wont mind :)
        I would like to provide a button such as Switch Axis through which the data on X and Y axis should get swapped. I tried to do it manually but fetching contents of X and Y axis and try to set the data. Is there an option to swap axis directly ??

      • Joe Kuan
        Jun 28 2012

        You need to get extension component first from the chart id you created. Then do:
        var chart = Ext.getCmp(‘chart’);
        chart.chartConfig.chart.inverted = true;
        chart.draw();

      • Abinaya
        Jun 6 2014

        Hi Joe,
        I tried adding series like
        chart.addSeries([{
        type: ‘spline’,
        name: ‘workload 4’,
        data: [[1397788400, 0],[1397791800, 0.15],[1397791800, 8.5]]
        }], true);
        to existing series but i can see only one single point plotted over the chart.I cant able to get those points plotted even we use chart.redraw() or reload the store.Can anybody please help me out of this?

      • Joe Kuan
        Jun 9 2014

        Sorry for the late reply. I am currently on leave. I would recommend you to have a look at the standalone example in the ‘desktop’ directory, standalone.js. It uses addSeries method.

  10. Gerd
    Jun 28 2012

    How Can I remove Series to add dynamically new Series

    Reply
    • Joe Kuan
      Jun 28 2012

      removeSerie(idx, animation);

      idx – index value in the series array
      animation – true for chart animation showing the serie disappear

      Reply
  11. Tony
    Jul 18 2012

    I had a requirement to render a pie chart with predefined colors for certain data. I was able to accomplish this by adding an if to your getData method. I set an attribute in the model named ‘color’ to a hex color string.

    if (record.data[‘color’]){
    return {
    name: record.data[this.categorieField],
    y: record.data[this.dataField],
    color: record.data[‘color’]
    };
    }else{
    return [record.data[this.categorieField], record.data[this.dataField]];
    }

    I hope this helps someone!
    -Tony

    Reply
    • Joe Kuan
      Jul 26 2012

      Thanks and much appreciated and apologies for not responding to ur request. Work life has been insanely busy.

      Reply
  12. Gerd
    Jul 27 2012

    Thats really a great work. I hope you will also add the new Highcharts 2.3beta to this extension. The areareange is a very useful chart and it would be gread if we can create it with ExtJS4.
    Here you can find few more examples:
    http://www.highcharts.com/component/content/article/2-news/46-gauges-ranges-and-polar-charts-in-beta

    Reply
    • Joe Kuan
      Aug 15 2012

      Sorry for the late reply. Got hook on the Olympics.

      Yes. Don’t you worry. It will be done.

      Reply
      • Gerd
        Aug 30 2012

        Hi,
        Highcharts 2.3 is finally released with some new chart types. It would be great to use the arealine with your extension.

        Thanks for your effort.

  13. Bsg
    Aug 17 2012

    Does your extension support the exporting option?

    Reply
    • Joe Kuan
      Aug 24 2012

      Exporting option is supported anyway. It just by pass this extension.

      Reply
  14. jestima
    Nov 5 2012

    Hi. Let me thank you for sharing this.

    I am trying to setup a highchart but nothing happens. Your help is highly appreciated.

    With the code below I can see the container of highchart but then nothing is inside. At least should be there the title.

    Here is my code:

    Ext.define(‘NAMESPACE.view.gis.dialog.QueryPopup’, {
    extend: ‘Ext.window.Window’,
    require: [‘Chart.ux.HighChart’],
    alias: ‘widget.querypopup’,

    initComponent: function() {

    var a = Ext.create(‘Ext.data.JsonStore’, {
    fields: [‘month’, ‘data1’],
    data: [
    { data1: 8, month: ‘jan’ },
    { data1: 2, month: ‘feb’ },
    { data1: 6, month: ‘mar’ }
    ]
    });

    var windRose = Ext.create(‘Chart.ux.HighChart’, {

    series: [{
    dashStyle: ‘DashDot’,
    dataIndex: ‘data1’
    }],
    xField: ‘month’,
    width: 300,
    height: 280,
    chartConfig : {
    chart: {
    type: ‘spline’
    },
    title: {
    text: ‘Simple Highcharts Chart’
    }
    }

    });

    Ext.apply(this, {
    id: ‘querypopup’,
    width:420,
    height:320,
    border: false,
    autoScroll:false,
    resizable: false,
    closeAction: ‘destroy’,
    autoDestroy: true,
    forceLayout: true,
    defaults: {
    border: false,
    bodyBorder: false
    },
    items: windRose
    });

    this.callParent(arguments);

    }

    });

    Reply
    • Joe Kuan
      Nov 6 2012

      You can’t use ArrayStore. Use JsonStore and that will work. If you have to use static data, try

      series: [{ …., data: [ [ ‘jan’, 1 ], …. ] } ]

      Reply
      • jestima
        Nov 7 2012

        Thank you Joe. I have the Standalone application from your demo working on my localhost and I am trying to implement something similar in my own application but using the MVC approach. It is still not working but I am using the JsonStore like in the standalone application but still not working and I don’t understand why. I can see the “chart box” and have an Ext.chart.Chart working at the same time and with the same data.

        Another question is if the Polar chart is available in this extension.

      • Joe Kuan
        Nov 7 2012

        Polar chart is supported and it is in the demo. Email your source to kuan.joe@gmail.com and I have a quick look.

  15. Hi. Thanks for this great plugin. It works good for me.
    We have a problem where after reloading a stores data the chart is always “empty”
    The lines are gone then.

    I tried to manually refresh the chart but nothing worked.
    Is this a known issue? We are using extjs 4.1.1a, Highcharts 2.3.3 and Extjs-port 2.1
    We have this bug in every browser.

    Is there a way to fully rebuild/refresh the chart afterreloading the store?
    In firebug it says “Call refresh from onLoad” after enabling debugging
    Thanks in advance for your feedback.

    Reply
    • Joe Kuan
      Jan 12 2013

      It is working fine in my demo page and I haven’t got any error report from users. If you click on the banner of the demo page, it will prompt you the version numbers of all the packages used for the demo.

      Make sure you get the latest Highcharts_Sencha from the github. Highcharts_ExtJs_4 is obsolete.

      If you still have the same problem, email me the code (kuan.joe@gmail.com)

      Reply
  16. Troy Wolf
    Feb 1 2013

    I develop with ExtJS 3 and 4 as well as Highcharts JS. I was looking for something unrelated and came upon this blog entry. I was immediately perplexed when I read the first sentence, “Recently, I received more emails asking me for getting the HighCharts to run on ExtJs 4.”

    ExtJS runs “on” (or in) the browser. Highcharts runs “on” (or in) the browser. What is the need for integrating Highcharts as an ExtJS object? There is nothing that prevents a developer from using Highcharts natively within an ExtJS app/page. You can put any HTML or objects you want into an Ext DOM container—Highcharts objects, flash movies, Google Maps…anything.

    I mean, I can see some ways that this kind of Ext object integration could be interesting and perhaps isolate a pure ExtJs developer from having to learn how to use Highcharts directly, but seems the difficulties of keeping up with the integration layer would easily outweigh any advantage. Plus, as can be seen in this comment thread, you end up with people coming to the ExtJs developer with questions about creating Highcharts objects—something better answered by the Highcharts documentation and support directly.

    It’s possible that I “don’t get it”. It’s happened before. :)

    Reply
    • Joe Kuan
      Feb 1 2013

      You are entitled to your opinion, sir.

      Reply
      • Troy Wolf
        Feb 2 2013

        Obviously I am entitled to my own opinion. We all are. I’m not sure what the point of that reply was…perhaps the wrong tone was assumed when you read my comment. I’m honestly asking why a person would think to create an Ext object interface to Highcharts. I create Ext JS applications that use Highcharts and this need or desire had not come up. I’m honestly interested to understand the advantage you gained with this effort. It does sound interesting.

    • Joe Kuan
      Feb 2 2013

      Apology if I have misinterpreted your first comment.

      But the reason is related to what you mentioned in your first comment. It allows ExtJs developers to concentrate in

      1) pure ExtJs programming without messing with HTML, DOM, etc. Some developers really don’t want to bother with DOM level. That’s one of the many reasons what ExtJs for.
      2) maintaining OO style programming and focusing in application logic
      3) consistency in coding. It is rather hacky/ugly to do everything in Ext.Dom.Element level
      4) taking advantage of the power Store class to the chart. Imagine a store bind to GridPanel as well as a chart object. So I only need to focus on how the Store CRUD operates. Your way have to do everything hard coded by taking data from the store and packed them into series.data array. If the store have new data arrived, you will need to directly call native Highcharts APIs series[0].setData to sort it out. With the Highcharts extension, developers only need to consider the logic of binding between data model and series in object specifier. The extension takes care when the Store’s data change.
      5) Some of the dynamic updates in Highcharts such as changing from multi-series column side by side to stacking mode or switching between column and bar series and many others, there is NO Highcharts APIs for that. You have to MANUALLY destroy the chart and start a new one. My extension hides all that. Developers only need to modify the component’s highcharts configurations and call the method ‘draw’, done.
      6) treating Highcharts as a ExtJs Component, i.e. xtype: ‘highchart’, other developers can EXTEND the Chart.ux.Highcharts class further to whatever their applications require.

      Programming is all about trade-offs. Your approach is I would imagine is direct, without relying or learning to use other people code, may be run a little bit faster because one less layer, also you learn more about Highcharts. Then again, if you use ExtJs, why not keeping in the modular approach.

      Hope this helps to explain why.

      Reply
  17. Larry
    Feb 8 2013

    Hi, we want to use Highcharts in our Extjs app, but I didn’t use Highchart before. Can I get the instruction to setup the Highchars extencion? Do I need the Highchart source code when I use this extention? Where do I put these files?
    Thank you very much!

    Reply
    • Joe Kuan
      Feb 8 2013

      The design of this extension is to preserve as much Highcharts native configurations as possible. So you do need to learn about Highcharts first. Yes, of course you need to include Highcharts library as well that is where it generates those presentable charts.

      I would suggest you start having a purely working Highcharts example. Then you can following the instructions that I have documented in the extension API manual http://joekuan.org/demos/Highcharts_Sencha/docs/#!/api/Chart.ux.Highcharts slowly integrate to ExtJs. Alternatively, you can buy the ‘Learning Highcharts’ book to learn all about Highcharts and integration with ExtJs.

      Joe

      Reply
  18. Lee
    Feb 12 2013

    Hi Joe,

    Small question on width and height of the chart.
    if I give my chart (Chart.ux.HighChart) width and height values and then I add this chart to some Ext js panel and it works well.
    If I give the parent panel width and height values and then add my chart (no width and height values for the chart) then the chart is not created.

    the problem I try to solve is that I want to avoid to give my chart fixed height and width

    any ideas?

    thanks,
    Lee

    Reply
    • Joe Kuan
      Feb 13 2013

      Sorry, Lee. Full actions packed this week. Will have a look this weekend.

      Thanks
      Joe

      Reply
    • Joe Kuan
      Feb 16 2013

      Sorry for the late reply. Have a look at this demo

      http://joekuan.org/demos/single_Highcharts_ExtJs_4/

      Does it do what you want to do?

      Reply
    • sadmer
      May 20 2013

      hey Lee..

      can u please send me the code how to add highcharts in extjs panel.

      Thanks

      Reply
      • Joe Kuan
        May 20 2013

        If you checkout Highcharts_Sencha, there is standalone.js which is a simple file example.

        Joe

  19. Rahul
    May 22 2013

    Hi ,
    does this plugin support,stacked bar chart, because i have tried a lot of things and it does not seem to work

    Thanks

    Reply
    • Joe Kuan
      May 22 2013

      It should work. Make sure you use Highcharts_Sencha and there is a standalone.js which gives you a small single file example. If this is still no help, then forward your example to me and I have a look.

      Cheers
      Joe

      Reply
      • Rahul
        May 22 2013

        Hi joe,
        Please find the code below
        {
        xtype : ‘highchart’,
        id : ‘overall_testexec_chart’,
        defaultSeriesType : ‘bar’,
        stacked: true,
        series : [
        { type : ‘bar’,
        dataIndex : ‘valid’,
        name : ‘Valid’,
        visible : true
        }, {
        type : ‘bar’,
        dataIndex : ‘Invalid’,
        name : ‘invalid’,
        visible : true
        }
        ],
        store : efficiencystore2,
        height : 500,
        width : 700,
        xField: ‘source’,
        yField:[‘valid’, ‘invalid’],
        chartConfig : {
        chart : {
        marginRight : 130,
        marginBottom : 120,
        zoomType : ‘y’,
        animation : {
        duration : 1500,
        easing : ‘swing’
        }
        },
        title : {
        text : ‘Test Execution Summary’,
        x : -20 //center
        },
        plotOptions: {
        series: {
        stacking: ‘normal’
        }
        },
        xAxis : [{
        title : {
        text : ”,
        margin : 10
        }
        }],
        legend: {
        backgroundColor: ‘#FFFFFF’,
        reversed: true
        }
        }
        }
        Below is the store
        var efficiencystore2 = Ext.create(‘Ext.data.JsonStore’, {
        fields: [‘source’, ‘valid’, ‘invalid’],
        autoLoad: true,
        proxy: {
        type: ‘ajax’,
        url:’./data/test1.json’,
        reader: {
        type: ‘json’,
        root: ‘rows’
        }
        }
        });
        JSON
        ——-
        {“rows”:[{“source”:”Fruit”,”valid”:47,”invalid”:11},{“source”:”Vegetable”,”valid”:13,”invalid”:0}]}
        -Rahul

      • Joe Kuan
        May 22 2013

        I may be wrong but I think you have a typo in the data mapping, ‘invalid’:

        type : ‘bar’,
        dataIndex : ‘Invalid’,
        name : ‘invalid’,
        visible : true

        Also you don’t need the followings:

        yField:[‘valid’, ‘invalid’],
        defaultSeriesType : ‘bar’,
        stacked: true,

        Currently, the extension use ‘defaultSerieType’ which has a typo. This will be fixed in the future.

        Joe

  20. Rahul
    May 22 2013

    Hi joe,

    Please find the code below

    {

    xtype : ‘highchart’,
    id : ‘overall_testexec_chart’,
    defaultSeriesType : ‘bar’,
    stacked: true,
    series : [
    { type : ‘bar’,
    dataIndex : ‘valid’,
    name : ‘Valid’,
    visible : true
    }, {
    type : ‘bar’,
    dataIndex : ‘Invalid’,
    name : ‘invalid’,
    visible : true
    }
    ],
    store : efficiencystore2,
    height : 500,
    width : 700,
    xField: ‘source’,
    yField:[‘valid’, ‘invalid’],
    chartConfig : {
    chart : {
    marginRight : 130,
    marginBottom : 120,
    zoomType : ‘y’,
    animation : {
    duration : 1500,
    easing : ‘swing’
    }
    },
    title : {
    text : ‘Test Execution Summary’,
    x : -20 //center
    },
    plotOptions: {
    series: {
    stacking: ‘normal’
    }
    },
    xAxis : [{
    title : {
    text : ”,
    margin : 10
    }
    }],
    legend: {
    backgroundColor: ‘#FFFFFF’,
    reversed: true
    }
    }
    }

    Below is the store

    var efficiencystore2 = Ext.create(‘Ext.data.JsonStore’, {
    fields: [‘source’, ‘valid’, ‘invalid’],
    autoLoad: true,
    proxy: {
    type: ‘ajax’,
    url:’./data/test1.json’,
    reader: {
    type: ‘json’,
    root: ‘rows’
    }
    }
    });

    JSON
    ——-
    {“rows”:[{“source”:”Fruit”,”valid”:47,”invalid”:11},{“source”:”Vegetable”,”valid”:13,”invalid”:0}]}

    -Rahul

    Reply
  21. Jun 21 2013

    Hi Can you provide the code for highstocks full demo on your site, i downloaded the one in github but that does not have full demo code in it and this extension does not work with highstocks1.3

    Reply
    • Joe Kuan
      Jun 22 2013

      Hi,

      The one in github should have all the example code that you see from the online demo. Which ones are missing?

      I am not surprised that Highstocks 1.3 is not working as I haven’t maintained the Highstock extension code for a long time due to I simply don’t have the time and not many users.

      Joe

      Reply
  22. takethefake
    Dec 16 2013

    is it possible to read out if a series is hidden? When i access series.visible the initiating Value is given, but i want the visible value after selection in legend

    Reply
    • Joe Kuan
      Dec 26 2013

      Sorry for the late reply. Not sure I understand you question completely. If you want to access data that belong to a hidden series, you need to access it through the internal store object.

      Reply
  23. Sam
    Feb 11 2014

    I cannot show multiple Highstock charts on the same page.

    I have code like this where for each report div I create a report panel with highstocks timeseries chart and a summary table/grid. The problem is that I only see chart for the very last “index” when the list of reports is more than 1. Only a blank container shows up for the index = 0. Please help!

    Ext.each(dashboard.reports, function(val, index) {
    Ext.create(“Ext.panel.Panel”,{
    id: ‘Report_’ + index,
    title : “Some Traffic Report”,
    renderTo : ‘report_’ + index,
    layout : {type : ‘hbox’, align: ‘stretch’},
    loadingMask: true,
    items : [{xtype: ‘timeseries’}, {xtype : ‘summary’}]

    });

    });

    Reply
  24. elizabeth
    May 21 2015

    Hi Joe,
    Using your updated highcharts extension, when I add a new series dynamically of type spline, the markers don’t show up on the chart line, only in the legend. is this a bug?

    Reply
    • Joe Kuan
      May 21 2015

      It should work. Can you send me the config for adding a new series and the main config to the create the chart?

      Reply
  25. Aug 16 2017

    Hi Joe
    Your articles are very helpful. However I am looking for an example where a chart using highcharts is created without using extjs-highcharts extension. Basically I have a blank panel and I want that panel to have a chart using highcharts. Is that possible?

    Reply
    • Joe Kuan
      Aug 16 2017

      I haven’t maintained the extension for years. Strictly speaking, you shouldn’t need my extension anymore to use Highcharts with ExtJs because Highcharts now comes with pure Javascript adaptor. However, I haven’t used the adaptor before so I am afraid I can’t advise you on that.

      Reply

Trackbacks & Pingbacks

  1. Added Donut Chart support for HighChart ExtJs 4 extension | Joe Kuan Defunct Code

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: