The popular and powerful charting capabilities of the Python matplotlib library, made available through a set of types for other languages, are especially useful for quickly visualizing data structures during exploration and debugging.

While the concepts are borrowed from the Python library, the model has been made more consistent with C3 AI Suite naming conventions and compatible with its processing flow. The major differences from Python are:

• naming conventions: fill_betweenx becomes fillBetweenX
• side-effect free: there is no global state, all plotting functions are builders
• each plot function has a corresponding spec: PlotPieSpec for matplotlib.pyplot.pie

The hierarchy of objects is:

• figure: top-level object that can be rendered as an image.
• axes: one or more per figure, each of which is a separate chart.
• element: one or more plot per axes, each of which is defined by one of the spec types.

The simplest chart is one figure with one axes and a single element. The examples below are for just that, a figure with a single axes and a single line element (Python plot function, C3 PlotPlotSpec).

Here is the Python example:

import random
import matplotlib.pyplot as plt
values = random.sample(xrange(100), 10)
fig, ax = plt.subplots()
ax.plot(values)
ax.set_title('Critical Issues')
plt.show()

Here is the verbose method of building the corresponding figure object and showing it:

var values = C3.Array.patternOfDbl(10, function(n) { return Math.random() * 100; });
PlotFigure.make({
  axes: [ {
    title: 'Critical Issues',
    elements: [ {
      type: 'PlotPlotSpec',
      y: values
    } ]
  } ]
}).show();

See PlotFigure for details.

Here is a more compact way of building the figure object using helper methods:

var values = C3.Array.patternOfDbl(10, function(n) { return Math.random() * 100; });
PlotAxes.make({ title: 'Critical Issues' })
        .plot({ y: values })
        .show();

See PlotAxes for details.

Copy link to this section

Plot Elements

• plot PlotPlotSpec — Plot y versus x as lines and/or markers.
• errorBar PlotErrorBarSpec — Plot y versus x as lines and/or markers with attached errorbars.
• scatter PlotScatterSpec — A scatter plot of y vs x with varying marker size and/or color.
• plotDate PlotPlotDateSpec — Plot data that contains dates.
• step PlotStepSpec — Make a step plot.
• logLog PlotLogLogSpec — Make a plot with log scaling on both the x and y axis.
• semiLogX PlotSemiLogXSpec — Make a plot with log scaling on the x axis.
• semiLogY PlotSemiLogYSpec — Make a plot with log scaling on the y axis.
• fillBetween PlotFillBetweenSpec — Fill the area between two horizontal curves.
• fillBetweenX PlotFillBetweenXSpec — Fill the area between two vertical curves.
• bar PlotBarSpec — Make a bar plot.
• barH PlotBarHSpec — Make a horizontal bar plot.
• stem PlotStemSpec — Create a stem plot.
• eventPlot PlotEventPlotSpec — Plot identical parallel lines at the given positions.
• pie PlotPieSpec — Plot a pie chart.
• stackPlot PlotStackPlotSpec — Draws a stacked area plot.
• brokenBarH PlotBrokenBarHSpec — Plot a horizontal sequence of rectangles.
• vLines PlotVLinesSpec — Plot vertical lines.
• hLines PlotHLinesSpec — Plot horizontal lines at each y from xmin to xmax.
• fill PlotFillSpec — Plot filled polygons.
• axhLine PlotAxhLineSpec — Add a horizontal line across the axis.
• axhSpan PlotAxhSpanSpec — Add a horizontal span (rectangle) across the axis.
• axvLine PlotAxvLineSpec — Add a vertical line across the axes.
• axvSpan PlotAxvSpanSpec — Add a vertical span (rectangle) across the axes.
• aCorr PlotACorrSpec — Plot the autocorrelation of x.
• angleSpectrum PlotAngleSpectrumSpec — Plot the angle spectrum.
• cohere PlotCohereSpec — Plot the coherence between x and y.
• csd PlotCsdSpec — Plot the cross-spectral density.
• magnitudeSpectrum PlotMagnitudeSpectrumSpec — Plot the magnitude spectrum.
• phaseSpectrum PlotPhaseSpectrumSpec — Plot the phase spectrum.
• psd PlotPsdSpec — Plot the power spectral density.
• specgram PlotSpecgramSpec — Plot a spectrogram.
• xCorr PlotXCorrSpec — Plot the cross correlation between x and y.
• boxPlot PlotBoxPlotSpec — Make a box and whisker plot.
• violinPlot PlotViolinPlotSpec — Make a violin plot.
• violin PlotViolinSpec — Drawing function for violin plots.
• bxp PlotBxpSpec — Drawing function for box and whisker plots.
• hexBin PlotHexBinSpec — Make a hexagonal binning plot.
• hist PlotHistSpec — Plot a histogram.
• hist2d PlotHist2dSpec — Make a 2D histogram plot.
• cLabel PlotCLabelSpec — Label a contour plot.
• contour PlotContourSpec — Plot contours.
• contourF PlotContourFSpec — Plot contours.
• matShow PlotMatShowSpec — Plot the values of a 2D matrix or array as color-coded image.
• pColor PlotPColorSpec — Create a pseudocolor plot with a non-regular rectangular grid.
• pColorFast PlotPColorFastSpec — Create a pseudocolor plot with a non-regular rectangular grid.
• pColorMesh PlotPColorMeshSpec — Create a pseudocolor plot with a non-regular rectangular grid.
• spy PlotSpySpec — Plot the sparsity pattern on a 2-D array.