Question

So I have a chart inside a panel. The panel contains two tabs. The first tab contains the chart. The second tab contains a small form that I am using to filter the data in the chart.

My filtering form is pretty simple: it contains different time periods such as ‘7 days’, ’30 days’, etc, and once selected, it sends the user selection (using ajax) to where I am generating the data for my chart.

That’s great and all… but how do I get the chart to UPDATE?! The user can select whatever option they want (and I know that the script is getting the data and changing the query), but the chart never changes. I think I’m supposed to use redraw or refresh.

Here’s what I’m thinking: Add the redraw/refresh to my form handler here, looking something like this

        xtype: 'radiofield',
        name: 'timespan',
        id: 'radio3',
        inputValue: 30,
        boxLabel: '30 days',
        handler: function(checkbox, checked) {
           if (checked ) {
              console.log(checkbox.inputValue);
              **HERE**
            }
        }

Question: How can I update an EXTJS chart on a user action?

Answer 1

I figured it out! Here’s what I did:

Here is a handler (from above) for one of my radio buttons. If the button is checked, then I reload the store of my chart. Instead of passing hardcoded data, I made a function titled filteredData. This function uses ajax to generate the data for that chart in a particular format. I send the checked value (variable name ‘value) as a param in order to be used by the function.

handler: function(checkbox, checked) {
    if (checked ) { //refreshes the chart with new data
        var chart = this.ownerCt.ownerCt.ownerCt.getComponent('dataTab').getComponent('graph');
        var chartCmp = chart.getComponent('chartCmp'); //actual chart (used to redraw)
        var value = checkbox.inputValue; //checked value


        chart.store.loadData(filteredData(value));
        chartCmp.redraw();
    }}

Once the store is refreshed, I then redraw the chart!

store.load was a very important part that I didn’t realize I needed.

Simple enough 😉