View on GitHub

charts.js

Making d3.js easy to use - get interactive charts in 5 minutes without dealing with nitty-gritty SVG details

Download this project as a .zip file Download this project as a tar.gz file

What is charts.js

charts.js is meant to be an easy to use library to pair complex online charting libraries like d3 or Google's Charting API with easy to use code. The library includes specialization to specific fields like education.

Get charts.js in 5 minutes

<script src="//d3js.org/d3.v2.js"></script>  
<script src="//jainlabs.github.com/charts/cdn/charts.min.js"></script>
<div id="chart_area"></div>  
<script>  
    charts.gauge({  
        container: '#chart_area',  
        value: 50,  
        size: 240,  
        label: 'Memory',  
        minorTicks: 5,  
        majorTicks: 5,  
        zones: {  
            red: { from: 0, to: 5 },  
            yellow: { from: 5, to: 15 },  
            green: { from: 85, to: 100 }  
        }  
    });  
</script>

produces:

More charting examples (all demos)

Donut Chart

Base donut (example code)	Behavior chart (example code)

charts.donut({
  sections: [{
    data: 2,
    label: 'eating',
  }, {
    data: 8,
    label: 'sleeping',
  }, {
    data: 1.5,
    label: 'Hacker News',
  }, {
    data: 4,
    label: 'coding',
  }],
  centerLabel: 'My day',
  container: '#chart_area',
  width: 300,
  height: 300
});

charts.behavior({
  positive: {
    'participation':3,
    'productivity':2,
    'excitment':1
  },
  negative: {
    'sleeping': 1,
    'distracted': 1
  },
  neutral: {
    'restroom breaks': 2
  }
}, '#behavior_chart', 300, 300);

Grouped Line Chart (example code)

charts.groupedLine({
  time: true,
  data: {
    'Sun Jul 01 2012 00:00:00 GMT-0700 (PDT)': [.3,.42,.5,.6],
    'Sun Jul 02 2012 00:00:00 GMT-0700 (PDT)': [.6,.8,.9],
    'Sun Jul 03 2012 00:00:00 GMT-0700 (PDT)': [1.5,2,2.1],
    'Sun Jul 04 2012 00:00:00 GMT-0700 (PDT)': [2.2,2.3,2.5]
  },
  title: 'Grouped Line Chart',
  xlabel: 'Time',
  ylabel: 'y Label',
  xMax: 'Wed Jul 04 2012 10:00:00 GMT-0700 (PDT)',
  yMax: 3,
  xMarker: 'Wed Jul 03 2012 10:00:00 GMT-0700 (PDT)',
  yMarker: 2,
  container: '#grouped_line_chart',
  width:  600,
  height: 300,
  boxColors: {
    belowLine: '#999999',
    onLine: 'steelblue',
    aboveLine: 'green'
  },
  popover: true
});

Gauge Chart (example code)

charts.gauge({
      container: '#gauge_chart',
      value: 90,
      size: 240,
      label: 'Power',
      minorTicks: 5,
      majorTicks: 5,
      zones: {
        red: { from: 0, to: 5 },
        yellow: { from: 5, to: 15 },
        green: { from: 85, to: 100 }
      }
    });

Line Chart

Base line (code)

charts.line({
  time: true,
  data: [{
      x: 'Sun Jul 01 2012 00:00:00 GMT-0700 (PDT)',
      y: .3
    }, {
      x: 'Mon Jul 02 2012 00:00:00 GMT-0700 (PDT)',
      y: 1
    }, {
      x: 'Tue Jul 03 2012 00:00:00 GMT-0700 (PDT)',
      y: 10
    }, {
      x: 'Wed Jul 04 2012 00:00:00 GMT-0700 (PDT)',
      y: 15
    }],
  title: 'Line Chart with Time',
  xlabel: 'Time',
  ylabel: 'y Label',
  xMarker: '2012/07/07',
  color: "#0A0",
  width: 600,
  height: 300,
  container: "#line_chart",
  popover: true
});

DRA chart (code)

charts.DRA({
  scores: {
    '2012/06/1': 25,
    '2012/06/4': 28,
    '2012/06/7': 35,
    '2012/06/11': 50
  },
  container: '#DRA_chart',
  deadline: '2012/06/10',
  goal: 40,
  width: 600,
  height: 300,
  popover: true
});