Version 1.1
Draws blocks, stacked blocks, dots, lines and Bezier curves from a json structure whose name matches a canvas id. Type of graph is given by the class name: "blocks", "stacked", "dots", "lines" or "bezier", or any combination of them (like "dots+lines"). All sizes, fonts, etc. are based on the dimensions of the canvas.
Run automatically by default when the page is loaded. Executable on demand by renaming it and explicitly calling it from elsewhere, which allows dynamic resizing of the canvas according to the viewport, or avoiding conflicts with other onload() handlers.
<!DOCTYPE html>
<html>
<head>
<title>Some Candy Talking</title>
<script src="https://raw.githubusercontent.com/jzu/candytalking/v1.1/candytalking.js">
</script>
</head>
<body>
<script>
var curves = {
"title": "Bezier + Dots",
"colors": [ "black", "red", "orange" ],
"data": [
[ "Qty/Day", "01/08", "02/08", "03/08", "04/08" ],
[ "Var 1", 1, 2, 3, 4 ],
[ "Var 2", -10, 5, 1, 5 ]
]
};
var histogram = {
"title": "Histogram",
"colors": [ "black", "cyan", "green" ],
"data": [
[ "Qty/Day", "01/08", "02/08", "03/08", "04/08" ],
[ "Var 1", 1, 2, 3, 4 ],
[ "Var 2", -10, 5, 1, 5 ]
]
};
</script>
<canvas id="curves" class="bezier+dots" width="600" height="500">
Canvas not supported - please use a real browser
</canvas>
<canvas id="histogram" class="blocks" width="800" height="600">
Canvas not supported - please use a real browser
</canvas>
</body>
</html>