Creating a Basic Chart

In the following tutorial, we will create a basic chart by plotting numerical (x,y) coordinate data.

As we discussed in the first tutorial, a Scale takes data values (which determine the domain) and maps them to pixel values (the range). This is important because certain objects, such as axes and plots, need to be drawn to the same scale in order for the chart to have meaning.

To specify a Scale in this example, we create two linear scales, named xScale and yScale respectively. The Scales.Linear class defines a scale that forms a linear mapping between an input domain and an output range.

var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();

Once we've specified the scale, we need to set the locations of our Axes. We create two axes, named xAxis and yAxis. The Axes.Numeric class defines an axis that displays numeric data. Its constructor requires a Scale and a string that denotes the orientation for the axis. Valid orientations include "top", "bottom", "left", and "right".

var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

Now we need to create the plot. In this case, we want a line chart, so we use the Plots.Line class.

var plot = new Plottable.Plots.Line();

Plottable charts have a concept of Accessors, which are functions for accessing specific datum properties. An Accessor function typically has three parameters: datum (the particular entry that is being accessed), index (the entry's index in its dataset), and dataset (the dataset that the datum belongs to).

Line plots require two basic accessors to be defined for x and y coordinates, as well as the scales that the Accessors should correspond to.

plot.x(function(d) { return d.x; }, xScale);
plot.y(function(d) { return d.y; }, yScale);

In the above code, we are using the value defined by the "x" key as the value for our x coordinates, and the value defined by the "y" key as the value for our y coordinates.

The next step is to add our data to the plot. Plottable accepts data points that are represented as an array of objects in standard JSON notation. Note that data would typically be contained in a separate file, or loaded via AJAX.

var data = [
  { "x": 0, "y": 1 },
  { "x": 1, "y": 2 },
  { "x": 2, "y": 4 },
  { "x": 3, "y": 8 }
];

Raw data must be converted to a Dataset object before it can be used with plots.

var dataset = new Plottable.Dataset(data);

Now we can add our dataset directly to the plot.

plot.addDataset(dataset);

Almost there! Now we need to put all the pieces together to create a chart. To do this, we will create a Table. We want to create a basic chart with a y-axis on the left side, an x-axis on the bottom, and a plot within the boundaries established by the axes. With this in mind, we define our Table as follows.

var chart = new Plottable.Components.Table([
  [yAxis, plot],
  [null, xAxis]
]);

Note that we need a null in the first column because the xAxis would otherwise not align underneath our plot. We now have a table graphing our chart. The final step is drawing that chart on your screen.

chart.renderTo("svg#tutorial-result");

renderTo() renders its Component to a given <svg> element, which can either be passed in as a selector string for the <svg> or as a d3 selection containing an <svg>

At this point, you should have successfully created your first Plottable chart! Now it's time to move on to customization with accessors.

The code for generating the chart is here:

function makeBasicChart() {

  var xScale = new Plottable.Scales.Linear();
  var yScale = new Plottable.Scales.Linear();

  var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
  var yAxis = new Plottable.Axes.Numeric(yScale, "left");

  var plot = new Plottable.Plots.Line();
  plot.x(function(d) { return d.x; }, xScale);
  plot.y(function(d) { return d.y; }, yScale);

  var data = [
    { "x": 0, "y": 1 },
    { "x": 1, "y": 2 },
    { "x": 2, "y": 4 },
    { "x": 3, "y": 8 }
  ];

  var dataset = new Plottable.Dataset(data);
  plot.addDataset(dataset);

  var chart = new Plottable.Components.Table([
    [yAxis, plot],
    [null, xAxis]
  ]);

  chart.renderTo("svg#tutorial-result");

}

$(document).ready(function() {
  makeBasicChart();
});