Multifunctional Data Visualisation Library For JavaScript – grapho.js

grapho.js is a simple, lightweight yet highly customizable JavaScript library for visualizing your datasets into various types of charts.

Chart types supported:

• Bar (Stacked, Fixed)
• Line (Stacked, Fixed)
• Area (Stacked, Fixed)
• Scatter
• Pie (Stacked, Regular)
• Bands
• Error bars
• Box plot
• Candle
• OHLC

Basic usage:

Download and place the grapho.js JavaScript library into your html document.

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

Create a DIV element that will be served as the container for your chart.

<div id="example"></div>

Create a basic bar & line chart.

var graphoObj = new Grapho( { place: 'example' } );
graphoObj.addDataSet({
    type:'line',
    strokeStyle: '#F0F066',
    y: { 
        scaleStyle: '#F0F066',
        showGridLines: true,
        labels: true
    },
    x: { 
        labels: true
    },
    data: [7, 6, 5, 4, 2.5, 4, 4, 10, 0, 12,14]
});
graphoObj.addDataSet({
    type:'bar',
    strokeStyle: '#F0F066',
    data: [7, 6, 5, 4, 2.5, 4, 4, 10, 0, 12, 14]
});

All default configuration options.

container: {
  width: "auto",
  height: "auto"
},
settings: {
  // Used for all chart types
  margin: 5,
  showLegend: false,
  legend: {
    position: "bottom",
    inside: false
  },
  // Used for pie
  startAngle: 90,
  sizePercent: 1,
  relative: true,
  innerMargin: 3
},
dataset: {
  type: "line", // line || scatter || area || bar || pie || box || error || ohlc || candle
  x: { axis: 1 },
  y: { axis: 1 },
  // type: "line" or "area"
  lineWidth: 2,
  lineSmooth: true,
  dotWidth: 4,        // type: scatter
  // type: "bar"
  widthPrc: 90,
  // Internal stuff
  _labels: [],
  _usedPos: [],               // Used for stacking charts
  _usedNeg: [],
  _data: []
},
axis: {
  min: "auto",
  max: "auto",
  showscale: false,
  gridLines: false,
  name: undefined,
  labels: false,
  labelFormat: formats.default,
  labelRotation: 0,
  showCenter: false,
  majorTickHeight: 4,
  center: 0,
  padded: false,
  stacked: false,
  numeric: true,              // Handle this as an numerical (continouos) axis, or a text-axis
  extra: 0,                   // Extra adds to max and min, usable when using max/min auto
  
}