Filtering and rebinding series data

[James]

I have a chart that uses series data (no dataSource).  I also have a dropdown that has time ranges that I use to filter the data.  

The chart is configured as the following:

    this.chartConfiguration = {
        title: "Weight Chart",
        renderAs: "canvas",
        series: [
            {
                data: dataPoints.map(dp => dp.value),
                field: "value",
                type: 'column',
                color: "#ff1c1c",
                axis: "weight",
                markers: {
                    visible: false
                }
            }
        ],
        pannable: true,
        zoomable: false,
        valueAxis: [
            {
                name: "weight",
                color: "#000000",
                title: { text: "lbs" },
                labels: {
                    format: "n"
                }
            }
        ],
        tooltip: {
            visible: true,
            format: '{0}',
            template: '${value} lbs'
        },
        categoryAxis: {
            categories: dataPoints.map(dp => moment(dp.date).format("MM/DD/YY")),
            max: 15,
            labels: {
                rotation: "auto"
            }
        }
    };

}

InitialWeightChartData.png is how the chart looks like after initial page load

When drop down is selected do filtering and other stuff with the following code:

let threeMonths = moment().subtract(90, "days");
let filtered = this.filterDataPointsByDateRange(this.allDataPoints, moment(), threeMonths);
let weightDataPoints = this.configureWeightDataPoints(filtered);
//this.chartConfiguration.dataSource.data(weightDataPoints.map(dp => dp.value));
//this.chartConfiguration.series[0].data = weightDataPoints.map(dp => dp.value);
//this.chartConfiguration.series[0].data = weightDataPoints.map(dp => dp.value);
//this.detailsChart.options.series[0] = this.configureWeightSeriesDataPoints(filtered);
this.handler(filtered, moment(), threeMonths);
this.detailsChart.options.categoryAxis = this.chartConfiguration.categoryAxis;
this.detailsChart.options.series[0].data = weightDataPoints.map(dp => dp.value); // this.chartConfiguration.series;
//this.detailsChart.dataSource.read();
this.detailsChart.refresh()

InitialWeightChartAfterFilteringDatesHaveChanged.png is how it looks after the refresh.  Notice the dates have changed by 

this.detailsChart.options.categoryAxis = this.chartConfiguration.categoryAxis;

this.detailsChart.options.series[0].data = weightDataPoints.map(dp => dp.value); seems to be the problematic line

I've also done this.detailsChart.options.series = this.chartConfiguration.series; which doesn't worker either

the line this.handler(filtered, moment(), threeMonths) actually goes through and configures the chart options again as shown in the first code block

 

the below code appears to work as can seen by the second screen shot....the dates have changed

1.categoryAxis: {
2.             categories: dataPoints.map(dp => moment(dp.date).format("MM/DD/YY")),
3.             max: 15,
4.             labels: {
5.                 rotation: "auto"
6.             }

Thanks

 

 

 

 

 

 

 

 

[James]

It looks like the key was this.detailsChart.redraw() instead of refresh().

I'm a bit confused about the differences between redraw and refresh.

Does refresh only work with DataSource?

http://stackoverflow.com/questions/21862954/what-is-different-between-refresh-method-and-redraw-method-in-kendo-ui-chart

[Vessy]

Hi James,

The refresh method reads the data from the dataSource and populates the series data based on the specified fields. in case no dataSource is specified, the series data will be cleared. Basically you should use the refresh method only when binding the data via a dataSource and you wish to update the chart with new data. The redraw method should be used when you need to redraw the chart with the current options. 

Regards,
Vessy
Telerik by Progress