Area Chart with gradient - CanvasJS JavaScript Charts

Area Chart with gradient - 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>

JavaScript

var data = [];
var dps = [];
var yVal = 100;
var noOfDPS = 100;
yValArray = [];

for (var j = 0; j < noOfDPS; j++) {
    dps = [];
    yValArray[j] = yVal += Math.round(5 + Math.random() * (-5 - 5)); //assign y-value here

    var r = Math.floor((255 * j) / noOfDPS),
        g = Math.floor((255 * (noOfDPS - j)) / noOfDPS),
        b = 0;
    if (j > 1) {
        dps.push({
            x: j - 1,
            y: yValArray[j - 1]
        }, {
            x: j,
            y: yValArray[j]
        });
        data.push({
            type: "area",
            color: "rgb(" + r + "," + g + "," + b + ")",
            dataPoints: dps,
            markerSize: 0
        });
    }
}

var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    title: {
        text: "Area Chart with Gradient"
    },
    data: data
});

chart.render();