chartnew.js
Version:
Simple HTML5 Charts using the canvas element
878 lines (826 loc) • 22.3 kB
HTML
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--[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 mydata2 = {
labels : [""],
datasets : [
{
data : [30],
fillColor : "#D97041",
title : "data1"
},
{
data : [90],
fillColor : "#C7604C",
title : "data2"
},
{
data : [24],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [82],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [8],
fillColor : "#584A5E",
title : "data6"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "up left",
x1 : 0,
y1 : 0,
textAlign : "left",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "up center",
x1 : -2,
y1 : 0,
textAlign : "center",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "up right",
x1 : 4,
y1 : 0,
textAlign : "right",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "mid left",
x1 : 0,
y1 : -2,
textAlign : "left",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "mid center",
x1 : -2,
y1 : -2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "mid right",
x1 : 4,
y1 : -2,
textAlign : "right",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "down left",
x1 : 0,
y1 : 4,
textAlign : "left",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "down center",
x1 : -2,
y1 : 4,
textAlign : "center",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
iter : "last",
text : "down right",
x1 : 4,
y1 : 4,
textAlign : "right",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
//
{
position : "RELATIVE",
shape : "TEXT",
text : "up left",
x1 : 1,
y1 : 1,
textAlign : "left",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "up center",
x1 : 2,
y1 : 1,
textAlign : "center",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "up right",
x1 : 3,
y1 : 1,
textAlign : "right",
textBaseline : "top",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "mid left",
x1 : 1,
y1 : 2,
textAlign : "left",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "mid center",
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "mid right",
x1 : 3,
y1 : 2,
textAlign : "right",
textBaseline : "middle",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "down left",
x1 : 1,
y1 : 3,
textAlign : "left",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "down center",
x1 : 2,
y1 : 3,
textAlign : "center",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
},
{
position : "RELATIVE",
shape : "TEXT",
text : "down right",
x1 : 3,
y1 : 3,
textAlign : "right",
textBaseline : "bottom",
fontColor : "black",
fontStyle : "italic",
fontSize : 20,
fontFamily : "'Arial'"
}
]
};
var mydata3 = {
labels : [""],
datasets : [
{
data : [70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : dispPct,
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 50
}
]
};
var mydata4 = {
labels : [""],
datasets : [
{
data : [70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [30],
fillColor : "rgba(220,220,220,1)",
title : "data1"
}
],
shapesInChart : [
{
position : "RELATIVE",
shape : "TEXT",
text : dispPct2,
x1 : 2,
y1 : 2,
textAlign : "center",
textBaseline : "middle",
fontColor : "black",
fontSize : 50
}
]
};
var mydatan1 = {
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 : [-65,-59,-90,-81,-56,-55,-40],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [-28,-48,-40,-19,-96,-27,-100],
title : "Second data"
}
]
}
var mydatan1b = {
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 : [-565,-559,-590,-581,-556,-555,-540],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [-528,-548,-540,-519,-596,-527,-580],
title : "Second data"
}
]
}
var mydatam1 = {
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 : [65,-59,90,-81,-56,55,40],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [-28,-48,40,19,-96,27,-80],
title : "Second data"
}
]
}
var mydata1b = {
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 : [565,559,590,581,556,555,540],
title : "First data"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [528,548,540,519,596,527,580],
title : "Second data"
}
]
}
var mydatan2 = {
labels : [""],
datasets : [
{
data : [-30],
fillColor : "#D97041",
title : "data1"
},
{
data : [-90],
fillColor : "#C7604C",
title : "data2"
},
{
data : [-24],
fillColor : "#21323D",
title : "data3"
},
{
data : [-58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [-82],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [-8],
fillColor : "#584A5E",
title : "data6"
}
]
};
var mydatan3 = {
labels : [""],
datasets : [
{
data : [-70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
}
]
};
var mydatan4 = {
labels : [""],
datasets : [
{
data : [-70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [-30],
fillColor: "rgba(220,220,220,1)",
title : "data2"
}
]
};
var mydatam2 = {
labels : [""],
datasets : [
{
data : [-30],
fillColor : "#D97041",
title : "data1"
},
{
data : [90],
fillColor : "#C7604C",
title : "data2"
},
{
data : [-24],
fillColor : "#21323D",
title : "data3"
},
{
data : [58],
fillColor : "#9D9B7F",
title : "data4"
},
{
data : [-82],
fillColor : "#7D4F6D",
title : "data5"
},
{
data : [-8],
fillColor : "#584A5E",
title : "data6"
}
]
};
var mydatam3 = {
labels : [""],
datasets : [
{
data : [-70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
}
]
};
var mydatam4 = {
labels : [""],
datasets : [
{
data : [-70],
fillColor : "rgba(151,187,205,1)",
title : "data1"
},
{
data : [30],
fillColor: "rgba(220,220,220,1)",
title : "data2"
}
]
};
var newopts = {
dispShapesInChart : false,
inGraphDataShow : true,
datasetFill : true,
scaleLabel: "<%=value%>",
scaleTickSizeRight : 5,
scaleTickSizeLeft : 5,
scaleTickSizeBottom : 5,
scaleTickSizeTop : 5,
scaleFontSize : 16,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Graph Title",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
graphSubTitle : "Graph Sub Title",
graphSubTitleFontFamily : "'Arial'",
graphSubTitleFontSize : 18,
graphSubTitleFontStyle : "normal",
graphSubTitleFontColor : "#666",
footNote : "Footnote for the graph",
footNoteFontFamily : "'Arial'",
footNoteFontSize : 8,
footNoteFontStyle : "bold",
footNoteFontColor : "#666",
legend : true,
legendFontFamily : "'Arial'",
legendFontSize : 12,
legendFontStyle : "normal",
legendFontColor : "#666",
legendBlockSize : 15,
legendBorders : true,
legendBordersWidth : 1,
legendBordersColors : "#666",
yAxisLeft : true,
yAxisRight : false,
xAxisBottom : true,
xAxisTop : false,
yAxisLabel : "Y Axis Label",
yAxisFontFamily : "'Arial'",
yAxisFontSize : 16,
yAxisFontStyle : "normal",
yAxisFontColor : "#666",
xAxisLabel : "pX Axis Label",
xAxisFontFamily : "'Arial'",
xAxisFontSize : 16,
xAxisFontStyle : "normal",
xAxisFontColor : "#666",
yAxisUnit : "Y Unit",
yAxisUnitFontFamily : "'Arial'",
yAxisUnitFontSize : 8,
yAxisUnitFontStyle : "normal",
yAxisUnitFontColor : "#666",
annotateDisplay : true,
spaceTop : 0,
spaceBottom : 0,
spaceLeft : 0,
spaceRight : 0,
logarithmic: false,
rotateLabels : "smart",
xAxisSpaceOver : 0,
xAxisSpaceUnder : 0,
xAxisLabelSpaceAfter : 0,
xAxisLabelSpaceBefore : 0,
legendBordersSpaceBefore : 0,
legendBordersSpaceAfter : 0,
footNoteSpaceBefore : 0,
footNoteSpaceAfter : 0,
startAngle : 0,
dynamicDisplay : true,
dynamicDisplayYPartOfChart : 1,
dynamicDisplayXPartOfChart : 0
}
var crosstxt1 = {
// crossText : ["Up left","up center","up right","mid left","mid center","mid right","down left","down center","down right"],
// crossTextRelativePosX : [0,-2,4,0,-2,4,0,-2,4],
// crossTextRelativePosY : [0,0,0,-2,-2,-2,4,4,4],
// crossTextBaseline: ["default"],
// crossTextAlign : ["default"],
// crossTextPosX : [0,0,0,0,0,0,0,0,0],
// crossTextPosY : [0,0,0,0,0,0,0,0,0],
// crossTextAngle : [0],
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
dispShapesInChart : [0,1,2,3,4,5,6,7,8],
//
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
dynamicDisplay : true,
dynamicDisplayYPartOfChart : 1,
dynamicDisplayXPartOfChart : 0
}
var crosstxt2 = {
// crossText : ["Up left","up center","up right","mid left","mid center","mid right","down left","down center","down right"],
// crossTextOverlay : [true],
// crossTextFontFamily : ["'Arial'"],
// crossTextFontSize : [20],
// crossTextFontColor : ["black"],
// crossTextFontStyle : ["italic"],
// crossTextRelativePosX : [1,2,3,1,2,3,1,2,3],
// crossTextRelativePosY : [1,1,1,2,2,2,3,3,3],
// crossTextBaseline: ["default"],
// crossTextAlign : ["default"],
// crossTextPosX : [0,0,0,0,0,0,0,0,0],
// crossTextPosY : [0,0,0,0,0,0,0,0,0],
// crossTextAngle : [0],
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
dispShapesInChart : [9,10,11,12,13,14,15,16,17],
//
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
footNote : " " ,
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
dynamicDisplay : true,
dynamicDisplayYPartOfChart : 1,
dynamicDisplayXPartOfChart : 0
}
function dispPct(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data,animPC){
// alert("INIT");
return(Math.round(100*animPC));
}
var crosstxt3 = {
animationEasing : "linear",
// crossText : ["%call function..."],
// crossTextOverlay : [true],
// crossTextFontSize : [50],
// crossTextFontColor : ["black"],
// crossTextRelativePosX : [2],
// crossTextRelativePosY : [2],
// crossTextFunction : dispPct,
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
//
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
startAngle : 180,
dynamicDisplay : true,
dynamicDisplayYPartOfChart : 1,
dynamicDisplayXPartOfChart : 0
}
function dispPct2(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data,animPC){
// alert("INIT");
return(Math.round(animPC*data.datasets[0].data[0]));
}
var crosstxt4 = {
animationEasing : "linear",
// crossText : ["%call function..."],
// crossTextOverlay : [true],
// crossTextFontSize : [50],
// crossTextFontColor : ["black"],
// crossTextRelativePosX : [2],
// crossTextRelativePosY : [2],
// crossTextFunction : dispPct2,
// USE NEW MODULE shapesInChart.js
endDrawDataFunction: drawShapes,
//
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "Draw text through the graph",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
spaceTop : 30,
spaceBottom : 30,
spaceLeft : 30,
spaceRight : 30,
startAngle : 180,
dynamicDisplay : true,
dynamicDisplayYPartOfChart : 1,
dynamicDisplayXPartOfChart : 0
}
</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("debut Radar");
document.write("<canvas id=\"canvas_radar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Line");
document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Bar");
document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut StackedBar");
document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Horizontal Bar");
document.write("<canvas id=\"canvas_horizontalbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut HorizontalStackedBar");
document.write("<canvas id=\"canvas_horizontalstackedbar\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut PolarArea");
document.write("<canvas id=\"canvas_polararea\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Pie");
document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Doughnut");
document.write("<canvas id=\"canvas_doughnut\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Doughnut 2");
document.write("<canvas id=\"canvas_doughnut2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Doughnut 3");
document.write("<canvas id=\"canvas_doughnut3\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Pie with Text 1");
document.write("<canvas id=\"canvas_pie_with_text_1\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("debut Pie with text 2");
document.write("<canvas id=\"canvas_pie_with_text_2\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
document.write("Fin");
window.onload = function() {
// var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar").getContext("2d")).HorizontalStackedBar(mydata1,newopts);
// var myLine = new Chart(document.getElementById("canvas_pie_with_text_2").getContext("2d")).Pie(mydata2,crosstxt2);
if(1==1) {
var myLine = new Chart(document.getElementById("canvas_line").getContext("2d")).Line(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d")).Bar(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_stackedbar").getContext("2d")).StackedBar(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_horizontalbar").getContext("2d")).HorizontalBar(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar").getContext("2d")).HorizontalStackedBar(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_radar").getContext("2d")).Radar(mydata1,newopts);
var myLine = new Chart(document.getElementById("canvas_polararea").getContext("2d")).PolarArea(mydata2,newopts);
var myLine = new Chart(document.getElementById("canvas_pie").getContext("2d")).Pie(mydata2,newopts);
var myLine = new Chart(document.getElementById("canvas_doughnut").getContext("2d")).Doughnut(mydata2,newopts);
var myLine = new Chart(document.getElementById("canvas_doughnut2").getContext("2d")).Doughnut(mydata3,crosstxt3);
var myLine = new Chart(document.getElementById("canvas_doughnut3").getContext("2d")).Doughnut(mydata4,crosstxt4);
var myLine = new Chart(document.getElementById("canvas_pie_with_text_1").getContext("2d")).Pie(mydata2,crosstxt1);
var myLine = new Chart(document.getElementById("canvas_pie_with_text_2").getContext("2d")).Pie(mydata2,crosstxt2);
}
}
</script>
</body>
</html>