Author: | dhuertas |
---|---|
Views Total: | 1,278 views |
Official Page: | Go to website |
Last Update: | May 24, 2016 |
License: | GPL-3.0 |
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:
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