Remove dataPoints dynamically - CanvasJS JavaScript Charts

Remove dataPoints dynamically - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div> Hide : <select id="monthToHide"></select></div>

JavaScript

var dataPoints = [
    { label: new Date(2000,0), y: 0.65 },
    { label: new Date(2000,1), y: -0.8 },
    { label: new Date(2000,2), y: -0.9 },
    { label: new Date(2000,3), y: -0.25 },
    { label: new Date(2000,4), y: -0.01 },
    { label: new Date(2000,5), y: -0.27 },
    { label: new Date(2000,6), y: 0.24 },
    { label: new Date(2000,7), y: 0.06 },
    { label: new Date(2000,8), y: 1.37 },
    { label: new Date(2000,9), y: -1.35 },
    { label: new Date(2000,10), y: -0.72 }
];
// ------------ Chart -----------------
var chart = new CanvasJS.Chart("chartContainer",{
    title: {
        text: "Dynamically Hide Month's Data"               
    },
    axisX : {
        interval : 1,
        labelFormatter : function ( e ) {
            return CanvasJS.formatDate( e.label, "MMM");  
        }
    },
    data: [{
            type: "area",
            color: "rgba(0,75,141,0.7)",
            dataPoints: dataPoints
        }]
});

function monthToHideHandler() {
    var monthToHide = parseInt(document.getElementById("monthToHide").value);
    if(monthToHide === NaN)
        monthToHide = -1;
    var newDataPoints = [];
    var index = 0;
    for(var i=0; i<dataPoints.length ; i++){
        var dp = dataPoints[i];
        var dataPointMonth = (new Date(dp.label).getMonth());
        if( dataPointMonth !== monthToHide){
            dp.x = index++;
            newDataPoints.push(dp);
        }
    }
    chart.options.data[0].dataPoints = newDataPoints;
    chart.render();
}

var monthName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function dropDownGenerator() {
    var x = document.getElementById("monthToHide");
    var opt = document.createElement("option");
    opt.setAttribute("value", "");
    var tex = document.createTextNode("None");
    opt.appendChild(tex);
    document.getElementById("monthToHide").appendChild(opt);
    for(var i=0; i< 12 ; i++){
        var opt = document.createElement("option");
       ...