Multifunctional Data Visualisation Library For JavaScript – grapho.js

Category: Chart & Graph , Javascript | February 8, 2016
Author: Hexagon
Views Total: 1,461 views
Official Page: Go to website
Last Update: February 8, 2016
License: MIT

Preview:

Multifunctional Data Visualisation Library For JavaScript – grapho.js

Description:

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
  
}

 

You Might Be Interested In:


Leave a Reply