chartnew.js
Version:
Simple HTML5 Charts using the canvas element
145 lines (102 loc) • 8.42 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<!--[if lte IE 8]><SCRIPT src='../source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<SCRIPT src='../Add-ins/format.js'></script>
<SCRIPT src='../Add-ins/stats.js'></script>
<SCRIPT src='../Add-ins/specialInChartData.js'></script>
<SCRIPT src='../Add-ins/gradientColor.js'></script>
<SCRIPT src='../Add-ins/hatch.js'></script>
<SCRIPT>
function onCompletionChart(){
// setTimeout(function(){ dispChart(); }, (lstchart[i][5]) ? lstchart[i][5] : 1000);
setTimeout(function(){ dispChart(); }, 3000);
};
</SCRIPT>
<SCRIPT src='demo.js'></script>
<SCRIPT>
dispgraph=-1;
//dispgraph=25;
var lstchart = [];
lstchart[lstchart.length]=[0,"Line","mydata1","opts_mydata1",'{ graphTitle:"Line Chart with simple animation"}'];
lstchart[lstchart.length]=[0,"Line","mydata1","opts_mydata1",'{ graphTitle:"Line Chart with animation left to right" , animationSteps: 200, animationEasing: "linear", animationLeftToRight : true}',6000];
lstchart[lstchart.length]=[0,"Line","gauss_data","opts_gauss_data",'{ graphTitle:"Gauss Function - (0,1)" }',8000];
lstchart[lstchart.length]=[0,"Line","sinus_data","opts_sinus_data",'{ graphTitle:"Sinus Function" }',4000];
lstchart[lstchart.length]=[0,"Line","linktype1_data","opts_linktype1_data",'{ graphTitle:"Line Chart with linkType=1" }'];
lstchart[lstchart.length]=[0,"Line","linktype2_data","opts_linktype2_data",'{ graphTitle:"Line Chart with linkType=2" }',8000];
lstchart[lstchart.length]=[0,"Line","regr_plot","opts_regr_plot",'{ graphTitle : "Regression line"}',8000];
lstchart[lstchart.length]=[0,"Line","lines_with_shapes","opts_lines_with_shapes",'{ graphTitle : "Charts with shapes inside"}'];
lstchart[lstchart.length]=[0,"Line","mydata1_gradient_background","opts_mydata1_gradient_background",'{ graphTitle:"Lines with gradient background color" }',6000];
lstchart[lstchart.length]=[0,"Line","hatch_data","opts_hatch_data",'{ graphTitle:"Lines with hatching lines between the lines" }',6000];
lstchart[lstchart.length]=[0,"Bar","mydata1","opts_mydata1",'{ graphTitle:"Bar Chart with simple animation"}'];
lstchart[lstchart.length]=[0,"Bar","mydata1","opts_mydata1",'{ graphTitle:"Bar Chart with animation left to right", animationSteps: 200, animationEasing: "linear", animationLeftToRight : true}',6000];
lstchart[lstchart.length]=[0,"Bar","bars_and_lines","opts_bars_and_lines",'{ graphTitle:"Bars and lines in the same chart"}'];
lstchart[lstchart.length]=[0,"StackedBar","mydata1","opts_mydata1",'{ graphTitle:"Stacked Bar Chart with simple animation"}'];
lstchart[lstchart.length]=[0,"StackedBar","mydata1","opts_mydata1",'{ graphTitle:"Stacked Bar Chart with animation left to right", animationSteps: 200, animationEasing: "linear", animationLeftToRight : true}',6000];
lstchart[lstchart.length]=[0,"StackedBar","stackedBars_with_line","opts_stackedBars_with_line",'{ graphTitle:"Stacked Bars with a line"}'];
lstchart[lstchart.length]=[0,"HorizontalBar","mydata1","opts_mydata1_horizontal",'{ graphTitle:"Horizontal Bar Chart with simple animation"}'];
lstchart[lstchart.length]=[0,"HorizontalBar","mydata1","opts_mydata1_horizontal",'{ graphTitle:"Horizontal Bar Chart with animation bottom to top", animationSteps: 200, animationEasing: "linear", animationLeftToRight : true}',6000];
lstchart[lstchart.length]=[0,"HorizontalStackedBar","mydata1","opts_mydata1_horizontal",'{ graphTitle:"Horizontal Stacked Bar Chart with simple animation"}'];
lstchart[lstchart.length]=[0,"HorizontalStackedBar","mydata1","opts_mydata1_horizontal",'{ graphTitle:"Horizontal Stacked Bar Chart with animation bottom to top", animationSteps: 200, animationEasing: "linear", animationLeftToRight : true}',6000];
lstchart[lstchart.length]=[0,"Doughnut","doughnut_text_in_center","opts_doughnut_text_in_center",'{ animation : true, graphTitle : "Doughnut with evolutieve text" }'];
lstchart[lstchart.length]=[0,"Doughnut","mydata2","opts_mydata2",'{ graphTitle : "Doughnut", inGraphDataFontSize : 20, inGraphDataShow : true }'];
lstchart[lstchart.length]=[0,"Doughnut","mydata2","opts_mydata2",'{ graphTitle : "Doughnut special animation", animateRotate : false, animateScale : true, inGraphDataFontSize : 20, inGraphDataShow : true }'];
lstchart[lstchart.length]=[0,"Pie","mydata2","opts_mydata2",'{ graphTitle : "Pie Chart with special InGraphData", endDrawDataFunction: drawShapes }'];
lstchart[lstchart.length]=[0,"Pie","mydata2","opts_mydata2",'{ graphTitle : "Half Pie chart", startAngle: -180, totalAmplitude : 180, inGraphDataFontSize : 20, inGraphDataShow : true }'];
lstchart[lstchart.length]=[0,"Pie","mydata2_gradient","opts_mydata2_gradient",'{ graphTitle : "Pie chart with gradient color (author : Omar Sedki)" }'];
lstchart[lstchart.length]=[0,"PolarArea","mydata2","opts_mydata2",'{ graphTitle : "PolarArea with special inGraphData", startAngle: 0, spaceBottom: 40, inGraphDataRotate : "inRadiusAxisRotateLabels", graphMin : 0, inGraphDataFontSize : 20, inGraphDataShow : true }'];
lstchart[lstchart.length]=[0,"PolarArea","mydata2","opts_mydata2",'{ graphTitle : "PolarArea", graphMin : 0, inGraphDataFontSize : 20, inGraphDataShow : true }'];
lstchart[lstchart.length]=[0,"Radar","mydata1P","opts_mydata1P",'{ graphTitle:"Radar Chart with simple animation", graphMin : 0}'];
lstchart[lstchart.length]=[0,"Radar","mydata1P","opts_mydata1P",'{ graphTitle:"Radar Chart with special animation", animationSteps : 200, graphMin : 0, animationByDataset : true}',6000];
//lstchart.length=5;
</SCRIPT>
<title></title>
</head>
<body>
<center>
<script>
defCanvasWidth=1100;
defCanvasHeight=500;
document.write("<BR><canvas id=\"canvas\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
var nbRemainDisplay=0;
function dispChart() {
var i,j;
var random=true;
if(dispgraph==-1) {
if(nbRemainDisplay==0) {
nbRemainDisplay=lstchart.length;
for(i=0;i<lstchart.length;i++)lstchart[i][0]=1;
};
if(random) var curChart=Math.floor(Math.random() * nbRemainDisplay)+1;
else var curChart=1;
nbRemainDisplay=nbRemainDisplay-1;
j=0;for(i=0;j<curChart;i++){if(lstchart[i][0]==1)j=j+1;} i=i-1;lstchart[i][0]=0;
} else i=dispgraph;
document.getElementById("canvas").getContext("2d").canvas.height=defCanvasHeight;
document.getElementById("canvas").getContext("2d").canvas.width=defCanvasWidth;
document.getElementById("canvas").getContext("2d").firstPass=undefined;
document.getElementById("canvas").getContext("2d").runanimationcompletefunction=true;
document.getElementById("canvas").getContext("2d").tpchart=undefined;
document.getElementById("canvas").getContext("2d").initialWidth=undefined;
document.getElementById("canvas").getContext("2d").chartTextScale=undefined;
document.getElementById("canvas").getContext("2d").chartLineScale=undefined;
document.getElementById("canvas").getContext("2d").chartSpaceScale=undefined;
document.getElementById("canvas").getContext("2d").ChartNewId=undefined;
document.getElementById("canvas").getContext("2d").DefaultchartTextScale=undefined;
document.getElementById("canvas").getContext("2d").DefaultchartLineScale=undefined;
document.getElementById("canvas").getContext("2d").DefaultchartSpaceScale=undefined;
document.getElementById("canvas").getContext("2d").aspectRatio = undefined;
eval("var result_options = ("+lstchart[i][3]+") ? mergeChartConfig(demo_common_options,"+lstchart[i][3]+") : demo_common_options;");
eval("result_options = ("+lstchart[i][4]+") ? mergeChartConfig(result_options,"+lstchart[i][4]+") : result_options;");
eval("var myCanvas = new Chart(document.getElementById(\"canvas\").getContext(\"2d\"))."+lstchart[i][1]+"("+lstchart[i][2]+",result_options);");
// if(dispgraph==-1) setTimeout(function(){ dispChart(); }, (lstchart[i][5]) ? lstchart[i][5] : 4000);
// else setTimeout(function(){ dispChart(); }, (lstchart[i][5]) ? lstchart[i][5] : 4000);
}
window.onload = function() { dispChart(); };
</script>
</body>
</html>