<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Easy chart package allows you to easily draw chart from provided data.
* It supports line, scatter, columns, bars and pie chart types
* IT is also possible to set events for interaction with chart data
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Generate-charts-using-HTML5-canvas
**************************************************************/
-->
<html>
<head>
</head>
<body>
<div id='chart_div' style='float: left; margin-right: 20px;'></div>
<div id='legend'></div>
<script src="./chart.packed.js" type="text/javascript"></script>
<script>
var c = new chart("chart_div", {
type:"lines",
onclick: function(x,y, label){
alert(label + "(" + x + ":" + y + ")");
},
onmouseover: function(x,y,label){
var canv = document.getElementById("chart_div");
canv.style.cursor = "pointer";
canv.style.cursor = "hand";
var l = document.getElementById("legend");
l.innerHTML = "<p>x: " + x + "; y: " + y + "</p><p>Label: " + label + "</p>";
},
onmouseout: function(x,y,label){
var canv = document.getElementById("chart_div");
canv.style.cursor = "default";
document.getElementById("legend").innerHTML = "";
},
width: 800,
height: 600
});
c.add(10,30,"green", "Pretty low");
c.add(50,50,"blue", "Firfy fifty");
c.add(80,60,"red", "Red one");
c.add(100,100,"yellow", "One hundret");
c.draw();
c.draw();
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
