chartnew.js
Version:
Simple HTML5 Charts using the canvas element
147 lines (127 loc) • 4.32 kB
HTML
<SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/stats.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<SCRIPT>
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : ["2014","2015","2016"],
datasets : [
{
data : [30,15,14],
fillColor : "#D97041",
title : "data1"
},
{
data : [90,,25],
fillColor : "#C7604C",
title : "data2"
},
{
data : [24,10],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [,82,17],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [,8,],
fillColor : "#584A5E",
title : "data6"
}
] ,
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : "Total: #SUM#\n#variable_mydata1.labels[0]# : #variable_mydata1.stats.data_sum[0]#\n#variable_mydata1.labels[1]# : #variable_mydata1.stats.data_sum[1]#\n#variable_mydata1.labels[2]# : #variable_mydata1.stats.data_sum[2]#",
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 25
}
]
};
var varcrosstxt = {
canvasBordersWidth : 3,
canvasBordersColor : "black",
// crossText : ["Total:\n#sum#"],
// crossTextIter: ["all"],
// crossTextOverlay : [true],
// crossTextFontSize : [50],
// crossTextFontColor : ["black"],
// crossTextRelativePosX : [2],
// crossTextRelativePosY : [2],
// crossTextAlign : ["center"],
// crossTextBaseline : ["middle"],
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
//
inGraphDataShow : true,
legend : true,
canvasBorders : true,
graphTitle : "Sample - Sum of the data in the middle",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
footNoteFontSize : 15,
footNote : "Mean Value : <%=roundToNumber(#MEAN#,-2)%> (<%=#variable_mydata1.labels[0]#%> : <%=roundToNumber(#variable_data.stats.data_mean[0]#,-2)%> ; <%=#variable_mydata1.labels[1]#%> : <%=roundToNumber(#variable_data.stats.data_mean[1]#,-2)%> ; <%=#variable_mydata1.labels[2]#%> : <%=roundToNumber(#variable_data.stats.data_mean[2]#,-2)%>) - Standard Deviation : <%=roundToNumber(#standard_deviation#,-2)%> (<%=#variable_mydata1.labels[0]#%> : <%=roundToNumber(#variable_data.stats.data_standard_deviation[0]#,-2)%> ; <%=#variable_mydata1.labels[1]#%> : <%=roundToNumber(#variable_data.stats.data_standard_deviation[1]#,-2)%> ; <%=#variable_mydata1.labels[2]#%> : <%=roundToNumber(#variable_data.stats.data_standard_deviation[2]#,-2)%>)"
}
function roundToNumber(num, place) {
var newval=1*num;
if(typeof(newval)=="number"){
if(place<=0){
var roundVal=-place;
newval= +(Math.round(newval + "e+" + roundVal) + "e-" + roundVal);
}
else {
var roundVal=place;
var divval= "1e+"+roundVal;
newval= +(Math.round(newval/divval))*divval;
}
}
return(newval);
} ;
function roundToNumber(num, place) {
var newval=1*num;
if(typeof(newval)=="number"){
if(place<=0){
var roundVal=-place;
newval= +(Math.round(newval + "e+" + roundVal) + "e-" + roundVal);
}
else {
var roundVal=place;
var divval= "1e+"+roundVal;
newval= +(Math.round(newval/divval))*divval;
}
}
return(newval);
} ;
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<script>
stats(mydata1,varcrosstxt);
document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myBar = new Chart(document.getElementById("canvas_pie").getContext("2d")).Doughnut(mydata1,varcrosstxt);
}
</script>
</body>
</html>