dataItem returning undefined after refreshing or redrawing chart (custom tooltip)

2 posts, 0 answers
  1. John
    John avatar
    1 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    We are trying to set specific date returns and reload the charts. Everything is working except that when the we call the chart.refresh or chart.redraw functions, the dataItem specified in the tooltip template is returning undefined. Would appreciate any help.

    function updateDateRange(timelabel) {
      var prevDateRange = timelabel.text();

      var dateRange = new Date();

      switch (prevDateRange) {
        case "7 days":
          timelabel.text("30 days");
          dateRange.setDate(dateRange.getDate() - 30);
          break;
        case "30 days":
          timelabel.text("60 days");
          dateRange.setDate(dateRange.getDate() - 60);
          break;
        case "60 days":
          timelabel.text("90 days");
          dateRange.setDate(dateRange.getDate() - 90);
          break;
        case "90 days":
          timelabel.text("7 days");
          dateRange.setDate(dateRange.getDate() - 7);
          break;
      }

      var chart = timelabel.siblings(".widgetchart").data("kendoChart");

      chart.options.categoryAxis.min = dateRange;
      /* Note: For some reason, if the min value of the categoryAxis is set to a low enough  value (in my tests, less than 10 days from the current date), it rewrites the dataItem value in the tooltip template, causing it to throw a few undefined where dataItem properties are being accessed. Modifying other properties of the kendoChart data object does not cause it to break. */
      chart.redraw();
    }

    $("#" + id).kendoChart({
    theme: "metroblack",
    //autoBind: false,
    dataSource: {
    transport: {
    read: {
    url: url,
    dataType: jsontype
    }
    },

    schema: {
    data: function(response) {
    var data = response.data;

    //remapping of data to match format
    for (var i=0; i < data.length; i++) {
    var item = data[i];
    item.date = item.date;
    item.value = item.engagement;
    item.retweets = item.retweet_count;
    item.replies = item.reply_count;
    item.display = item.group_name;
    }

    return data;
    },
    model: {
    fields: {
    date: {
    type: "date",
    }
    }
    }
    }
    },
    chartArea: {
    opacity: 0
    },
    legend: {
    position: "custom",
    offsetX: $("#" + id).fromRight(100),
    offsetY: 20,
    },
    series: [{
    type: "line",
    field: "value",
    markers: {
    border: {
    width: 0
    },
    visible: true,
    },
    width: 2,
    missingValues: "interpolate"
    }],
    dataBound: fillPoints,
    categoryAxis: {
    min: new Date().setDate(new Date().getDate() - 7),
    baseUnitStep: "auto",
    field: "date",
    },
    valueAxis: {
    labels: {
    format: "N0",
    },
    },
    tooltip: {
    visible: true,
    // This item works the first time but every refresh, the dataItem is "undefined"
    template: "<div style='text-align:center'>Retweets: #= dataItem.retweets #<br>Engagement: #= value.addCommas() #<br>#= category.toString('M/d') #</div>"
    },
    });
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 25 Apr 2013 Link to this post

    Hi John,

    Could you please send me a running sample project(or an jsbin/jsfiddle) reproducing this issue? Thus I will give all my best to find a quick solution of your requirements.

    All the best,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top