chartnew.js
Version:
Simple HTML5 Charts using the canvas element
390 lines (382 loc) • 15.1 kB
HTML
<!doctype html>
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/shapesInChart.js'></script>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<div>
<canvas id="total-spend"></canvas>
<script>
function annotateAllX(area,ctx,data,statData,posi,posj,othervars) {
retstring=statData[posi][posj].v2+'<HR>';
retstring=retstring+'';
for(var i=0;i<data.datasets.length;i++){
if(typeof statData[i][posj].datavalue!="undefined" && data.datasets[i].type != "Line")retstring=retstring+statData[i][posj].v1+" : "+" $ "+statData[i][posj].datavalue+" Billion<br>";
}
return "<%='"+retstring+"'%>";
}
function DrawTheChart(ChartData, ChartOptions, ChartId, ChartType) {
eval('var myLine = new Chart(document.getElementById(ChartId).getContext("2d")).' + ChartType + '(ChartData,ChartOptions);document.getElementById(ChartId).getContext("2d").stroke();')
}
function MoreChartOptions() {}
var SpendingData = {
labels: ["2007",
"2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
],
datasets: [{
fillColor: "rgba(177, 70, 35, 1)",
strokeColor: "rgba(52,152,219,0.5)",
pointColor: "rgba(52,152,219,1)",
markerShape: "circle",
pointStrokeColor: "rgba(255,255,255,1)",
data: [5.1, 5.8, 4.7, 5.8, 6.9, 8, 7, 7.4, 6.9, ],
title: "Spending"
}, ]
};
SpendingOptions = {
canvasBackgroundColor: 'rgba(255,255,255,1.00)',
responsive : true,
spaceLeft: 12,
spaceRight: 12,
spaceTop: 12,
spaceBottom: 12,
canvasBorders: false,
canvasBordersWidth: 1,
canvasBordersStyle: "solid",
canvasBordersColor: "rgba(0,0,0,1)",
scaleLabel: "<%='$'+value+' bln'%>",
yAxisMinimumInterval: 3,
scaleShowLabels: true,
scaleShowLine: true,
scaleLineStyle: "solid",
scaleLineWidth: 1,
scaleLineColor: "rgba(22,122,122,0.6))",
scaleOverlay: false,
scaleOverride: false,
scaleSteps: 1,
scaleStepWidth: 1,
scaleStartValue: 0,
annotateDisplay: true,
annotateRelocate: true,
annotateLabel: "<%=v2%><hr><%='$ '+v3+' billion'%>",
annotatePadding: "20px 20px 20px 20px",
annotateFontFamily: "'Roboto Condensed'",
annotateFontStyle: "normal normal",
annotateFontColor: "rgba(255,255,255,1.00)",
annotateFontSize: 14,
annotateBorderRadius: "3px",
annotateBorder: "0px rgba(170,170,170,0.7) solid ",
annotateBackgroundColor: 'rgba(34,34,34,0.87)',
legend: false,
maxLegendCols: 5,
legendBlockSize: 20,
legendFillColor: 'rgba(255,255,255,0.00)',
legendColorIndicatorStrokeWidth: 1,
legendPosX: -2,
legendPosY: 4,
legendXPadding: 0,
legendYPadding: 10,
legendBorders: false,
legendBordersWidth: 1,
legendBordersStyle: "solid",
legendBordersColors: "rgba(102,102,102,1)",
legendBordersSpaceBefore: 5,
legendBordersSpaceLeft: 5,
legendBordersSpaceRight: 5,
legendBordersSpaceAfter: 5,
legendSpaceBeforeText: 5,
legendSpaceLeftText: 5,
legendSpaceRightText: 5,
legendSpaceAfterText: 5,
legendSpaceBetweenBoxAndText: 5,
legendSpaceBetweenTextHorizontal: 15,
legendSpaceBetweenTextVertical: 5,
legendFontFamily: "'Roboto Condensed'",
legendFontStyle: "normal normal",
legendFontColor: "rgba(0,0,0,1)",
legendFontSize: 18,
showYAxisMin: false,
rotateLabels: "smart",
xAxisBottom: true,
yAxisLeft: true,
yAxisRight: false,
graphTitleSpaceBefore: 5,
graphTitleSpaceAfter: 5,
graphTitleBorders: false,
graphTitleBordersXSpace: 1,
graphTitleBordersYSpace: 1,
graphTitleBordersWidth: 1,
graphTitleBordersStyle: "solid",
graphTitleBordersColor: "rgba(0,0,0,1)",
graphTitle: "Title",
graphTitleFontFamily: "'Roboto Condensed'",
graphTitleFontStyle: "normal bold",
graphTitleFontColor: "rgba(27,131,190,1)",
graphTitleFontSize: 26,
graphSubTitleSpaceBefore: 5,
graphSubTitleSpaceAfter: 5,
graphSubTitleBorders: false,
graphSubTitleBordersXSpace: 1,
graphSubTitleBordersYSpace: 1,
graphSubTitleBordersWidth: 1,
graphSubTitleBordersStyle: "solid",
graphSubTitleBordersColor: "rgba(0,0,0,1)",
graphSubTitle: "Subtitle",
graphSubTitleFontFamily: "'Roboto Condensed'",
graphSubTitleFontStyle: "normal normal",
graphSubTitleFontColor: "rgba(102,102,102,1)",
graphSubTitleFontSize: 16,
footNoteSpaceBefore: 0,
footNoteSpaceAfter: 0,
footNoteBorders: false,
footNoteBordersXSpace: 1,
footNoteBordersYSpace: 1,
footNoteBordersWidth: 1,
footNoteBordersStyle: "solid",
footNoteBordersColor: "rgba(0,0,0,1)",
footNote: "Source : NRF / Fundivo.com",
footNoteFontFamily: "'Open Sans'",
footNoteFontStyle: "normal lighter",
footNoteFontColor: "rgba(102,102,102,1)",
footNoteFontSize: 16,
scaleFontFamily: "'Roboto Condensed'",
scaleFontStyle: "normal normal",
scaleFontColor: "rgba(0,0,0,1)",
scaleFontSize: 16,
pointLabelFontFamily: "'Open Sans'",
pointLabelFontStyle: "normal normal",
pointLabelFontColor: "rgba(102,102,102,1)",
pointLabelFontSize: 12,
angleShowLineOut: true,
angleLineStyle: "solid",
angleLineWidth: 1,
angleLineColor: "rgba(0,0,0,0.1)",
percentageInnerCutout: 50,
scaleShowGridLines: true,
scaleGridLineStyle: "solid",
scaleGridLineWidth: 1,
scaleGridLineColor: "rgba(0,0,0,0.07)",
scaleXGridLinesStep: 0,
scaleYGridLinesStep: 1,
segmentShowStroke: true,
segmentStrokeStyle: "solid",
segmentStrokeWidth: 2,
segmentStrokeColor: "rgba(255,255,255,1.00)",
datasetStroke: true,
datasetFill: true,
datasetStrokeStyle: "solid",
datasetStrokeWidth: 2,
bezierCurve: true,
bezierCurveTension: 0.4,
pointDotStrokeStyle: "solid",
pointDotStrokeWidth: 1,
pointDotRadius: 3,
pointDot: true,
scaleTickSizeBottom: 5,
scaleTickSizeTop: 5,
scaleTickSizeLeft: 5,
graphMin: 0,
graphMax: 8,
barShowStroke: false,
barBorderRadius: 0,
barStrokeStyle: "solid",
barStrokeWidth: 1,
barValueSpacing: 15,
barDatasetSpacing: 0,
scaleShowLabelBackdrop: true,
scaleBackdropColor: 'rgba(255,255,255,0.75)',
scaleBackdropPaddingX: 2,
scaleBackdropPaddingY: 2,
animation: true,
onAnimationComplete: function() {
MoreChartOptions()
}
};
DrawTheChart(SpendingData, SpendingOptions, "total-spend", "Bar");
</script>
</div>
<div>
<canvas id="celebrate"></canvas>
<script>
function DrawTheChart(ChartData, ChartOptions, ChartId, ChartType) {
eval('var myLine = new Chart(document.getElementById(ChartId).getContext("2d")).' + ChartType + '(ChartData,ChartOptions);document.getElementById(ChartId).getContext("2d").stroke();')
}
function MoreChartOptions() {}
var CelebrateData = [{
value: 157,
color: '#B14623',
title: 'Celebrating '
}, {
value: 88,
color: '#F7ECE9',
title: 'Not Celebrating '
}, ];
CelebrateOptions = {
responsive : true,
canvasBackgroundColor: 'rgba(255,255,255,1.00)',
radiusScale: 0.7,
spaceLeft: 12,
spaceRight: 12,
spaceTop: 12,
spaceBottom: 12,
canvasBorders: false,
canvasBordersWidth: 1,
canvasBordersStyle: "solid",
canvasBordersColor: "rgba(0,0,0,1)",
scaleLabel: "<%=value+''%>",
yAxisMinimumInterval: 3,
scaleShowLabels: true,
scaleShowLine: true,
scaleLineStyle: "solid",
scaleLineWidth: 1,
scaleLineColor: "rgba(0,0,0,0.6)",
scaleOverlay: false,
scaleOverride: false,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
annotateDisplay: true,
annotateRelocate: true,
annotateLabel : "<%=v1%><hr> <%=+v2%> million / <%=+v6+'%'%>",
annotatePadding: "10px 20px 10px 20px",
annotateFontFamily: "'Roboto Condensed'",
annotateFontStyle: "normal normal",
annotateFontColor: "rgba(255,255,255,1.00)",
annotateFontSize: 14,
annotateBorderRadius: "3px",
annotateBorder: "0px rgba(170,170,170,0.7) solid ",
annotateBackgroundColor: 'rgba(34,34,34,0.87)',
legend: true,
maxLegendCols: 4,
legendBlockSize: 20,
legendFillColor: 'rgba(255,255,255,0.00)',
legendColorIndicatorStrokeWidth: 1,
legendPosX: 2,
legendPosY: 4,
legendXPadding: 0,
legendYPadding: 0,
legendBorders: false,
legendBordersWidth: 1,
legendBordersStyle: "solid",
legendBordersColors: "rgba(102,102,102,1)",
legendBordersSpaceBefore: 5,
legendBordersSpaceLeft: 5,
legendBordersSpaceRight: 5,
legendBordersSpaceAfter: 5,
legendSpaceBeforeText: 5,
legendSpaceLeftText: 5,
legendSpaceRightText: 5,
legendSpaceAfterText: 5,
legendSpaceBetweenBoxAndText: 5,
legendSpaceBetweenTextHorizontal: 15,
legendSpaceBetweenTextVertical: 15,
legendFontFamily: "'Roboto Condensed'",
legendFontStyle: "normal normal",
legendFontColor: "rgba(0,0,0,1)",
legendFontSize: 18,
showYAxisMin: false,
rotateLabels: "smart",
xAxisBottom: true,
yAxisLeft: true,
yAxisRight: false,
graphTitleSpaceBefore: 5,
graphTitleSpaceAfter: 5,
graphTitleBorders: false,
graphTitleBordersXSpace: 1,
graphTitleBordersYSpace: 1,
graphTitleBordersWidth: 1,
graphTitleBordersStyle: "solid",
graphTitleBordersColor: "rgba(0,0,0,1)",
graphTitle: "Title",
graphTitleFontFamily: "'Roboto Condensed'",
graphTitleFontStyle: "normal bold",
graphTitleFontColor: "rgba(27,131,190,1)",
graphTitleFontSize: 26,
graphSubTitleSpaceBefore: 5,
graphSubTitleSpaceAfter: 5,
graphSubTitleBorders: false,
graphSubTitleBordersXSpace: 1,
graphSubTitleBordersYSpace: 1,
graphSubTitleBordersWidth: 1,
graphSubTitleBordersStyle: "solid",
graphSubTitleBordersColor: "rgba(0,0,0,1)",
graphSubTitle: "Subtitle",
graphSubTitleFontFamily: "'Roboto Condensed'",
graphSubTitleFontStyle: "normal normal",
graphSubTitleFontColor: "rgba(102,102,102,1)",
graphSubTitleFontSize: 16,
footNoteSpaceBefore: 25,
footNoteSpaceAfter: 0,
footNoteBorders: false,
footNoteBordersXSpace: 1,
footNoteBordersYSpace: 1,
footNoteBordersWidth: 1,
footNoteBordersStyle: "solid",
footNoteBordersColor: "rgba(0,0,0,1)",
footNote: "Source : NRF / Fundivo.com",
footNoteFontFamily: "'Open Sans'",
footNoteFontStyle: "normal lighter",
footNoteFontColor: "rgba(102,102,102,1)",
footNoteFontSize: 16,
scaleFontFamily: "'Roboto Condensed'",
scaleFontStyle: "normal normal",
scaleFontColor: "rgba(0,0,0,1)",
scaleFontSize: 16,
pointLabelFontFamily: "'Open Sans'",
pointLabelFontStyle: "normal normal",
pointLabelFontColor: "rgba(102,102,102,1)",
pointLabelFontSize: 12,
angleShowLineOut: true,
angleLineStyle: "solid",
angleLineWidth: 1,
angleLineColor: "rgba(0,0,0,0.1)",
percentageInnerCutout: 60,
scaleShowGridLines: true,
scaleGridLineStyle: "solid",
scaleGridLineWidth: 1,
scaleGridLineColor: "rgba(0,0,0,0.03)",
scaleXGridLinesStep: 0,
scaleYGridLinesStep: 1,
segmentShowStroke: true,
segmentStrokeStyle: "solid",
segmentStrokeWidth: 2,
segmentStrokeColor: "rgba(255,255,255,1.00)",
datasetStroke: true,
datasetFill: true,
datasetStrokeStyle: "solid",
datasetStrokeWidth: 2,
bezierCurve: true,
bezierCurveTension: 0.4,
pointDotStrokeStyle: "solid",
pointDotStrokeWidth: 1,
pointDotRadius: 3,
pointDot: true,
scaleTickSizeBottom: 5,
scaleTickSizeTop: 5,
scaleTickSizeLeft: 5,
scaleTickSizeRight: 5,
graphMin: 0,
barShowStroke: false,
barBorderRadius: 0,
barStrokeStyle: "solid",
barStrokeWidth: 1,
barValueSpacing: 15,
barDatasetSpacing: 0,
scaleShowLabelBackdrop: true,
scaleBackdropColor: 'rgba(255,255,255,0.75)',
scaleBackdropPaddingX: 2,
scaleBackdropPaddingY: 2,
animation: true,
onAnimationComplete: function() {
MoreChartOptions()
}
};
DrawTheChart(CelebrateData, CelebrateOptions, "celebrate", "Doughnut");
</script>
</div>
</script>
</body>
</html>