Simple SVG Based JavaScript Charting Library – davacharts

davacharts is a simple, lightweight JavaScript plotting library for generating complex charts & graphs using SVG and CSS. Currently supports line, column and area charts.

How to use it:

Add references to davacharts’s JS and CSS files into your html document.

<script src=".davacharts.js"></script>
<link rel="stylesheet" href="davacharts.css">

Create an empty container to place the chart.

<div class="js-chart"></div>

The JavaScript to render a graph combined with line, area and column charts.

var DVC = document.DavaCharts;
var chart = new DVC.Chart('.js-chart', {
  plot: {
    xAxis: { tickCount: 10}
  },
  series: [{
    data: [15, 16, 15, 16, 15, 16, 17, 16, 15, 14],
    type: 'area'
  }, {
    data: [8, 7, 6, 5, 6, 5, 8, 10, 6, 7],
    type: 'column'
  }, {
    data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34],
    type: 'line'
  }]
});

Default options.

axis: {
  max: Number.MIN_VALUE,
  min: Number.MAX_VALUE,
  tickCount: 5
},
renderer: {
  cssPrefix: "dvc-",
  precision: 0.001,
},
presenter: {
  type: 'line',
  plot: 0
}