Easy Animated Data Plotting library – Easygraphs.js

Preview:

Description:

Easygraphs.js is an easy, flexible and high-performance JavaScript graph library used to plot your data as animated, SVG based charts, lines, dots and areas.  No any 3rd dependencies and CSS styles required.

How to use it:

Link to the Easygraphs.js as follow:

<script src="source/Easygraphs.js"></script>

Create a DIV container for your graph.

<div id="demo"></div>

Create a new Easygraphs instance and prepare your data & pass the options as follows:

var myGraph = new Easygraphs({
    container: document.getElementById('demo'),
    width: 880,
    height: 200,
    padding: {
      top: 30,
      right: 30,
      left: 55
    },
    tooltip: {
      template: 'Number errors: {{ value }}',
      widthAuto: true,
      color: '#222',
      background: '#FFF'
    },
    yAxis: {
      text: {
        toFixed: 0
      },
      title: {
        text: 'May'
      },
      grid: {
        dasharray: '1%'
      }
    },
    xAxis: {
      labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      grid: {
        dasharray: '1%'
      }
    },
    data: [{
      name: 'Errors',
      dots: {
        color: 'rgb(246, 75, 47)'
      },
      line: {
        width: 2,
        color: 'rgb(246, 75, 47)',
        fill: 'rgba(246, 75, 47, 0.5)'
      },
      values: [12, 22, 25, 23, 32, 34, 37, 30, 32, 40, 51, 56, 52, 70, 68, 72, 74, 78, 91, 92, 95, 96, 98, 121, 70, 78, 76, 68, 72, 71, 92]
    }]
});

Render the graph inside the container you just created.

myGraph.render();

All default options and callback functions.

container: null,
width: 1024,
height: 400,
speedRenderingFragment: 40,
padding: {
  top: 20,
  left: 60,
  bottom: 60,
  right: 20
},
color: '#FFF',
xAxis: {
  labels: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18],
  border: {
      show: true,
      width: 1,
      color: '#DADADA'
  },
  segment: {
      show: true,
      width: 1,
      height: 10,
      color: '#DADADA'
  },
  text: {
      color: '#222',
      size: 12
  },
  grid: {
      show: true,
      width: 1,
      color: '#DADADA'
  }
},
yAxis: {
  title: {
      show: true,
      text: 'yAxis title',
      size: 14,
      color: '#222'
  },
  segment: {
      show: true,
      count: 5,
      width: 10,
      height: 1,
      color: '#DADADA'
  },
  border: {
      show: true,
      width: 1,
      color: '#DADADA'
  },
  text: {
      show: true,
      color: '#222',
      size: 12,
      toFixed: 1,
      outputCallback: null
  },
  grid: {
      show: true,
      width: 1,
      color: '#DADADA'
  }
},
legends: {
  show: true,
  width: 20,
  height: 4,
  offsetY: 0,
  color: '#222',
  size: 12
},
tooltip: {
  show: true,
  color: '#FFF',
  background: false,
  borderWidth: 1,
  borderColor: false,
  template: '{{value}}',
  size: 12,
  width: 120,
  height: 25,
  widthAuto: false,
  rx: 3,
  ry: 3
},
dotsOptions: {
  show: true,
  width: 6,
  height: 6,
  color: '#7CB5EC',
  borderColor: '#7CB5EC',
  borderWidth: 1,
  rx: 25,
  ry: 25,
  hoverEffect: true
},
lineOptions: {
  show: true,
  width: 2,
  color: '#7CB5EC',
  fill: false,
  hoverEffect: true
},
data: [{
  name: 'Test data',
  dots: {
      color: 'rgb(31, 118, 185)'
  },
  line: {
      color: 'rgb(31, 118, 185)',
      fill: 'rgba(31, 118, 185, 0.3)'
  },
  values: [1, 5, 7, 9, 11, 15, 22, 14, 10, 1, 2]
}],
callbacks: {
  createItem: null,
  createInstance: null
}