JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Multi-Series Spline Area Chart"
},
data: [{
type: "splineArea",
dataPoints: [
{ x: 10, y: 21 },
{ x: 20, y: 25},
{ x: 30, y: 20 },
{ x: 40, y: 25 },
{ x: 50, y: 27 },
{ x: 60, y: 28 },
{ x: 70, y: 28 },
{ x: 80, y: 24 },
{ x: 90, y: 26}
]
}, {
type: "splineArea",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35},
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44}
]
}, {
type: "splineArea",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}, {
type: "splineArea",
dataPoints: [
{ x: 10, y: 45 },
{ x: 20, y: 50},
{ x: 30, y: 40 },
{ x: 40, y: 45 },
{ x: 50, y: 95 },
{ x: 60, y: 48 },
{ x: 70, y: 43 },
{ x: 80, y: 41 },
{ x: 90, y: 28}
]
}]
});
chart = sortDataSeries(chart);
chart.render();
function sortDataSeries(chart) {
for(var i=0 ;i<chart.options.data.length; i++) {
var maxValue = 0;
for(var j=0; j<chart.options.data[i].dataPoints.length; j++) {
if(chart.options.data[i].dataPoints[j].y > maxValue) {
maxValue = chart.options.data[i].dataPoints[j].y;
}
}
chart.options.data[i].maximumValueInDataSeries = maxValue;
}
chart.options.data.sort( function(a, b) {
if(a.maximumValueInDataSeries > b.maximumValueInDataSeries) {
return -1;
} else {
return 1;
}
})
return chart;
}