Icontem

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: 8 years ago
Size: 2,576 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' 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");
		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>";
	},
	//what to do on mouse out
	onmouseout: function(x,y,label){
		var canv = document.getElementById("chart_div");
		canv.style.cursor = "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>