Transforming / Mapping custom data to CanvasJS Data Type - CanvasJS

Transforming / Mapping custom data to CanvasJS Data Type - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var jsonArray = [{"MarkID":223,"HighestMarkID":218,"Rank":5,"Test":"Debit and Credit Principles","label":"Accounts","grades":70.0,"highest":95.0},{"MarkID":94,"HighestMarkID":91,"Rank":7,"Test":"Elements and Molecules","label":"Chemistry","grades":48.0,"highest":93.0},{"MarkID":86,"HighestMarkID":86,"Rank":1,"Test":"Ergonomical Mechanics","label":"Design Technology","grades":83.0,"highest":83.0},{"MarkID":78,"HighestMarkID":76,"Rank":4,"Test":"Binary Notation","label":"Computer Science","grades":80.0,"highest":100.0}];

function mapData(source, mapping){
    var dataPoints = [];
    var from, to;
    for(var i = 0; i < source.length; i++){
        
        var dataPoint = {};
        for(var j = 0; j < mapping.length; j++)
        {
            from = mapping[j].from;
            to = mapping[j].to;
            
            dataPoint[to] = source[i][from];
        }
        
        dataPoints.push(dataPoint);        
    }
    
    return dataPoints;
}

var gradeDPs = mapData(jsonArray, [{from:"grades", to:"y"}, {from:"label", to:"label"}]);
var highestDPs = mapData(jsonArray, [{from:"highest", to:"y"}, {from:"label", to:"label"}]);


var chart = new CanvasJS.Chart("chartContainer", {

		title : {
			text : "Recent Papers"
		},
		data : [{
				name : "Grade",
				type : "column",
                toolTipContent: "{label}<br/><span style='\"'color: {color};'\"'>{name}:</span> {y}",
				showInLegend : true,
                dataPoints: gradeDPs,
				axisY : {
					suffix : "%"
				}
			}, {
				name : "Highest",
				type : "column",
                toolTipContent: "{label}<br/><span style='\"'color: {color};'\"'>{name}:</span> {y}",
				showInLegend : true,
				dataPoints: highestDPs,
				axisY : {
					suffix : "%"
				}
			}

		]
	});
chart.render();