Skip to content

December 29, 2012

16

Highcharts extension (update) – Sencha style API & tutorial documentation

by Joe Kuan

Highcharts Extension for ExtJs  API doc


A new version of Highcharts Extension for Sencha products is out. In this release, it incorporates changes submitted by jacrasmussen to breakdown all the classes into separate files. Hence, the extension can be deployed with a selection of charts only supported in an application. Only change is needed is to add Ext.require calls for using a series type:

Ext.require("Chart.ux.Highcharts");
Ext.require("Chart.ux.Highcharts.Serie");
Ext.require("Chart.ux.Highcharts.LineSerie");
Ext.require("Chart.ux.Highcharts.PieSerie");

Secondly, the documentation is revamped with Sencha API documentation style (JsDuck) covering more configurations, properties and methods than before. These documentations can be found in either github source or the ‘Tutorial & API doc’ link group in the right column.

16 Comments Post a comment
  1. Lee
    Jan 16 2013

    Hi Joe,

    I have a question regarding line chart.
    for example I let the user choose several elements from a list which on them I want to get the result series for the graph, lets say user choose serie_1, serie_2, serie_5 then we call the server (java server) to get 10 values for each serie over time.
    My questions is how do I map the result to the model/store? If I work hardcoded than I can say that my dataIndex = value1 (serie 1), dataIndex = value2 (serie 2), dataIndex = value5 (serie 5) but user can select which ever element he wants so this is no go.
    any ideas?

    thanks,
    Lee

    Reply
  2. Joe Kuan
    Jan 16 2013

    I hope I understand your question.

    If you know in advance the number of possible series in the chart, then you can define all the possible series in the store data model and also the series configuration in the extensions.

    If not possible, the other way is to set initAnimAfterLoad to false, (this turns the initial animation off and display the empty chart without waiting for store data). Setup a separate store or use Ext.Ajax.request to get whatever specific series data back from the server and use the addSeries call provided by the extension to display the series.

    Reply
    • lee
      Jan 17 2013

      Hi,

      thanks for the quick reply, I think you understood what I meant in your answer, I just want to make sure I can only use the second option you gave, for example my line chart is number of cars sold each month by type last year – so you get 12 points on the graph for each car type.
      for example user can choose ford, BMW, toyota and he will get 3 series with 12 points each.

      how does my data suppose to be: var 1 (time), var2 ford value, var3 BMW value and var4 toyota value then I need to create 3 series and for each one the dataIndex = var2 or var 3 or var 4
      and then I get 3 series with the requested data – this works for me when It is hardcoded but when I need to return response from my java server I can’t dynamically add var2, var3 …

      or maybe this is the wrong way to work with multiple series?
      do you have and example of multiple series returned from server in extjs 4?

      again thanks for your help,

      Lee

      Reply
      • Joe Kuan
        Jan 18 2013

        The dynamic of the application and data model is how you formulate the URL parameters and return data from the server.

        For instance, you create an ExtJs Store and you can use extraParams option to send time range and the choice of car manufacturers, e.g. just thinking out loud

        U define the data model as follows. It is just a mechanism of data mapping, doesn’t matter how many ‘val’ you define up to.

        fields: [ ‘month’, ‘val1’, ‘val2’, ‘val3’, ….. To maximum number of lines you want to display in the chart ]

        extraParams: {
        brands: ‘Nissan,Toyota,BMW’,
        year: 2013
        }

        Server sides the GET/POST parameters CSV value and then returns ‘pattern matching’ JSON data

        root: [{ month: ‘Jan’, val1: 50, val2: 50, val3: 10 },
        { month: ‘Feb’, val1: 10, val2: 30, val3: 5 },
        …..
        ]

        Since you know the order and the brand, you can do something like instead relying of binding a store to the Highcharts extension

        chart.addSeries([{
        name: ‘Nissan’,
        data: [ 50, 10, …. ]
        }, {
        name: ‘Toyota’,
        data: [ 50, 30, …. ]
        }]);

        Otherwise you have to rely on knowing the possibility of all the car brands in advance for the store and bind to the chart.

        See the ‘addSeries’ online example

  3. hassan
    Jan 29 2013

    Hi Joe,
    Thank you for your great work.
    I am using your Highcharts extension for ExtJS, and I just face an issue. I am trying to create a highchart component in a tabpanel using Xtype. The issue is that when I set the ‘activeTab’ of the tabpanel to the tab where highchart component is, the latter works properly. But, when I set the ‘activeTab’ to another tab and then after click the tab where highchart component is, the chart is not created.
    I have also tried to create the chart before the tabpanel using the following way:

    var Hchart = Ext.create(“Chart.ux.Highcharts”, {…});

    and then in the tabpanel

    ar tabpanel = Ext.create(‘Ext.tab.Panel’, {
    width: 1000,
    height: 600,
    activeTab: 2,
    renderTo:’paneldom’,
    items: [{
    id:’home’,
    title: ‘Home’,
    },
    {
    title: ‘History’,
    id:’history’,
    layout: ‘border’,
    items:[{
    region:’center’,
    id:’figureId’,
    xtype:’panel’,
    autoScroll:true,
    layout:’fit’,
    items : Hchart,

    this way does not work even if I tab where the chart is.

    could you please tell me what is wrong

    Thank you for your time and consideration

    Reply
    • Joe Kuan
      Jan 30 2013

      Sorry for late reply. I am pretty busy right now. I have to look into that at the weekend.

      Thanks
      Joe

      Reply
  4. Lee
    Apr 11 2013

    Hi Joe,

    I have a chart inside a border layout in the center region and I also have an east and west regions which are collapsed panels each.
    when I expand the west panel then the center panel goes right as expected (the west panel does not cover the chart in the center region of the layout).
    but if I expand the east region panel than the center region with the chart is covered by the east(right) panel and is not pushed to the left.
    I also posted the question in the sencha forum but did not get an answer see here:
    http://www.sencha.com/forum/showthread.php?260915-East-region-in-border-layout-problem

    thank you for the help,
    Lee

    Reply
    • Lee
      Apr 11 2013

      Hi,
      I found a workaround for this for now, I listen to the expand/collapse event of the east panel and for each of them I call the draw() method of the chart which draws the chart in the correct size after east panel appears/disappears.
      If you have another solution please let me know.

      thanks,
      Lee

      Reply
  5. Lee
    Apr 28 2013

    Hi Joe,

    I am trying to put several charts together on the same panel in order to give it like a dashboard look.
    for this I am putting let’s say 3 charts inside a container with Hbox layout and another 3 charts inside another container in order to get 2 rows with 3 charts each.
    I am trying to avoid giving width and height as I want it to take all the available space.
    If I use simple Extjs panels the result is good but when I add the charts it does not work.
    it seems that the chart has its own size (if I give it a small width than it seems that it has some kind of div bigger that the actual painting rectangle and when I change the browser window size than the painting rectangle is growing to its surrounding div)
    I tried also give the each chart the flex:1 but it did not help.
    Any help will be appreciated.
    Thanks,
    Lee

    Reply
    • Joe Kuan
      May 5 2013

      Sorry for the late reply. Can you give me a sample code?

      Joe

      Reply
      • Lee
        May 9 2013

        Hi Joe,
        Sorry also for the late reply, what I did at the end was this:
        I put every chart inside Extjs panel and when the left panel expands or collapsed the panel knows to handle the panel size correctly.
        but the highcharts inside the panel does not know to fit itself to the new size of the panel so when I catch the event of expand/collapse of panel I call each char.draw() which then the chart takes all the available space.
        Is there another way to do it?
        you can see screen shuts of the 2 cases (this after chart.draw() is called)
        expand: http://i40.tinypic.com/351xq14.png
        collapse: http://i43.tinypic.com/k976nn.png

        I have another question:
        I try to add a point to a spline series so what I did is use store.add(record) and then the point appears but I sense that is not as smooth as your example spline-line shift.
        I also tried to use line shift but I see that you have to call to store load and receive the same result as last call with extra points (am I right?)

        what is the correct way of adding a new point and removing the oldest point, lets say my origin chart has 10 points so every minute I would like to add new point and delete the point in place 0?

        thanks,
        Lee

      • Joe Kuan
        May 11 2013

        You shouldn’t need to catch expand, collapse events to manually redraw the chart.

        Have a look at this online example: http://joekuan.org/demos/Highcharts_Sencha/desktop/standalone.html

        When you resize the window, it automatically resizes & redraws the chart. And the expand/collapse doesn’t lose the size of the chart.

        The Highcharts extension is designed with Sencha store, so any update in store is reflected in the chart in a single load command call. In order to have the load command combined with line shift feature, the data points along the x-axis must be same values otherwise there is no line shift effect.

        What you describe seems that you want micro management of data points. In that case, you should learn the Highcharts API and use the extension’s internal ‘chart’ property which points to the native Highcharts chart object. You may not need to bind a store to the extension, i.e. addSeries command should be sufficient if you want to have a better control over the Highcharts chart.

        Cheers
        Joe

  6. Lee
    May 13 2013

    Hi Joe,
    I am a bit confused, I am trying to create the line shift effect but I get into problems.
    I have a spline chart with 3 series, first time I load the store I get 2 points for each series.
    when I click on a button the store is loaded again and the server removes the first point (of last load) and add a new point so again I receive 2 points back (x values is the same for the first point and the second point is the new time) and the results are:

    3 series are presented correctly and so on If I click on the button this works OK.
    the problems I see are these:
    1. when I click on the legend of one series it disappears and when I click on the load button the other 2 series are drawn ok but when I click on the legend again (of the hidden serie) it seems that it is has only old points and did not get an update when the store was loaded.

    2. when I resize the browser window the chart is redraw but the X values return to the first x values of the initial chart load (I don’t see a load from the server), the Y values are kept the same as before the window resize, I wonder where the x values are kept inside the chart

    3. I define my xField: ‘time’, in the chart and not inside the series (in your example I see it inside the series) , when I put it inside the series the value for the X is the index and not the real value of time in milliseconds.

    I tried to stay as close as I can to your desktop demo where “Spline – line shift with X-axis numeric data” example but your example works good and this is why I am confused

    here is my code:

    report series is created here:

    createSeries:function(reportMembers) {
    var reportSeries = new Array();
    for(var i=0;i<reportMembers.length;i++) {
    var index = i+1;
    var dataIndex = 'val'+index;
    var serie = {
    type : 'spline',
    name : reportMembers[i].text,
    visible : true,
    dataIndex: dataIndex,

    };
    reportSeries[i] = serie;

    }

    return reportSeries;
    }

    //////////////////Chart is here

    var tempChart = Ext.create("Chart.ux.Highcharts", {
    // refreshOnChange:true,
    lineShift:true,
    type: 'spline',
    // loadMask:true,
    series:reportSeries,
    xField: 'time',
    store:testStore,
    chartConfig : {
    chart : {
    marginRight : 130,
    marginBottom : 120,
    zoomType : 'x',
    animation : {
    duration : 500,
    easing : 'swing'
    }
    },
    title : {
    text : 'Bar Chart ' ,
    x : -20 //center
    },
    subtitle : {
    text : 'Total Bandwidth',
    x : -20
    },

    xAxis : [{
    type: 'datetime',
    title : {
    text : 'Time',
    margin : 20
    },
    labels : {
    rotation : 270,
    y : 35,
    formatter : function () {
    var tempValue = Math.floor(this.value/1000);
    console.log('this.value = '+this.value +'tempValue = '+tempValue);
    var dt = Ext.Date.parse ( tempValue, "U");
    // console.log('dt = '+dt);
    if (dt) {
    return Ext.Date.format (dt, "H:i:s");
    }
    return this.value;

    }

    }
    }],

    yAxis : {
    title : {
    text : 'BW'
    }
    },
    legend: {
    layout: 'vertical',
    floating: true,
    backgroundColor: '#FFFFFF',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    x: 0
    },
    tooltip: {
    formatter : function () {
    var dt = Ext.Date.parse (parseInt (this.x) / 1000, "U");
    return 'At ‘ + this.series.name + ‘‘ + Ext.Date.format (dt, “H:i:s”) + ‘,bandwidth is : ‘ + this.y;
    }
    },
    plotOptions: {
    spline: {
    dataLabels: {
    enabled: false
    },
    enableMouseTracking: true
    },

    area: {
    stacking: ‘normal’,
    lineColor: ‘#666666’,
    lineWidth: 1,
    marker: {
    lineWidth: 1,
    lineColor: ‘#666666’
    }
    }

    },

    navigation: {
    buttonOptions: {
    enabled: true
    }
    }

    }
    });

    ///////////////////////Store data is here/////////////////////////////////////////////

    “result”: [
    {
    “time”: “1368448629443”,
    “val1”: 181,
    “val2”: 153,
    “val3”: 300
    },
    {
    “time”: “1368448632734”,
    “val1”: 300,
    “val2”: 19,
    “val3”: 212
    }

    thank you for the help,
    Lee

    Reply
    • Lee
      May 13 2013

      Another thing I see that might help is that after the store is loaded the xAxis has a new property categories with the 2 x values of the series (categories: Array[2], 0: 1327604270000,1: 1327607870000 for example)
      the categories is not defined when the chart is created before load. I guess this may cause problems.
      I saw in your demo during debug that categories does not exists in xAxis.
      thanks for the help,
      Lee

      Reply
  7. Jan 21 2014

    Hello, I have a question regarding data loading and chart animation. I want to know if it is possible to show an animated gif or “loading…” message of some sort when I do load() on the chart’s store. The reason for this is because I have no feedback from the chart when the data is being loaded, and if the request takes a lot of time, the user might think there is something wrong, so a loading message in the chart would be helpfull.
    Thanks in advance

    Reply
    • Joe Kuan
      Jan 22 2014

      Hi,

      There are two ways you can do it. In the extension, you can use the options,

      loadMask: true,
      loadMaskMsg: ‘Loading …. ‘,

      to enable & configure the load mask. It’s documented in the API manual. There is a load mask test on my Highcharts Sencha demo site, http://joekuan.org/demos/Highcharts_Sencha/desktop/, just go to Other Tests -> Test loadmask.

      If you want a full control of loadmask yourself, you can access the ‘chart’ field which is the Highcharts object itself and Highcharts supports loadmask through showLoading and hideLoading.

      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: