Skip to content

Defining a new chart

parasjain edited this page Jul 10, 2012 · 5 revisions

Creating an the chart index definition

In educhart.js, the charts object is defined in the init function. Each chart needs to have several key properties.

  • map: function that performs a map of a particular data set to another Example: to map years in data set A to a value in B
  • scale: function to scale a data set to the bound defined for a chart Example: scale values to percentages
  • add: add data to a data set Example: calculate averages for each row and place in a new column.

These functions should be enough to form a data set to d3's specifications for a chart.

Creating the chart library file

Under the directory charts, create a new Javascript file, ex. donut.js. In this file, you should place the functions used to take a generic data set and render a chart of the specific format. A function should be created with a controller function of the format:
function donut(data, centerLabel, sel, w, h) {
where data is a multi-dimensional array with headers. centerLabel should be a string with the title of the chart. sel should contain the selector to place the chart into. w and h should contain the width and height respectively for the chart to be rendered.

Clone this wiki locally