CODEWITHSUNDEEP
javascriptextjsextjs4
shiro
shiro

Reputation: 255

How to use the input data to load the new extjs chart?

I loaded the input data from xml file. then user select values from the dropdown. I use the selected value to reload the chart. Every time the user re-select the option, the chart is reloaded. This is extjs 4.

how can I reload the new proxy url for the chart using the new selected value and update the chart to reflect to the new selection? Thank you

Ext.define('Column',{
            extend: 'Ext.data.Model',
            fields: [

                     'data1','Data2']
        });

var store = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data.xml',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });
var store2 = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data2.xml?selectvalue=',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });

var mychart = Ext.create('Ext.chart.Chart', {

        width: 400,
        height: 200,
        renderTo: 'ChartsDiv',
        store: store2,
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 20
        }], 
        series: [{
            type: 'gauge',
            field: 'data2',
            donut: 40,
            colorSet: ['#843525', '#ddd']
        }]
    });

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            store: store,
            displayField: 'data1',
            valueField: 'data1' ,
            width: 250,
            labelWidth: 120,
            fieldLabel: 'select a value',
            renderTo: 'simpleCombo',
            queryMode: 'local',
            typeAhead: true,
            listeners:{
            change: function(combo,records){
                var selectedValue= simpleCombo.getValue();
                Ext.Msg.alert(selectedValue);   
            }
        });

Upvotes: 0

Views: 2051

Answers (1)

Eric
Eric

Reputation: 6995

If I understand your question correctly, you want to change the URL of store2 based on changes made to your combobox?

change: function(combo, records){
    var selectedValue = combo.getValue();
    store2.proxy.url = "/data2.xml?selectvalue=" + selectedValue;

    // Load the store with a callback function to redraw the chart
    store2.load(function(records, operation, success){
        if(success){
            chart.redraw();
        }
    });
}

Upvotes: 1

Related Questions