chartnew.js
Version:
Simple HTML5 Charts using the canvas element
132 lines (104 loc) • 3.27 kB
HTML
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='Add-ins/shapesInChart.js'></script>
<SCRIPT>
defCanvasWidth=1200;
defCanvasHeight=600;
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [0.65,0.59,-0.90,0.81,0.56,0.55,0.40],
title : "pFirst data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [0.28,0.48,0.40,-0.19,-0.96,0.27,1.00],
title : "pSecond data"
}
]
}
var newopts1 = {
inGraphDataShow : isHighLighted,
inGraphDataFontColor : "red",
inGraphDataBorders : true,
inGraphDataBordersColor : "black",
inGraphDataBordersWidth : 1,
inGraphDataBackgroundColor : "rgba(20,220,0,0.2)",
inGraphDataPaddingX : 15,
inGraphDataPaddingY : 15,
highLight : true,
highLightSet : { markerShape : "cross", pointStrokeColor : "red", pointDotRadius : 8},
highLightFullLine : true,
datasetFill : true,
scaleLabel: "<%=value%>",
scaleFontSize : 16,
canvasBorders : true,
graphTitle : "option highLighFullLine : true",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
footNote : "Footnote for the graph",
legend : true,
yAxisLabel : "Y Axis Label",
xAxisLabel : "X Axis Label",
yAxisUnit : "Y Unit",
annotateDisplay : true,
animation : false,
barBorderRadius : 5,
dynamicDisplay : false
}
var newopts2 = {
inGraphDataShow : true,
highLight : true,
highLightSet : { fillColor : "red", inGraphDataFontColor : "black", inGraphDataFontSize : 22 },
highLightFullLine : "group",
datasetFill : true,
scaleLabel: "<%=value%>",
scaleFontSize : 16,
canvasBorders : true,
graphTitle : "option highLighFullLine : 'group'",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
footNote : "Footnote for the graph",
legend : true,
yAxisLabel : "Y Axis Label",
xAxisLabel : "X Axis Label",
yAxisUnit : "Y Unit",
annotateDisplay : true,
animation : false,
barBorderRadius : 5,
dynamicDisplay : false
}
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<!/div>
<center>
<FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
<script>
document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
if(1==1) {
var myLine = new Chart(document.getElementById("canvas_line").getContext("2d")).Line(mydata1,newopts1);
var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d")).Bar(mydata1,newopts2);
}
}
</script>
</body>
</html>