Chart Types

Here is an explanation of each of the chart types we support.

• line charts
• scatterplots
• quantile charts

how this works

As shown in other examples in our documentation, most of our functions require you to pass in a javascript object, which contains a number of arguments. These typically look something like this:

var args = {
            title: "Line Chart",
            description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
            chart_type: "line",
            data: data,
            width: 400,
            height: 200,
            target: '#some_div',
            x_accessor: 'date',
            y_accessor: 'value'
}
moz_chart(args);

We have found this to be the easiest way to just carry around all the relevant data through the visualization pipeline.

common arguments

target This is the DOM element who will be the parent to the title and svg. required, no default

top, bottom, right, left These are the margins around the chart area, which are still in the svg. We keep these margins for axes, rollovers, and the like.

width, height This is the total width and height of the svg. The main plot area is defined from top, bottom, left, and right.

buffer the amount of space between the margin and the plot area. Usually a small amount.

small_height_threshold, small_width_threshold This is the minimum width and height where, if the thresholds are crossed, will change the text size on the axes.

max_x,max_y,min_x, min_y set the max and mins for the axes.

x_accessor, y_accessor The attributes used to access the data in each object in the data array. In the data example above, the x_accessor would be 'date', and the y_accessor would be 'y'.

small_text forces small text as if the width and height threshold have been crossed.

xax_count, yax_count the number of x and y axis ticks.

xax_ticks, yax_ticks the length of the x and y axis ticks.

x_extended_ticks, y_extended_ticks if set to true, then the ticks cross the entire plot area.

data Required. Should be an array of objects. The data is the most obviously necessary component to the chart. The format should be like this:

var data = [
  {y:1000, date: new Date(2014,4,1)}, 
  {y:1295, date: new Date(2014,4,2)}, ... 
]

Line Charts

Line charts are the most common and extensive types of charts we make, so we invested a bit of time in covering all the use cases we encounter.

Here are some of the arguments unique to line charts:

x_label, y_label optional. The names of the axes, if you want to provide them.

area true or false - whether or not to include an area plot below the line.

rollover_callback a function that has the data and its index as arguments, like this:

function(d) {
   // update the title with the data.
   $('h1#some_title').html(d['value']);
},

show_rollover_text true / false, defaults to true. If false will not show rollover text.

decimals the number of decimals to carry in the rollover text.

format defaults to non-percentage, but can pass in "Percentage" to ensure sensible formatting.

linked All date-style line charts that are linked together will cause rollovers to trigger when one has a mouseover.

show_years boolean - display years on time-based line charts.

Scatterplots

Scatterplots are useful, though not necessarily as common for us as the line chart.

Quantile Plots

Quantile plots arise fairly commonly for us. We are often in the position of figuring out how distributions change over time.

The documentation for these is coming soon.