Skip to content

November 24, 2012

107

Highcharts Extension for Sencha ExtJs 4 and Touch 2

by Joe Kuan

Here is a new version of Highcharts extension which now supports both Sencha products: ExtJs 4 and Touch 2. That means the latest extension is in a new github repository, Highcharts_Sencha, whereas the old Highcharts_ExtJs_4 becomes obsolete. Nothing have been changed in terms of programming, you use the extension the same way in both Touch 2 and ExtJs 4.

Just a few notes for those who already use the extension:

  • The class and file names ‘HighChart’ are corrected to ‘Highcharts’.
  • Chart/ux/Highcharts.js supports both ExtJs 4 and Touch 2 frameworks
  • There are two directories ‘mobile’ and ‘desktop’ which represent demos source for both Touch 2 and ExtJs 4 respectively

Click here for Highcharts Touch 2 demos.

Click here for Highcharts ExtJs 4 demos.

Click here for the source.

For the module API and tutorial documntation (Sencha style), click here.

Advertisements
107 Comments Post a comment
  1. Pae
    Dec 4 2012

    Joe Kuan

    How do you deal with multiple series on pie chart ?

    I have tried to do many ways. it can generate the pie chart but it draws the same location.
    Do you have any suggestion ?

    Thanks

    Reply
    • Joe Kuan
      Dec 4 2012

      Multiple series pie chart – do you mean a pie chart with multiple concentric rings (Donut chart)? Not multiple pies in a chart

      Pass me your data and I give a go.

      Cheers
      Joe

      Reply
      • Pae
        Dec 5 2012

        it’s not the Donut chart. I mean multiple pies in a chart

        how do I config it ? Please help me Joe

        Cheers
        pae

        Please see my config below

        {
        “chartConfig”:{
        “legend”:{
        “layout”:”horizontal”,
        “align”:”center”,
        “verticalAlign”:”bottom”,
        “borderWidth”:1
        },
        “chart”:{
        “zoomType”:120
        },
        “title”:{
        “text”:”IDP Households”,
        “x”:-20
        },
        “subtitle”:{
        “text”:”Served Gaps”,
        “x”:-20
        },
        “xAxis”:{
        “title”:{
        “text”:””,
        “margin”:0,
        “rotation”:0
        },
        “labels”:{
        “rotation”:”15″
        }
        },
        “yAxis”:{
        “title”:{
        “text”:””,
        “margin”:0,
        “rotation”:0
        },
        “labels”:{
        “rotation”:”20″
        },
        “plotLines”:[
        {
        “value”:0,
        “width”:1,
        “color”:”#808080″
        }
        ]
        },
        “plotOptions”:{
        “pie”:{
        “allowPointSelect”:”true”
        }
        },
        “tooltip”:{
        “formatter”:””
        },
        “credits”:{
        “text”:”immap.org”,
        “href”:”http:\/\/www.immap.org\/”
        }
        },
        “series”:[
        {
        “name”:”Households”,
        “type”:”pie”,
        “categorieField”:”Governorate”,
        “dataField”:”Households”
        },
        {
        “name”:”HouseholdsServed”,
        “type”:”pie”,
        “categorieField”:”Governorate”,
        “dataField”:”HouseholdsServed”
        }
        ],
        “xField”:”Governorate”,
        “animation”:false,
        “store”:””
        }

      • Joe Kuan
        Dec 5 2012

        In the series, you need to specify ‘center’ option. Have a look at ‘plotOptions.pie.center’

        Joe

      • Dec 6 2012

        I tried to set as belows but firebug showed Warning Unresponsive script because the script took running too long on highchart.src.js at line 15149

        // Slot is taken, find next free slot below. In the next run, the next slice will find the
        // slot above these, because it is the closest one
        while (slots[slotIndex] === null) { // make sure it is not taken
        –> this line slotIndex++;
        }

        “series”:[
        {
        “name”:”Households”,
        “type”:”pie”,
        “categorieField”:”Governorate”,
        “dataField”:”Households”,
        “center”:”[200,250]”
        },
        {
        “name”:”HouseholdsServed”,
        “type”:”pie”,
        “categorieField”:”Governorate”,
        “dataField”:”HouseholdsServed”,
        “center”:”[200,290]”
        }
        ],

        Could you show me the example ?

        pae

      • Joe Kuan
        Dec 6 2012

        You either do center: [ 200, 500 ] or center: [ “25%”, “50%” ]

        not “center”: “[200, 500]”

        Try that. If u still have problem, then I will investigate further.

        Joe

      • paepod
        Dec 6 2012

        It’s work so well
        Thank you

        Pae

  2. lee
    Dec 5 2012

    Hi Joe,

    I have a question regurding changing the dataIndex inside a chart.
    I have a model which contains 2 values: ‘value1’, ‘value 2’.

    my series defenition is here:

    series : [{
    type : ‘column’,
    dataIndex : ‘value1’,
    visible : true
    } ],

    the bar chart renders fine.
    when I click on a button I want to change the dataIndex to value2 so my bar chart will redraw
    itself with the ‘value2’ from the model, what is the best way for that?

    I tried to change the dataindex to value2 but the chart redraw with the same values of value1.

    another option I thought is to add series2 with dataIndex : ‘value2’, with visible:false and when you click on a button to remove series1 and show 2 but this does not seem to be the right solution.

    by the way is there a forum for this extention or should I post my questions here regurding the extension?

    thanks,
    Lee

    Reply
    • Joe Kuan
      Dec 5 2012

      Mmmm…….
      First of all, you need to use Highcharts click event to do that. Have a look at plotOptions.series.point.events.click to trigger the action.

      Then inside the click handler, you can try to use ExtJs getComponent or getCmp method to get the chart object and change the value on chart.chartConfig.series[0].dataIndex or chart.series[0].dataIndex option (sorry, I can’t remember which is the original config, I think it’s chart.series).

      Then try to call chart.refresh and see

      Reply
      • Lee
        Dec 6 2012

        Hi Joe,

        Thanks for the quick answer.
        well this is what I did in the begining (your suggestion) :

        var tempChart = this.getComponent(‘innerChart’);
        tempChart.series[0].dataIndex = ‘value2’;
        tempChart.refresh();

        it really changed the dataindex but no change on the chart.
        after debuging I saw that there is another field yField (old version maybe) that its value is also ‘value1’ and the code is using this field so this code fix the problem:

        var tempChart = this.getComponent(‘innerChart’);
        tempChart.series[0].dataIndex = ‘value2’;
        tempChart.series[0].yField = ‘value2’;
        tempChart.refresh();

        the purpose of this is to load from the server in one time several values to the same x point so user can select between different values for Y on the same X.

        thanks for your help,
        Lee

      • Joe Kuan
        Dec 6 2012

        well, yField is alias of dataIndex. If you can wait, then I will explore properly this weekend and bring u the solution.

  3. João Paulo Pereira
    Feb 4 2013

    Hello,

    I have a problem to test the plugin HighChart to EXT, you can tell me what I’m doing wrong, attached the code in pastebin:

    http://pastebin.com/r98tgq5W

    thank you very much!

    Reply
    • Joe Kuan
      Feb 4 2013

      Because you direct substitute a Highcharts normal configuration into the ExtJs framework and it won’t work like that. U need to corporate with ExtJs Store object, i.e. the series option needs to come above chartConfig and bind with store as described in the documentation.

      Reply
      • João Paulo Pereira
        Feb 5 2013

        Hi Joe,

        Thanks for the quick answer!

        Well, I changed highchart configuration to work, but nothing has happened.

        http://pastebin.com/u27UxVV8#

      • Joe Kuan
        Feb 5 2013

        I maybe missing something but all I can see is Ext.define which just declares a class structure. Where is Ext.create along with Ext.application.launch or Ext.onReady? The best way to experiment as well as for me to help you is to create a html file with the ExtJs code embedded inside the tag.

        Regards
        Joe

  4. W
    Feb 13 2013

    I have been playing around with your highcharts extension for some hours now and it does feel very ExtJSish, which is great. However I do have a few questions I hoped you could perhaps answer? First of your design really expects all data series to be fields in a common model object – as it is the model object returned by the store which is traversed. I am then wondering how you would go about handling dynamic series created by the server? I am thinking of a structure like:

    [ {“label”: “X”, “data”: [[1,2],[2,5],…]}, {“label”: “Y”, “data”: [[3,5],[4,7],…]}, … ].

    Would you change the serverside to produce objects all containing the label? or would you create an ext reader for parsing the data into model objects or is there a smarter way of getting these series data directly into the chart? As far as I know highcharts does accept these data arrays if it was used on its own?

    Hope you understand my question?

    Thanks for the great work you have done!

    Kind Regards

    W

    Reply
    • Joe Kuan
      Feb 13 2013

      Sorry, actions packed this week. I will have a look this weekend and get back to you.

      Thanks
      Joe

      Reply
    • Joe Kuan
      Feb 16 2013

      Sorry for the late reply. I hope I understand your question.

      For now, I would suggest to use addSeries method for dynamic series and perhaps pass the series config with ‘data’ option with data array directly constructed from the async store’s load method.

      chart.addSeries([{
      type: ‘spline’,
      name: ‘X’,
      data: [ [ 1, 2 ], [ 2, 5 ], …. ]
      }, {
      type: ‘line’,
      name: ‘Y’,
      data: [ [ 3, 5 ], [ 4, 7 ], …. ]
      }]);

      Thanks
      Joe

      Reply
    • Chuck
      Feb 22 2013

      I have been wondering something very similar to what W was getting at with his question about forcing all series in a chart to share a model. How do you handle series that don’t have the same number of data points?

      For example, how would you recreate the following Highcharts demo using this extension?

      http://www.highcharts.com/demo/spline-irregular-time

      Thanks for your efforts on the extension so far!
      ~Chuck

      Reply
      • Joe Kuan
        Feb 24 2013

        Yes, you are right there that my extension so far assumes all series sharing the same number of points. The only work around way is to use the extension addSeries method with a series config with pre-filled ‘data’ array.

        I am planning to update my extension to support Highcharts beta 3.0. In the meantime, I will consider how to best approach to this:

        1) adds support for data array on ‘dataField’, so that you return a single row from JsonStore for multiple series.

        root: [{
        name: ‘seriesA’,
        data: [ [ 1, 3 ], [ 2, 4 ] ]
        }, {
        name: ‘seriesB’,
        data: [ [ 2, 5 ], [ 3, 8 ], [ 5, 6] ]
        }]

        2) add individual ‘store’ support for each series config. That will resolve irregular data points in multiple series and also each individual series can update without affect the others. However, this will impact & complicate the current implementation A LOT. I personally don’t have the resource to do the 2nd approach.

  5. Mar 11 2013

    Hi, I have found an unexpected behavior in this extension: After a store load zero records (i.e. server just return an empty array), the previous drawn series on chart are not be cleared.

    thanks,
    anson

    Reply
    • Joe Kuan
      Mar 11 2013

      Ok, I will build a test demo and investigate.

      Thanks
      Joe

      Reply
    • Joe Kuan
      Mar 16 2013

      A new option, updateNoRecord, is supported in the Serie class in the next release.

      Thanks
      Joe

      Reply
      • Mar 18 2013

        It works, thanks.

  6. Marcus
    Mar 11 2013

    Hi Joe,
    did you ever tried to define plotLines for the xAxis?
    I tried to display a plot line with a very easy configuration but unfortunately I could not see the line.
    sample config:
    ——————–8<——————–
    var store = new Ext.data.ArrayStore({
    fields: ['month', 'value'],
    data : [
    ['jan', 1],
    ['feb', 2],
    ['mar', 3],
    ['apr', 4],
    ['mai', 5],
    ['jun', 6]
    ]
    });

    xtype: 'highchart',
    series:[{
    dashStyle: 'DashDot',
    dataIndex: 'value'
    }],
    xField: 'month',
    store: store,
    chartConfig: {
    chart: {
    type: 'spline'
    },
    title: {
    text: 'A simple graph'
    },
    xAxis: {
    plotLines: [{
    color: '#FF0000',
    width: 5,
    value: 'mar'
    }]
    }
    }
    ——————–8<——————–

    I checked the config object which will be passed by the adapter to the highcharts source and the plotLines object is still present.
    Regards Marcus

    Reply
    • Joe Kuan
      Mar 11 2013

      Oh, I only have an online demo of y-axis plotLine. Ok, I will build another demo to investigate this issue.

      Thanks
      Joe

      Reply
  7. pieter
    Mar 18 2013

    First of all, thank you for the plugin!
    I’m using it for splines etc, and they work great,

    However; is it possible that several options of gauge are not supported?
    I can’t seem to get the data-labels to work (they just don’t show) and I am also unable to draw plotbands.
    I am actually trying to create this via the plugin:
    http://jsfiddle.net/MrMPM/

    So in the end, I want to use the data from the datastore to set the plotband instead of the gauge-arrow, but that shouldn’t be so hard, issue is that the plotband isn’t being drawn…

    Do you have any suggestions?
    I also tried the donut-chart, but that’s a whole lot of fuzz (make the half of the chart fall out of the container, no data-labels like gauge, …)

    Thank you in advance!

    Reply
  8. pieter
    Mar 18 2013

    Sorry, looks like I was too fast posting my message, it’s only a matter of putting things on the right location in the code (d’uh) and setting the series visibility to false… :-)

    Reply
    • Joe Kuan
      Mar 18 2013

      No problem. Are you still having problem using the extension?

      Reply
  9. Joel
    Mar 25 2013

    Hi, when I download the zip file on git hib, I extracted it into the following path on my Linux Apache server:

    /var/www/demos/Highcharts_Sencha/

    I can see the index page at:

    http://localhost/demos/Highcharts_Sencha/desktop/index.html

    I get the page loading with the tree menu but none of the chart work, except the chart named: “Spline – No store binding”.

    Any idea what’s wrong? Someone had the same problem?

    Reply
  10. Joel
    Mar 25 2013

    A basic example with just a few files would be great…

    Reply
    • Joe Kuan
      Mar 25 2013

      There is a basic example. It’s in desktop/standalone.html

      Reply
      • Joel
        Mar 25 2013

        Hi Joe, it’s working. Thanks! That standalone file is a good starting point.

  11. Joel
    Mar 25 2013

    It would be awesome to have one day this extension configurable directly from Sencha Architect.

    Reply
  12. Marcus
    Mar 27 2013

    Hi Joe,
    I’m sorry to bother you again, but I think I found a bug related with IE8. I tried your demo page http://joekuan.org/demos/Highcharts_Sencha/desktop/ in IE8 and it gives me an error in Series.js. If I comment these lines

    Ext.apply(config,{
    events:{
    click:this.onPointClick.bind(this)
    }
    });

    everything works fine.
    I try to dig a little bit and post again if I find something.

    Regards Marcus

    Reply
    • Joe Kuan
      Mar 27 2013

      Thanks. Yes, this line will be changed in the upcoming release which supports both Highcharts 3.0 new charts and ExtJs 4.2.

      Reply
  13. Ak
    May 2 2013

    HI, i`m trying to run a simple series chart but i cant see anything, i can see the panel but there is nothing in it, please help
    this code is when the mainPanel event ‘show’ invoked

    http://pastebin.com/v1mP0nbE

    Reply
    • Joe Kuan
      May 5 2013

      Sorry for late reply.

      At the moment, it doesn’t refer to chart.type as for the default series type which will be in the next release.

      Please define series type inside the array of series object:

      series:[{
      dataIndex: ‘value’,
      type: ‘spline’
      }],

      Alternatively, you can use ‘defaultSerieType’, i.e.

      var chart = Ext.create(‘Chart.ux.Highcharts’, {
      defaultSerieType: ‘spline’,
      series:[{
      dataIndex: ‘value’
      }],
      xField: ‘month’,
      ….

      Thanks
      Joe

      Reply
  14. Lorenzo
    May 24 2013

    Hi Joe,
    i’m trying to use your extension inside a Sencha Touch app:
    i’m porting a php web application in a mobile app and i need to create one or two empty charts per view and then add series through a jsonp request.

    I don’t understand how to even create those empy charts, i tried with this code: http://pastebin.com/uhB3sid6

    Any help would be very appreciated.

    thanks
    Lorenzo

    Reply
  15. lorenzo
    May 25 2013

    trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.

    I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls. Here’s my view code (not all the 130 lines…):

    {
    xtype : ‘panel’,
    scrollable: true,
    html : ‘INSERIRE QUI I GRAFICI E LE TABELLE’,
    items : [
    {
    xtype : ‘panel’,
    layout : ‘fit’,
    html : ‘AREA PER GRAFICO’,
    itemId : ‘chartRenderPanel’,
    margin: ‘180px’
    },
    { //sample code, to be replaced with a consinstent config…
    xtype: ‘highchart’,
    chartConfig: {
    chart: {
    type: ‘spline’
    },
    title: {
    text: ‘A simple graph’
    },
    xAxis: {
    plotLines: [{
    color: ‘#FF0000’,
    width: 5,
    value: ‘mar’
    }]
    }
    }
    },
    {
    xtype : ‘panel’,
    layout : ‘fit’,
    html : ‘AREA PER TABELLE’,
    itemId : ‘tableRenderPanel’,
    margin: ‘180px’
    }
    ]
    }
    The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/

    it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:

    update : function(delay) {
    var cdelay = delay || this.updateDelay;
    if(!this.updateTask) {
    this.updateTask = new Ext.util.DelayedTask(this.draw, this);
    }
    this.updateTask.delay(cdelay);
    },
    With “Uncaught TypeError: undefined is not a function ” message in the console.

    Please, help! : )

    Lorenzo

    Reply
    • Joe Kuan
      May 26 2013

      Sorry for the late reply. From the look of your code, I cannot find the ‘series’, ‘xField’ and ‘store’ options.

      Like in your jsfiddle example,

      var chart = Ext.create(‘Chart.ux.Highcharts’, {
      series:[{ <———–
      dataIndex: 'value'
      }],
      xField: 'month', <————
      store: store, <————
      chartConfig: {

      You need to tell the extension where is your store and how the store data map to the series.

      Reply
      • lorenzo
        May 26 2013

        Hi, and thanks for your time. :-) do i need to bind a store even if i want to add series dynamically? I’m porting the charts from a site to a corresponding mobile app. Thanks

      • Joe Kuan
        May 26 2013

        You don’t need to bind the store if you want to add a series dynamically. Just do

        var chart = Ext.create(‘Chart.ux.Highcharts’, {
        ….
        });

        chart.addSeries([{
        type: ‘spline’,
        data: [ [ 0, 0 ], [ 1, 1 ], …. ]
        }]);

        Something like that.

        Joe

      • Lorenzo
        Jun 10 2013

        hello, it’me again… i can’t get things to work :( can i write you in private?
        thanks a lot.
        Lorenzo

      • Joe Kuan
        Jun 10 2013

        Ok. I can only offer limited help as I have works with other clients. U can click ‘Contact me’ in my first blog.

        Joe

  16. Sneha
    May 29 2013

    Hi Joe,

    I am trying to implement the waterfall chart using your High Charts extension for Sencha (the desktop version) and I keep getting the following error:

    http://www.highcharts.com/errors/17

    Uncaught Highcharts error #17: http://www.highcharts.com/errors/17 highcharts-min.js:16
    qa highcharts-min.js:16
    sb.initSeries highcharts-min.js:174
    (anonymous function) highcharts-min.js:198
    each.Array.forEach.c highcharts-min.js:24
    sb.firstRender highcharts-min.js:198
    sb.init highcharts-min.js:173
    sb highcharts-min.js:18
    Ext.define.draw Highcharts.js:631
    c

    Can you help me understand what is causing the error?

    Reply
    • Joe Kuan
      May 29 2013

      It is likely that you haven’t included the WaterfallSerie.js or you have included the ‘type’ option in your series option

      This is waterfall series option from the online demo

      series : [{
      upColor: Highcharts.getOptions().colors[2],
      color: Highcharts.getOptions().colors[3],
      type: ‘waterfall’,
      categorieField: ‘category’,
      yField: ‘value’,
      colorField: ‘color’,
      sumTypeField: ‘sum’,
      dataLabels: {
      ……
      },
      pointPadding: 0
      }],
      height : 500,
      width : 700,
      chartConfig : {
      ……

      Reply
      • Sneha
        May 29 2013

        Hi Joe,

        I do have the WaterfallSerie.js file in my Chart.ux.Highcharts folder….Below is the function that is drawing the chart…

        function getColumnChart(){

        var store = new Ext.data.ArrayStore({
        fields: [‘month’, ‘value’,’sum’],
        data : [
        [‘jan’, 1],
        [‘feb’, 2, ‘intermediate’],
        [‘mar’, 3],
        [‘apr’, 4,’final’]

        ]
        });

        var chart = Ext.create(‘Chart.ux.Highcharts’, {
        series:[{
        upColor: Highcharts.getOptions().colors[2],
        color: Highcharts.getOptions().colors[3],
        type:’waterfall’,
        categorieField:’month’,
        yField:’value’,
        sumTypeField: ‘sum’
        }],

        store: store,
        chartConfig: {
        chart: {
        marginRight : 130,
        marginBottom : 120
        },
        title: {
        text: ‘A simple graph’
        },
        xAxis: {
        type: ‘month’
        },
        yAxis: {
        title: {
        text: ‘Trying so hard’
        }
        }
        }
        });

        return chart;
        }

      • Joe Kuan
        May 29 2013

        According to the Highcharts error #17. You need to load highcharts-more.js in your html file. Please check whether you have done so.

        Joe

      • Sneha
        May 30 2013

        Thanks Joe! That worked.

      • Sneha
        May 31 2013

        I have another issue that I am working on…is there a way to simulate the Richtips feature in Extjs (http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/charts/TipsChart.html) for a spline……Can you suggest a way to do it..so I can try implementing it…..

      • Joe Kuan
        Jun 3 2013

        Sorry, the feature looks interesting. If I can dig some free time, I will it a go later this week.

  17. John D.
    May 30 2013

    Hi,

    Thanks for your work Joe.

    I can’t seem to get the highchart to display after writing my view the way you suggest in the documentation.

    I’ve uploaded much of my source to Sencha Fiddle: http://www.senchafiddle.com/#RYBqw

    The view is in DashboardTab.js.

    Any idea as to what’s wrong?

    Thanks.

    Reply
    • Joe Kuan
      May 30 2013

      Hi,

      Sorry but I don’t think have enough time to look through the program. However, I notice few things.

      First, I don’t see the ExtJs GUI displayed at all and I suspect the issue occur in somewhere before rendering the chart.
      Second, I strongly recommend to experiment or build the chart program from a small sample of code and slowly build from a working example.
      Third, the Highcharts extension doesn’t accept store specified as ‘store: { xtype: … }’. You need to pass a store object.

      Thanks
      Joe

      Reply
  18. Lee
    Jun 13 2013

    Hi Joe,

    I have my chart in the center region of border layout and another panel (collapsible) on the east region of the border layout.
    What I see is when the east panel is expanded the chart draw method is called twice and the chart is drawn twice (the first draw does not finish and then the second draw starts and finish).
    When I click to collapse the east panel the draw method is only called once and the chart work as expected.

    I have debugged it and I see that the method _onResize : function() is called 3 times during panel expand (only 2 calls to draw) and when the panel collapse the method is called once.

    I am not sure if this is Extjs issue or the extension issue or my code :-)

    Thanks for the help,
    Lee

    Reply
    • Lee
      Jun 13 2013

      Hi,

      Doing the same test with simple panel with a resize listener I see that the listener is also called 3 times on panel expand and one time on panel collapsed
      the only problem is that in the chart I see it drawn twice on panel expand …

      Reply
  19. Sanjeev
    Jun 21 2013

    Hi Joe,

    I got strucked @ store i am using for column chart .

    When I am using proxy in store and getting the data from server.. I am able to get the chart.

    But when i use the same data as Inline data .. I am not able to get the chart.

    Ext.define(‘highcharts.store.Target_chart’, {
    extend: ‘Ext.data.Store’,
    storeId:’chartStore’,
    autoLoad:false,

    config: {
    model:’highcharts.model.Target_chart’,

    data:[{
    ‘category’:’trans’,
    ‘x’:50,
    ‘y’:14.8,
    ‘z’:14.8},
    {
    ‘category’:’transit’,
    ‘x’:50,
    ‘y’:14.8,
    ‘z’:14.8},
    {
    ‘category’:’cue’,
    ‘x’:50,
    ‘y’:14.8,
    ‘z’:14.8}
    ]

    }
    });

    Please help me out ..

    Reply
    • Sanjeev
      Jun 21 2013

      Its sencha touch application

      Reply
      • Joe Kuan
        Jun 22 2013

        There is a related bug in displaying a chart without store data for Sencha Touch. I will release a new version with demo code probably this weekend.

      • Joe Kuan
        Jun 23 2013

        Check the latest version which includes a fix that was reported by another user. I have also added a new example ‘Column chart (Embedded Data)’.

        You need to add the option

        initAnimAfterLoad: false

        Because the default behaviour is to defer creating a chart and wait for a load event to gather initial data from the store. So that the chart can be displayed with the first set of data to achieve initial animation. In your embedded data store case, there is no need.

      • sanjeev
        Jul 9 2013

        Hi Joe,

        I have tried above fix. Its working . Thank you very much.

        But .. the animations are not working in sencha native application.
        In column series , the bars are not animated while showing .. they just appeard like that..
        But when I tried in safari in IPad , the animations are smooth.

    • sanjeev
      Jul 11 2013

      Hi Joe ,

      there was some thing wrong in my code. Now its Okay. Thanks for the plugin !! :D

      Reply
  20. sanjeev
    Jul 12 2013

    Hi Joe ,

    Highcharts are working very fine in ipad Simulator !!

    But when i deploy native app in device .. my app not getting opened.App got Strucked at 3 blinking dots( loader image in sencha touch )

    Please help me out.

    Reply
    • sanjeev
      Jul 13 2013

      my store.load() throwing error in my device .. the error is ” ‘undefined’ is not a function ”

      my store is :

      Ext.define(‘highcharts.store.Target_chart’, {
      extend: ‘Ext.data.Store’,

      config: {
      storeId:’tagetChart’,
      autoLoad:false,
      fields:[‘category’,{‘name’:’x’,’type’:’float’},{‘name’:’y’,’type’:’float’},{‘name’:’z’,’type’:’float’}],
      data:[{
      ‘category’:’trans’,
      ‘x’:50,
      ‘y’:14.8,
      ‘z’:14.8
      },
      {
      ‘category’:’transit’,
      ‘x’:50,
      ‘y’:14.8,
      ‘z’:14.8},
      {
      ‘category’:’cue’,
      ‘x’:50,
      ‘y’:14.8,
      ‘z’:14.8}
      ]

      }
      });

      Reply
  21. Lucia
    Jul 19 2013

    Hello Joe,
    is there a possibility to select programmatically an element of a pie chart like in jQuery Highcharts example (Browser share). With properties sliced and selected in the data store?
    Thank you
    Lucia

    Reply
    • Joe Kuan
      Jul 23 2013

      Sorry, can you give me an example?

      Reply
      • Lucia
        Jul 24 2013

        Dear Joe,
        I look for the ExtJS 4 chart series properties like in the jQuery example, where the “Chrome”-part is programmatically selected (not by user click):

        series: [{
        type: ‘pie’,
        name: ‘Browser share’,
        data: [
        [‘Firefox’, 45.0],
        [‘IE’, 26.8],
        {
        name: ‘Chrome’,
        y: 12.8,
        sliced: true,
        selected: true
        },
        [‘Safari’, 8.5],
        [‘Opera’, 6.2],
        [‘Others’, 0.7]
        ]
        }]

        The same for ExtJS 4?
        In ExtJS 4 there is a datastore like

        var store = Ext.create(‘Ext.data.JsonStore’, {
        fields: [‘name’, ‘data1’],
        data: [
        {‘name’: ‘Firefox’, ‘data1’: 45.0},
        {‘name’: ‘IE’, ‘data1’: 26.8},
        {‘name’: ‘Chrome’, ‘data1’: 12.8}
        ]
        });

        Where to insert the properties “sliced” and “selected”?

        Thank you
        Lucia

  22. Oct 5 2013

    Hi Joe,
    Can I make a chart that has no store? I’m trying to replicate highcharts examples:

    I’m trying to do this?
    series: [{
    name: ‘Allocated Budget’,
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    pointPlacement: ‘on’
    }, {
    name: ‘Actual Spending’,
    data: [50000, 39000, 42000, 31000, 26000, 14000],
    pointPlacement: ‘on’
    }]

    any help?

    Reply
  23. Pini
    Oct 13 2013

    Hi, I am trying to use the colums embedded sample and it is not workign for me.

    Here is the view code:
    //Create the store
    this.chartsStore = Ext.create(“SpeechAnalytics.store.chart.EmbeddedData”, {
    model: “SpeechAnalytics.model.chart.EmbeddedData”,
    storeId: ‘chartStore’
    });

    var hcConfig =
    {
    series: [{
    dataIndex: ‘x’
    }, {
    dataIndex: ‘y’
    }, {
    dataIndex: ‘z’
    }],
    xField: ‘category’,
    // Because the store already embedded with data, no need to do autoLoad
    // from the server. So don’t defer creating the chart until a load is done
    // for initial data for initial animation
    // Setting initAnimAfterLoad to false will tell the extension create a
    // chart straight without waiting for data from async load
    initAnimAfterLoad: false,
    chartConfig: {
    chart: {
    type: ‘column’,
    zoomType: ‘x’
    },
    title: {
    text: ‘Column chart for store with emdedded data’,
    x: -20 //center
    },
    credits: {
    text: ‘joekuan.wordpress.com’,
    href: ‘https://joekuan.wordpress.com’,
    style: {
    cursor: ‘pointer’,
    color: ‘#707070′,
    fontSize: ’12px’
    }
    }
    }
    };

    hcConfig = Ext.clone(hcConfig);
    var chart = Ext.widget(“highchart”, hcConfig);

    var button =
    {
    xtype:”button”,
    handler: this.loadStores,
    scope:this,
    text: “Click”, width: 200,
    height: 200
    }
    var chartPanel =
    {
    xtype: “panel”,
    width: 200,
    height:200,
    title: ‘Highcharts-Test’,
    layout: ‘fit’,
    items: [chart]
    };

    this.add([topToolbar,button, chartPanel]);

    },

    loadStores: function ()
    {
    this.down(“highchart”).bindStore(this.chartsStore, true);
    this.chartsStore.load();
    }

    I am getting into the onLoad of the highcharts file (and in your code this doesnt happen) and the this.chart is empty.

    Any idea?

    Reply
    • Joe Kuan
      Oct 14 2013

      Highcharts config requires xAxis and yAxis options.

      Have a look at the standalone.js – that is the simplest example in the package.

      My advice is to start with a WORKING Highcharts example and then slowly integrated to ExtJs using the extension. Read the tutorial comes with the API documentation. There is a step by step introduction.

      http://joekuan.org/demos/Highcharts_Sencha/docs/#!/api/Chart.ux.Highcharts

      Reply
  24. Pini
    Oct 22 2013

    I am using your sample for the embedded data column chart for sencha touch
    Still cant make it to work.

    Reply
  25. Pini
    Oct 22 2013

    Can you supply here a very simple bar chart for sencha touch with embedded data. That all I need.

    Reply
  26. Mer
    Dec 24 2013

    Hello I’m trying to run your example Desktop from my webserver but I get : Uncaught ReferenceError: Highcharts is not defined. What’s required in order to get it to run?
    Thank you.

    Reply
    • Joe Kuan
      Dec 26 2013

      That’s the error when the Highcharts or the Highcharts ExtJs extension is not loaded.

      Reply
      • Jan 10 2014

        Hi Joe,

        I have done exactly as it is in instructions in Highcharts.js
        It is giving me with the error “Highcharts is not defined ”

        I have required the necessary things as well: –

        requires: [
        ‘Chart.ux.Highcharts’,
        ‘Chart.ux.Highcharts.Serie’,
        ‘Chart.ux.Highcharts.SplineSerie’
        ]

        also i have set the path appropriately here
        Ext.Loader.setConfig({
        enabled : true,
        disableCaching : true, // For debug only
        paths : {
        // ‘Chart’ : ‘../Chart/’
        ‘Chart’ : ‘../../../../../../../../../../web/extjs/plugins/Chart/’
        }
        });

        can you please tell where i am doing wrong?
        Thanks

      • Joe Kuan
        Jan 17 2014

        The code looks fine. It depends on how you structure the Chart directory in your application directory.

        It should be like:

        Chart/
        app/
        index.html
        app.js

  27. Daniel
    Jan 6 2014

    is it possible to read out which series is shown and which is hidden?

    i have to chart types and want to change with a button click the type of the chart. i tried to read out the the visible state of a series but realized that this value is only the initial visible value

    var chart = button.up().up().getComponent(‘chart’);
    series=chart.series;
    s1=series[0].visible;
    s2=series[1].visible;
    s6=series[2].visible;
    s3=series[3].visible;
    s4=series[4].visible;
    s5=series[5].visible;

    where can i find the actual visible value after changes in the legend?

    Reply
    • Joe Kuan
      Jan 17 2014

      Sorry for the very late reply. Got many deadlines to catch. :(

      In order to get the real series visible state, you do

      var chart = button.up().up().getComponent(‘chart’);
      series = chart.chart.series;

      The first chart is the ExtJs Component that wraps around the Highcharts chart object. In order to use Highcharts API or access the real chart object, you just need to go one level down with the ‘chart’ option.

      Joe

      Reply
      • Daniel
        Jan 17 2014

        Thanks! helped me a lot :)

  28. Sam
    Feb 11 2014

    Hi Joe,

    I am trying to have charts show up on the same page but that is not working as expected.

    Here is my code to show report widget (which contains highcharts chart “timeseries” and summary table widget). As I iterate through the reports I would expect to see charts and summaries for each report however I only see chart for the very last div container for report. Can you please help? Like Ext.Chart I would expect that each report will show chart and summary(Summary for each report also shows up just fine).

    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
    • Joe Kuan
      Feb 11 2014

      Sorry, are you having trouble with Highcharts or Highstock extension? They are different product. I haven’t maintained Highstock for years due to low popularity. So you may have compatibility problem.

      As for Highcharts, it should work. I have it working with multiple charts in my work project. You email me your code but I don’t know when I will be available next.

      Reply
      • Sam
        Feb 11 2014

        Hi Joe, thank you for your prompt response. I have emailed the code to your gmail account. I am using Highcharts – code is pretty much the same as your standalone.js. I hope its a very simple fix :-) Thanks!

  29. Jez D
    May 6 2014

    Hello Joe,

    I am trying to use this extension with sencha touch 2, to create gauge charts. For some reason, the chart is not rendering and no error is given. The highcharts container is created, but no actual chart. Here is the code:
    theGauge = new Ext.create(‘Chart.ux.Highcharts’, {
    xtype: ‘highchart’,
    cls: ‘ag’,
    series:[{
    dataIndex: ‘CurrentValue’
    }],

    store: gaugeStore,
    chartConfig: {
    chart: {
    type: ‘gauge’
    },
    title: {
    text: ‘A simple graph’
    }
    }
    });
    console.log(theGauge);

    Reply
  30. sencha dev
    Jul 1 2014

    Hi Joe,

    I am using your plugin and I am able to plot a multi series bubble chart in Sencha Touch using the following –

    xtype: ‘highchart’,
    series : [{
    type : ‘bubble’,
    dataIndex: ‘series1’,
    }, {
    type : ‘bubble’,
    dataIndex : ‘series2’
    }],
    store: Ext.create(‘FicoWallet.store.BubbleSingle’, {
    model: ‘FicoWallet.model.BubbleSingle’,
    storeId: ‘chartStore’
    }),
    chartConfig : {
    chart : {
    },
    }

    Now, I want to configure the yAxis. I want to set the type, dateTimeLabelFormats, min and max values. How do I do that ? I tried few things but it did not work !!

    I tried to do the same directly on a high chart as follows :

    check http://jsfiddle.net/2RB4j/

    yAxis: {
    type: ‘datetime’,
    dateTimeLabelFormats: { //force all formats to be hour:minute:second
    second: ‘%H:%M’,
    minute: ‘%H:%M’,
    hour: ‘%H:%M’,
    day: ‘%H:%M’,
    week: ‘%H:%M’,
    month: ‘%H:%M’,
    year: ‘%H:%M’
    },

    min:0,
    max:23*60*60*1000

    },

    How do i achieve the equivalent via Sencha Touch?

    Reply
    • Joe Kuan
      Jul 2 2014

      I will have a look in the next couple days due to workload. Remind me if you haven’t heard from me early next week. Sorry about that

      Reply
      • Joe Kuan
        Jul 2 2014

        Ext.Loader.setConfig({
        enabled : true,
        paths : {
        ‘Chart’ : ‘../Chart/’
        }
        });

        Ext.require(‘Chart.ux.Highcharts’);
        Ext.require(‘Chart.ux.Highcharts.Serie’);
        Ext.require(‘Chart.ux.Highcharts.BubbleSerie’);

        Ext.application({
        name : ‘HighChart’,
        launch : function() {

        var win = Ext.create(‘Ext.window.Window’, {
        width : 800,
        height : 600,
        minHeight : 400,
        minWidth : 550,
        hidden : false,
        shadow : false,
        maximizable : true,
        collapsible: true,
        title : ‘Highchart example’,
        renderTo : Ext.getBody(),
        layout : ‘fit’,
        items : [{
        xtype : ‘highchart’,
        id : ‘chart’,
        series: [{
        type : ‘bubble’,
        data: [ [ 5, 19200000, 13 ] ]
        }],
        store: null,
        initAnimAfterLoad: false, // Without store
        chartConfig : {
        chart : {
        marginRight : 130,
        marginBottom : 120
        },
        yAxis : {
        type: ‘datetime’,
        dateTimeLabelFormats: { //force all formats to be hour:minute:second
        second: ‘%H:%M’,
        minute: ‘%H:%M’,
        hour: ‘%H:%M’,
        day: ‘%H:%M’,
        week: ‘%H:%M’,
        month: ‘%H:%M’,
        year: ‘%H:%M’
        },
        min:0,
        max:23*60*60*1000
        }
        }
        }]
        });

        win.show();
        }

        });

        Screenshot

      • Aug 12 2014

        That means it can not be done using store in chart, doesn’t it? :) Edited the adapter’s code ’cause i need to use extjs store and datetime xAxis together with irregular time intervals, so i just removed using of setCategories() (???) and to the serie’s data array i push both x and y values (array):

        if (xAxis_type == ‘datetime’ && _this.xField)
        {
        data[i].push([record.data[_this.xField], point]);
        }
        else
        {
        data[i].push(point);
        }

        Here is the edited part of refresh() function (i edited just the part my chart uses :))…

        refresh : function() {
        // Sencha Touch uses config to access properties
        // _this is used to access the initial series configuration, not the
        // instantiated chart series configuration
        var _this = (this.statics().sencha.product == ‘t’) ? this.config : this;

        this.log(“Call refresh “);
        if(this.store && this.chart) {

        var data = new Array(), seriesCount = _this.series.length, i,
        xAxis_type = this.chart.xAxis[0].options.type
        ;
        for( i = 0; i < seriesCount; i++)
        data.push(new Array());

        // We only want to go true the data once.
        // So we need to have all columns that we use in line.
        // But we need to create a point.
        var items = this.store.data.items;
        var xFieldData = [];

        for(var x = 0; x < items.length; x++) {
        var record = items[x];

        if(_this.xField && xAxis_type != ‘date time’) {
        xFieldData.push(record.data[_this.xField]);
        }

        for( i = 0; i < seriesCount; i++) {
        var serie = _this.series[i], point;
        // if serie.config.getData is defined, it doesn't need
        // reference to dataIndex or yField, it just direct access
        // to fields inside the implementation
        if (serie.dataIndex || serie.yField ||
        serie.minDataIndex || serie.config.getData) {
        // record.data[dataIndex] is an array, then treat it as an array of
        // data points
        if (Ext.isArray(record.data[serie.dataIndex])) {
        Ext.each(record.data[serie.dataIndex], function(dataPoint) {
        data[i].push(dataPoint);
        });
        } else {
        point = serie.getData(record, x);
        serie.bindRecord && (point.record = record);
        if (xAxis_type == ‘datetime’ && _this.xField)
        {
        data[i].push([record.data[_this.xField], point]);
        }
        else
        {
        data[i].push(point);
        }

        }
        } else if (serie.type == ‘pie’) {
        if (serie.useTotals) {
        if(x == 0)
        serie.clear();
        point = serie.getData(record, x);
        serie.bindRecord && (point.record = record);
        } else if (serie.totalDataField) {
        serie.getData(record, data[i]);
        } else {
        point = serie.getData(record, x);
        serie.bindRecord && (point.record = record);
        data[i].push(point);
        }
        } else if (serie.type == ‘gauge’) {
        // Gauge is a dial type chart, so the data can only
        // have one value
        data[i][0] = serie.getData(record, x);
        } else if (serie.data && serie.data.length) {
        // This means the series is added within its own data
        // not from the store
        if (serie.data[x] !== undefined) {
        data[i].push(serie.data[x]);
        } else {
        data[i].push(null);
        }
        }
        }
        }

        // Update the series
        if (!this.updateAnim) {
        for( i = 0; i 0 || _this.series[i].updateNoRecord) {
        this.chart.series[i].setData(data[i], i == (seriesCount – 1));
        // true == redraw.
        }
        }

        if(_this.xField && xFieldData) {
        //this.updatexAxisData();
        this.chart.xAxis[0].setCategories(xFieldData, true);
        }
        } else {
        ….

      • Joe Kuan
        Aug 17 2014

        Sorry for the late reply. Please can you tell me what the extension doesn’t do?

        The extension should be able to work fine with store and without store. It should also work on irregular series, you just need to map the store field and series data differently. It’s in the documentation and demo.

  31. orhan tornacı
    Jul 15 2014

    Ajax.abort() crashes application due to infinite recursion. Help please

    Reply
    • Joe Kuan
      Aug 17 2014

      Sorry for the late reply. Been busy finishing a book.

      Please can you send me an example.

      Reply
  32. Jacky C.
    Aug 25 2014

    Thanks for putting this together! Is there also an ExtJS 4.x adapter so we dont have to use jQuery?

    Reply
    • Joe Kuan
      Sep 3 2014

      It is very unlikely for me to create a native ExtJs 4 adapter. I just purely don’t have the time.

      Reply
  33. Marcus
    Sep 2 2014

    Any chance you will update the extension to work with ExtJs 5 ? :)

    Reply
    • Joe Kuan
      Sep 3 2014

      Sorry, I have been busy finishing 2nd edition of my book. I just don’t have the time to maintain the extension. However, I have got it working with ExtJs 5 but I still haven’t tested with all the demos. I am aiming to release it before the end of Sept.

      Reply
  34. Jacky C.
    Sep 11 2014

    Does this support multiple axes? It seems to always tie all the series to the default yaxis even if I set multiple yaxis.

    Reply
  35. Jacky C.
    Sep 11 2014

    Disregard my question about multiple axes. It works fine =).

    Reply
  36. Kevin
    Jun 3 2015

    Hi Joe Kuan,

    Does Chart.ux.Highcharts support scrollbar?

    Reply
  37. Jul 22 2015

    Hi Joe,

    does the plugin work with multiple (but different) chart types.

    example code:

    me.type = ‘line’
    .
    .
    .
    me.store = Ext.create(‘Ext.data.Store’, {
    fields: [‘metric1’, ‘metric2’],
    data: [
    { metric1: 5, metric2: 9 },
    { metric1: 15, metric2: 19 },
    { metric1: 32, metric2: 58 },
    { metric1: 25, metric2: 29 },
    { metric1: 10, metric2: 19 }
    ]
    });
    me.series = [
    {
    type: ‘column’,
    dataIndex: ‘metric1’,
    name: ‘Column’,

    },
    {
    type: ‘line’,
    dataIndex: ‘metric2’,
    name: ‘column’,

    }
    ];

    it always uses the value of me.type or ‘line’ if me.type is not given.

    Reply
    • Joe Kuan
      Jul 23 2015

      As far as I know, the plugin works for multiple series type within a chart but you have to specify the ‘type’ explicitly within the series configuration.

      Reply

Trackbacks & Pingbacks

  1. What can I do with a Charts in ExtJS | Walking Tree

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: