vizkit documentation

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

Multi Line 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 line chart will look like this:

// single line 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 line 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 line 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 line chart the same way as a single line chart. All configuration methods of the single line chart are still usable as well:

var DrawViz = vizkit.linechart(data)
                     .yAxis({title: 'foo', scale: 'linear'})
                     .xAxis({title: 'bar', scale: 'linear'})
                     .legend({addMouseoverClasses: true, symbol: {type: 'circle'}})
                     .tooltip({content: "<h1>{{key}}:</h1><p>{{xValue}}, {{yValue}}</p>"});


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