Dynamically add series to a chart?

[whippersnapper]

Was there anything else you did for the code above? I'm still getting the surface of undefined error.

[blincv]

Hey,
the removing of the series works for me, but the chart.add gives me the error
(Uncaught TypeError: Object [object Object] has no method 'add')

the series object of the chart has the add-method for me, but when using this the chart doesnt draw itself correctly. ( chart.series.add(..); )

How come? Oo

[jiteshmjethwa]

Hi All,
i have tried code give by electronix but it doesnt worked for me, it was showing me error

chart.redraw is not a function

but i have fixed it by replacing chart.redraw with

chart.items.items[0].redraw();

Now its not showing any error also its not displaying graph.
Please help.

[meditecsports]

Hello.
I have found this solution: at first we delete all old series :

var removeChart = function() {

        var series = this.chart.series.items,
            surface = this.chart.surface,
            length = series.length,
            len = surface.groups.keys.length,
            array = [],
            i = 0,
            j = 0,
            t = 0;

        for(; i < length; i++) {
            array = Ext.Array.merge(array, series[i].group.keys);
        }
        this.chart.series.clear();
        for(; j < array.length; j++) {
            surface.items.getByKey(array[j]).destroy();
        }
        for(; t < len; t++) {
            surface.groups.items[t].destroy();
        }
    },

Then we simply add new series like :

chart.series.add({
            type: 'column',
            axis: 'left',
            gutter: 30,
            groupGutter: 3,
            title: ['1', '2', '3'],
            xField: ['count'],
            yField: ['name1', 'name2', 'name3']
        });

I use this code when dynamically change chart series from type: 'line' to type: 'column'.

[IlanCopelyn]

There's no add() on chart in 4.0.7. Use:

var series = [];
// Setup your series
chart.series.addAll(series);
chart.redraw();

[ulrika_l]

thank you electronix, that works fine, but I think you meant

if(surface.groups.keys[groupKey].search(seriesId) != 0)

[gcrshiye21]

[QUOTE=gcrshiye21;881714]I meet this problem too,and can't be resolve perfect so i use a container out of the chart and a store for this container so I can't calculate how many series i shold draw and when the store is load calculate it again here is the code

Code:

constructor : function(config) {
                var me=this;
                me.store=Ext.create('com.suning.portal.chart.Line.MutipleLineStore',{storeUrl:baseUrl+ 'ueTask/userExpMutipleChartView.htm'});
                me.store.addListener('load_complete',function(success,record,xField,yFields){
                    if(!success){                
                        return;    
                    }else{
                        if(typeof(record)!=undefined&&record.length!=0){
                            var chartFields=xField.concat(yFields);
                            if(typeof(me.chart)=='undefined'||!(me.preYFields.sort().toString()==yFields.sort().toString())){
                                var chartAxes=me.initAxes(xField,yFields);
                                var chartSeries=me.initSeries(xField,yFields);
                                var chartStore=Ext.create('Ext.data.Store', {
                                    fields: chartFields,
                                    data : record
                                });
                                me.chart=Ext.create('Ext.chart.Chart',{
                                    theme : 'Category3',
                                    store:chartStore,
                                    legend:true,
                                    axes:chartAxes,
                                    series:chartSeries
                                });
                                me.removeAll();
                                me.add(me.chart); 
                                me.preYFields=yFields;
                            }else{
                                if(typeof(me.chart.store)!='undefined'){
                                    me.chart.store.loadData(record);
                                }
                            }
                        }
                    }
                    
                });

[mfruizs2]

This solution is fine por Line Chart.... it hasnt got SURFACE object

any solution ?

Thx 4 all!!

[t0ad999]

Anyone have any updates on how to properly load line charts dynamically?

I have a copy of my store (below) that loads the data that is used for the line chart and builds all the new series and axes properties. Unfortuantely all my new series values are slammed to the left along the x-axis and do not populate on the appropriate y-axis value. Please let me know if you spot something with my code that'll clear this issue.

     var analyticsLineStore = Ext.create('Ext.data.Store', {
    autoLoad: false,
    autoSync: true,
    model: 'AnalyticsLine',
    proxy: {
        type: 'ajax',
        api:{ read: 'adminprocess.php?analyticsLine' },
        reader: { root: 'data' },
        afterRequest:function(request,success){

                var chart = Ext.getCmp('lineChart');
                var variables = this.reader.jsonData ;
                var chart_series = [];
                var visit = [];
                var vis = "";
                var visitorsField = [];
                var vs ="avg";
                var i = 0;    
                var j = 0;            

                visitorsField[j] = {name: 'date_range', type: 'string'}
                j = j+1;           
                visitorsField[j] = {name: 'avg', type: 'float'}     
                
                if(variables.info) {
                   chart.surface.destroy(); 
                                                               
                    for(i = 0; i <= variables.info.length-1; i++)
                    {
                        if(visit == '') {
                         vis =  'visitors_'+variables['info'][i].analytics.replace(' ','_');    
                         visit = vis;
                        } else {
                          vis = 'visitors_'+variables['info'][i].analytics.replace(' ','_');
                        }        
                        j = j +1 ;                
                         visitorsField[j] = {name: vis.replace(' ','_'), type: 'float'}    ;                                             
                           vs = vs +','+ vis.replace(' ','_');

                       }   
        
                this.model = Ext.destroy('AnalyticsLine');
                this.model = Ext.define('AnalyticsLine', {
                extend: 'Ext.data.Model',
                fields: visitorsField 
                });
                
                chart.axes.clear();
                chart.axes.add({
                        type: 'Category',
                       position: 'bottom',
                       fields: ['date_range'],
                          title: false,
                       grid: true,
                       label: {
                       font: '11px Arial',
                            renderer: function(date_range) {
                            return date_range;
                        }
                         }
                   });

                chart.axes.add({
                        type: 'Numeric',
                        minimum: 0,
                     position: 'left',
                     fields: [vs],
                     title: 'Visitors',
                        grid: true,
                           label: {
                     renderer: Ext.util.Format.numberRenderer('0,0'),
                         font: '10px Arial'
                     }
                   });              

                chart.series.clear();          
                chart.series.add({
                    axis: 'left',
                    type: 'line',                        
                    yField: 'date_range',
                    xField: [vs],                             
                    style: {
                        'stroke-width': 3
                    },
                    markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                                }
                  });

                 chart.createSurface();                                                                                   
                 chart.redraw();   
                       

                }              
                
        }
    }
});

Image of graph after above store is processed for a date range.
lineChart.jpg

[t0ad999]

I was able to solve this by creating a new chart within the store and having it renderTo the object id I wanted the chart to draw into.

example code to follow.