vizkit documentation

• Overview
• Line Chart
• Bar Chart
• Multi Line Chart
• Multi Bar Chart
• Pie Chart
• Gauge
• Live Data
• Responsiveness

Multi Bar Chart

EXAMPLE CODE

vizkit is design such that rendering multiple datasets in a single chart is achieved by simply modifying the data passed to the chart. The data for a single bar chart will look like this:

// single bar chart data
var data = [
  [
    {"key": "blue", "xValue": '1', "yValue": '1'},
    {"key": "blue", "xValue": '2', "yValue": '2'},
    {"key": "blue", "xValue": '3', "yValue": '3'},
    {"key": "blue", "xValue": '4', "yValue": '4'},
    {"key": "blue", "xValue": '5', "yValue": '5'}
  ]
];

Notice how even though a single bar is to be rendered, the data is still in the format of a 2 dimentional array. This makes adding additional lines to the chart just a matter of adding additional arrarys:

// multi bar chart data
var data = [
  [
    {"key": "blue", "xValue": '1', "yValue": '1'},
    {"key": "blue", "xValue": '2', "yValue": '2'},
    {"key": "blue", "xValue": '3', "yValue": '3'},
    {"key": "blue", "xValue": '4', "yValue": '4'},
    {"key": "blue", "xValue": '5', "yValue": '5'}
  ],
  [
    {"key": "red", "xValue": '1', "yValue": '3'},
    {"key": "red", "xValue": '2', "yValue": '4'},
    {"key": "red", "xValue": '3', "yValue": '2'},
    {"key": "red", "xValue": '4', "yValue": '6'},
    {"key": "red", "xValue": '5', "yValue": '5'}
  ], 
  [
    {"key": "green", "xValue": '1', "yValue": '9'},
    {"key": "green", "xValue": '2', "yValue": '6'},
    {"key": "green", "xValue": '3', "yValue": '1'},
    {"key": "green", "xValue": '4', "yValue": '2'},
    {"key": "green", "xValue": '5', "yValue": '2'}
  ],
  [
    {"key": "yellow", "xValue": '1', "yValue": '10'},
    {"key": "yellow", "xValue": '2', "yValue": '7'},
    {"key": "yellow", "xValue": '3', "yValue": '2'},
    {"key": "yellow", "xValue": '4', "yValue": '1'},
    {"key": "yellow", "xValue": '5', "yValue": '3'}
  ],
];

One preparing the data, you would create the multi bar chart the same way as a single bar chart. All configuration methods of the single bar chart are still usable as well:

var DrawViz = vizkit.barchart(data)
                    .xAxis({scale: 'ordinal'})
                    .legend({addMouseoverClasses: true, symbol: {type: 'square'}})
                    .tooltip({content: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>"});


DrawViz(d3.select('.viz'));