Filtering and rebinding series data

3 posts, 0 answers
  1. James
    James avatar
    17 posts
    Member since:
    Sep 2014

    Posted 14 Jul Link to this post

    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: => 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: => moment("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);
    // => dp.value));
    //this.chartConfiguration.series[0].data = => dp.value);
    //this.chartConfiguration.series[0].data = => 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 = => dp.value); // this.chartConfiguration.series;

    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 = => 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: => moment("MM/DD/YY")),
    3.             max: 15,
    4.             labels: {
    5.                 rotation: "auto"
    6.             }










  2. James
    James avatar
    17 posts
    Member since:
    Sep 2014

    Posted 14 Jul Link to this post

    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?

  3. Vessy
    Vessy avatar
    1350 posts

    Posted 18 Jul Link to this post

    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. 

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top