Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Generate charts using HTML5 canvas

Easy Chart class helps to generate charts using HTML5 canvas

You can generate 5 chart types: line, scatter, columns, bars and pie. It is also possible to provide hover and click events to to generate chart data.

Charts are generate from user provided data and are automatically scaled to users provided dimensions

Package contains chart.js and chart.packed.js (packed javascript) and five example for each chart type.

Contents

Download

Example codes

<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>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew chart(id, config)
DescriptionCreate chart instance
Input parameters

string id - ID of HTML element where to generate canvas chart

json config - chart configuration:

  • string type - chart type, possible values: line, scatter, bars, columns, pie (default: "line")
  • int x_start - start value for x axis (default: 0)
  • int x_end - end value for x axis (default: 100)
  • int x_step - step increment for x axis (default: 10)
  • string x_grid - color for x grid (provide "" if none)(default: "#e9e9e9")
  • int y_start - start value for y axis (default: 0)
  • int y_end - end value for y axis (default: 100)
  • int y_step - step increment for y axis (default: 10)
  • string y_grid - color for y grid (provide "" if none) (default: "#e9e9e9")
  • int width - width of chart in pixels(default: 800)
  • int height - height of chart in pixels (default: 600)
  • string backgroundColor - background color of chart (default: "#fff")
  • string color - main color of chart (for axis, values, etc) (default: "#000")
  • function onclick - what to do on click (receives x, y coordinates and label for line or scatter types and value and label for bars, columns, pie) (default: null)
  • fucntion onmouseover - what to do on mouse hover (receives x, y coordinates and label for line or scatter types and value and label for bars, columns, pie) (default: null)
  • function onmouseout - what to do on mouse out (receives x, y coordinates and label for line or scatter types and value and label for bars, columns, pie) (default: null)
  • function on_error - what to do if browser doesn't support canvas (default: null)
  • bool markers - show markers for lines type (default: true)
  • bool values - display values on axis(for scatter or line types) (default: true)

Add values to chart

Back to method list

Method name

For line and scatter types : add(x_value, y_value, color, label)

For columns, bars and pie types : add(value, color, label)

DescriptionAdd value to chart
Input parameters

int x_value,y_value,value - x and y coordinates (line, scatter) or simple integer value (bars, columns, pie)

string color - color for this marker/part of chart

string label - label for this marker for identification when using events

Draw chart

Back to method list

Method namedraw()
DescriptionGenerates chart from provided values

Latest changes

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus