Matlab-like Data Plotting Library – graph.js

Preview:

Description:

graph.js is a pure JS library that helps you render Matlab-like charts/graphs on an HTML5 canvas element.

Supported chart types:

• Line chart
• Point chart
• Polar graph
• Bar chart
• Histogram graph
• Semi-Log graph
• Realtime graph

How to use it:

First you need to include the graph.js library on the webpage.

<script src="graph.js"></script>

And then create a DIV container where you want to render the chart.

<div id="graph"></div>

Plotting your custom data as a bar chart.

var graph = new Graph({
  appendTo : "chart",
  canvasWidth : 800,
  canvasHeight : 800/Math.sqrt(2),
  title : "Number of skipped lectures by months",
  xAxisTitle : "Months",
  yAxisTitle : "Skipped Lectures",
  colorList : ["#00F"],
  barWidth: 0.8,
  barPosition: "center",
  xAxisNumSteps:12,
  yAxisNumSteps: 10,
  yGridNumLines: 10,
  drawYAxis : 1,
  drawXAxis : 1
});
        
var y, labels;
y = [3,5,4,1,7,0,0,0,6,8,3,10];
labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
      
graph.bars(y, labels, [0,12]);

Check out the demos for more usages. There’s a complete list of all default options:

canvasWidth : 600,
canvasHeight : 600/Math.sqrt(2),
appendTo : "",
newWindow : false,
canvasId : "graph",
fontFamily : "sans-serif",
fontWeight : "normal",
fontSize : 10,
title : "",
titleFontSize : 12,
titleFontWeight: "bold",
colorList : ["#0000FF","#8B00FF","#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF",],
colorIndex : 0,
bgColor : "#FFF",
showValues : true, // show a small div following the cursor with the values
drawTitle : true,
drawYAxis : 3, // 0: none, 1: left, 2: right, 3: both
drawYAxisNumbers : true,
drawYAxisMarks : true,
drawYAxisTitle : true,
drawXAxis : 3, // 0: none, 1: bottom, 2: top, 3: both
drawXAxisNumbers : true,
drawXAxisMarks : true,
drawXAxisTitle : true,
drawGrid : true,
drawPolarGrid : false,
drawPolarAxis : false,
lineWidth : 1,
lineShowPoints : false,
pointStroke : true,
pointFill : false,
pointRadius : 3,
pointColorIndex : 0,
barWidth : 1, // % width
barPosition : "left", // options are left, center, right. default: left.
barLabelRotate : 0, // clockwise angle in degrees, starting from horizontal position
yAxisLeftMargin : 0.101010101, // 10.1 % width (30 mm from left) 
yAxisRightMargin : 0.05050505051, // 5.05 % width (15 mm from right)
yAxisLineWidth : 1,
yAxisColor : "#000",
yAxisTextBaseline : "middle",
yAxisTextAlign : "right",
yAxisTextRotate : 0,
yAxisDatetimeFormat : "",
yAxisNumSteps : 6, // same as yGridNumLines
yAxisNumDecimals : 2,
yAxisMarkLength : 3, // Mark length in pixels
yAxisTitle : "",
yAxisScale : "lin", // options are: "lin", "log"
yAxisLogBase : 10,
xAxisTopMargin : 0.9285714286, // 92.86 % height (15 mm from bottom)
xAxisBottomMargin : 0.9285714286, // 92.86 % height (15 mm from top)
xAxisLineWidth : 1,
xAxisColor : "#000",
xAxisTextBaseline : "top",
xAxisTextAlign : "center",
xAxisTextRotate : 0,
xAxisDatetimeFormat : "",
xAxisNumSteps : 8, // same as xGridNumLines
xAxisNumDecimals : 2,
xAxisMarkLength : 3, // Mark length in pixels
xAxisTitle : "",
xAxisScale : "lin", // options are: "lin", "log"
xAxisLogBase : 10,
yGridNumLines : 6,
yGridLineLength : 1,
yGridSpaceLength : 4,
yGridLineColor : "#999",
xGridNumLines : 8,
xGridLineLength : 1,
xGridSpaceLength : 4,
xGridLineColor : "#999",
polarGridNumLines : 24, // Number of lines (360 deg / 15 deg = 24)
polarGridLineLength : 1,
polarGridSpaceLength : 4,
polarGridColor : "#999",
polarAxisColor : "#222",
polarAxisMargin : 0.75, // Margin to the closest axis
polarAxisNumFormat : "deg" // options are: "deg" for degree, "rad" for radian