File: example_lines.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Easy Chart   example_lines.html   Download  
File: example_lines.html
Role: Example script
Content type: text/plain
Description: Line type example
Class: Easy Chart
Display several types of charts in Canvas
Author: By
Last change:
Date: 13 years ago
Size: 1,696 bytes
 

Contents

Class file image Download
<!-- /************************************************************* * 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>