Last active
September 20, 2017 07:17
-
-
Save dexterbrylle/2c58e99b67a1930ec0f0fab374e80186 to your computer and use it in GitHub Desktop.
Chart html sample
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html> | |
<head> | |
<script type="text/javascript"> | |
window.onload = function () { | |
var chart = new CanvasJS.Chart("chartContainer", | |
{ | |
title:{ | |
text: "Skills Matrix" | |
}, | |
animationEnabled: true, | |
legend: { | |
cursor:"pointer", | |
itemclick : function(e) { | |
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { | |
e.dataSeries.visible = false; | |
} | |
else { | |
e.dataSeries.visible = true; | |
} | |
chart.render(); | |
} | |
}, | |
axisY: { | |
title: "" | |
}, | |
toolTip: { | |
shared: true, | |
content: function(e){ | |
var str = ''; | |
var total = 0 ; | |
var str3; | |
var str2 ; | |
for (var i = 0; i < e.entries.length; i++){ | |
var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ; | |
total = e.entries[i].dataPoint.y + total; | |
str = str.concat(str1); | |
} | |
str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>"; | |
str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>"; | |
return (str2.concat(str)).concat(str3); | |
} | |
}, | |
data: [ | |
{ | |
type: "bar", | |
showInLegend: true, | |
name: "Expertise", | |
color: "gold", | |
dataPoints: [ | |
{ y: 1, label: "Javascript"}, | |
{ y: 2, label: "HTML/CSS"}, | |
{ y: 3, label: "SASS"}, | |
{ y: 4, label: "AngularJS"}, | |
{ y: 5, label: "ReactJS"}, | |
{ y: 5, label: "JSON"} | |
] | |
}, | |
{ | |
type: "bar", | |
showInLegend: true, | |
name: "Usage", | |
color: "silver", | |
dataPoints: [ | |
{ y: 1, label: "Javascript"}, | |
{ y: 2, label: "HTML/CSS"}, | |
{ y: 3, label: "SASS"}, | |
{ y: 4, label: "AngularJS"}, | |
{ y: 5, label: "ReactJS"}, | |
{ y: 5, label: "JSON"} | |
] | |
} | |
] | |
}); | |
chart.render(); | |
} | |
</script> | |
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head> | |
<body> | |
<div id="chartContainer" style="height: 300px; width: 100%;"> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment