0

As a default, chart shows data for 2001-2002 ; I would like to know when user hover the mouse on the chart it will show data for 2002-2003. Once mouser is out of the chart then it should go back to default stage.

//The first data comes from 2001-2002
var seriesData = [{
    year: "2000",
    sold: 100,
    produced: 200
}, {
    year: "2001",
    sold: 250,
    produced: 280
}];

// The second dataset comes from 2002-2003
var seriesData2 = [{
    year: "2002",
    sold: 140,
    produced: 240
}, {
    year: "2004",
    sold: 350,
    produced: 380
}];

function createChart() {
    $("#chart").kendoChart({
    dataSource: {
        data: seriesData
    },
    series: [{
        name: "Sold",
        field: "sold"
    }, {
        name: "Producted",
        field: "produced"
    }],
    categoryAxis: {
        field: "year"
    },
  });
}

$(document)
    .ready(createChart);

Here is the jsfiddle: https://jsfiddle.net/epvg86qu/1/

casillas
  • 16,351
  • 19
  • 115
  • 215

1 Answers1

4

Wrap your chart inside a container e.g div, then put a mouseover and out event on that div. Then change the datasource of chart

<div id="chart-container">
//your chart here
</div>

<script type="text/javascript">
var isHover = false;
$("#chart-container").hover(
function () {
    if (!isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.dataSource.data(seriesData2);
        isHover = true;
    }
}, function () {
    if (isHover) {
        var chart = $("#chart").data().kendoChart;
        chart.dataSource.data(seriesData);
        isHover = false;
    }
});
</script>
Dion Dirza
  • 2,575
  • 2
  • 17
  • 21
  • thanks @Dion Dirza. here is the jsfiddle demo http://jsfiddle.net/epvg86qu/3/ sometimes it is responsive, sometimes it is not. By the way, is there way to update chart when mouse only on the histogram bar. – casillas May 11 '15 at 14:59
  • 1
    the code just updated for a better response. about your last question, I leave it up to your research.. what have you tried? – Dion Dirza May 11 '15 at 15:20
  • Thanks a lot again bro ;) If you dont mind, could u please check the following question which is related to this question http://stackoverflow.com/questions/30172175/event-does-not-fired-up-in-kendo – casillas May 11 '15 at 15:51