chart use

Chart: Use

To use a chart that's already been defined, you can use the chart function which is available on any d3 selection once you include the d3.chart library and corresponding chart definition files in your code.

For example:

d3.chart("ChartType", {
  initialize: function() {
    this.xScale = d3.scale.linear();
  },
  width: function(newWidth) {
    if (arguments.length === 0) {
      return this.w;
    }
    this.w = newWidth;
    this.xScale.range([0, this.w]);
    return this;
  }  
});

var myChart = d3.select("#container")
  .append("svg")
  .chart("ChartType")
  .width(110);

Note that you cannot create a new chart from the selection used as the context of a layer's lifecycle event handlers.

Drawing with data

Once a chart instance exists, it won't be visible until it is drawn with some data. To do that, you call the draw method on the chart instance and pass your data. For example, given the chart above, we would render it like so:

var data = [1,3,24,45];
myChart.draw(data);

Note that the data will be passed to all your layers' dataBind methods, after it goes through the chart's transform method, if one was defined by the chart constructor author.

Complex data

If your chart expects non primitive data (such as arrays of numbers,) then your chart constructor most likely defined a dataAttrs property that specifies exactly which attributes each datum should have. When instantiating your chart, you can specify what the mapping between your data and the expected attributes looks like so that the chart knows how to access the your data.

See the data mapping guide for detailed examples of this.