File: example_scatter.html

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


Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * 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: * **************************************************************/ --> <html> <head> </head> <body> <div id='chart_div' style='float: left; margin-right: 20px;'></div> <div id='legend' style='float: left; margin-top: 20px;'></div> <script src="./chart.packed.js" type="text/javascript"></script> <script> var c = new chart("chart_div", { //chart type type:"scatter", //width of chart width: 800, //height of chart height: 600, //start value for x axis x_start: 0, //end value for x axis x_end: 100, //step increment for x axis x_step: 10, //color for x grid (provide "" if none) x_grid: "#e9e9e9", //start value for y axis y_start: 0, //end value for y axis y_end: 100, //step increment for y axis y_step: 10, //color for y grid (provide "" if none) y_grid: "#e9e9e9", //background color of chart backgroundColor: "#fff", //main color of chart color: "#000", //show markers for lines type markers: true, //display values on axis values: true, //what to do on click onclick: function(x,y, label){ alert(label + "(" + x + ":" + y + ")"); }, //what to do on mouse hover onmouseover: function(x,y,label){ var canv = document.getElementById("chart_div"); = "pointer"; = "hand"; var l = document.getElementById("legend"); l.innerHTML = "<p>x: " + x + "; y: " + y + "</p><p>Label: " + label + "</p>"; }, //what to do on mouse out onmouseout: function(x,y,label){ var canv = document.getElementById("chart_div"); = "default"; document.getElementById("legend").innerHTML = ""; }, //what to do if browser doesn't support canvas on_error: function(){ alert("Your browser doesn't support canvas. Upgrade your browser!"); } }); 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(); </script> </body> </html>