How to make spline chart datapoints blinking?

I have created a Spline chart. I would like to make the datapoints on the chart blinking?? Can anyone suggest me how I can do that? I am using a sample chart from canvasjs.

My code is:

<!DOCTYPE HTML>
<html>

<head>
  <script type="text/javascript">
    window.onload = function() {
      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "sample"
        },
        animationEnabled: true,
        axisY: {
          titleFontFamily: "arial",
          titleFontSize: 12,
          includeZero: false
        },
        toolTip: {
          shared: true
        },
        data: [{
          type: "spline",
          name: "test1",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 44
          }, {
            label: "def",
            y: 37
          }, {
            label: "ghi",
            y: 34
          }, {
            label: "jkl",
            y: 36
          }, {
            label: "mno",
            y: 46
          }]
        }, {
          type: "spline",
          name: "test2",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 16
          }, {
            label: "def",
            y: 28
          }, {
            label: "ghi",
            y: 32
          }, {
            label: "jkl",
            y: 51
          }, {
            label: "mno",
            y: 38
          }]
        }, {
          type: "spline",
          name: "test3",
          showInLegend: true,
          dataPoints: [{
            label: "abc",
            y: 1
          }, {
            label: "def",
            y: 11
          }, {
            label: "ghi",
            y: 9
          }, {
            label: "jkl",
            y: 19
          }, {
            label: "mno",
            y: 29
          }]
        }]
      });

      chart.render();
    }
  </script>
  <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>

<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

</html>

please suggest me how to blink the datapoints on the chart on mouse hover.. or please suggest me any other chart designer where this feature works..

Solution

Ranjith,

You can do it using mouse events, markerColor and setInterval as shown in the jsfiddle.

var chart = new CanvasJS.Chart("chartContainer", {
    title : {
        text : "sample"
    },
    animationEnabled : true,
    axisY : {
        titleFontFamily : "arial",
        titleFontSize : 12,
        includeZero : false
    },
    toolTip : {
        shared : true
    },
    data : [{
            type : "spline",
            name : "test1",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 44}, 
                {label : "def",y : 37}, 
                {label : "ghi",y : 34}, 
                {label : "jkl",y : 36}, 
                {label : "mno",y : 46}              
            ]
        }, {
            type : "spline",
            name : "test2",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 16}, 
                {label : "def",y : 28}, 
                {label : "ghi",y : 32}, 
                {label : "jkl",y : 51}, 
                {label : "mno",y : 38}

            ]
        }, {
            type : "spline",
            name : "test3",
            mouseover: blink,
            mouseout: stop,
            showInLegend : true,
            dataPoints : [
                {label : "abc",y : 1}, 
                {label : "def",y : 11}, 
                {label : "ghi",y : 9}, 
                {label : "jkl",y : 19}, 
                {label : "mno",y : 29}

            ]
        }
    ]
});

var blinkId = null;

function blink(e){
    var dataSeries = e.dataSeries;

    dataSeries.markerColor = "red";
    chart.render();

    blinkId = setInterval(function(){
        if( dataSeries.markerColor === "red"){
            delete dataSeries.markerColor;
        }else
            dataSeries.markerColor = "red";

        chart.render();
    },500);
}

function stop(e){
    clearInterval(blinkId);

    delete e.dataSeries.markerColor;
    chart.render();
}

chart.render();