Skip to content

Proposal for Examples

Jump to bottom Edit New page
Kyle Gifford edited this page May 19, 2015 · 5 revisions

All examples are adapted from http://c3js.org/examples.html.

Example Notes

Data Series

Data can be loaded in a variety of ways - see Loading Data. For these examples, all data will be loaded using the following format:

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
  </c3-data>
</c3-chart>

Multiple Types of Charts

Chart types can be specified in a variety of ways - see API - Plurals. For these examples, all charts with multiple types will be defined using the following format:

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[300, 350, 300, 0, 0, 100]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
    <c3-data-type for="data1" value="step" />
    <c3-data-type for="data2" value="area-step" />
  </c3-data>
</c3-chart>

However, we might want to consider these as alternatives:

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
    <c3-types data1="step" data2="area-step" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[300, 350, 300, 0, 0, 100]" type="step" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" type="area-step" />
</c3-chart>

X Axes' Source Values

X axes' source values can be specified in a variety of ways - see API - Plurals. For these examples, all charts with one or more x axis' source values will be defined using the following format:

One Set

<c3-chart>
  <c3-data>  
    <c3-data-x value="x" /> <!-- for="*"? -->
    <c3-data-column key="x" value="[30, 50, 100, 230, 300, 310]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[130, 300, 200, 300, 250, 450]" />
  </c3-data>
</c3-chart>

However, we may want to consider these alternatives:

<c3-chart>
  <c3-data>
    <c3-xs x="x" />
    <c3-data-column key="x" value="[30, 50, 100, 230, 300, 310]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[130, 300, 200, 300, 250, 450]" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[130, 300, 200, 300, 250, 450]" />
  <c3-x-axis value="[30, 50, 100, 230, 300, 310]" />
</c3-chart>

Multiple Sets

<c3-chart>
  <c3-data>
    <c3-data-x for="data1" value="x1" />
    <c3-data-x for="data2" value="x2" />
    <c3-data-column key="x1" value="[10, 30, 45, 50, 70, 100]" />
    <c3-data-column key="x2" value="[30, 50, 75, 100, 120]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[20, 180, 240, 100, 190]" />
  </c3-data>
</c3-chart>

However, we may want to consider these alternatives:

<c3-chart>
  <c3-data>
    <c3-xs data1="x1" data2="x2" />
    <c3-data-column key="x1" value="[10, 30, 45, 50, 70, 100]" />
    <c3-data-column key="x2" value="[30, 50, 75, 100, 120]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[20, 180, 240, 100, 190]" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[20, 180, 240, 100, 190]" />
  <c3-x-axis for="data1" value="[10, 30, 45, 50, 70, 100]" />
  <c3-x-axis for="data2" value="[30, 50, 75, 100, 120]" />
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[{x:10, y:30}, {x:30, y:200}, {x:45, y:100}, {x:50, y:400}, {x:70, y:150}, {x:100, y:250}]" />
  <c3-series key="data2" value="[{x:30, y:20}, {x:50, y:180}, {x:75, y:240}, {x:100, y:100}, {x:120, y:190}]" />
</c3-chart>

Graph Examples

Line Chart

Reference: http://c3js.org/samples/simple_multiple.html

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[50, 20, 10, 40, 15, 25]" />
</c3-chart>

Timeseries Chart

Reference: http://c3js.org/samples/timeseries.html

<c3-chart>
  <c3-data>
    <c3-data-x value="x" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
    <c3-data-column key="x" value="['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06']" />
  </c3-data>
  <c3-x-axis type="timeseries">
    <c3-tick format="%Y-%m-%d" />
  </c3-x-axis>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[50, 20, 10, 40, 15, 25]" />
  <c3-x-axis type="timeseries" value="['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06']">
    <c3-tick format="%Y-%m-%d" />
  </c3-x-axis>
</c3-chart>

Spline Chart

Reference: http://c3js.org/samples/chart_spline.html

<c3-chart>
  <c3-data type="spline">
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
  </c3-data>
</c3-chart>

<c3-chart type="spline">
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[50, 20, 10, 40, 15, 25]" />
</c3-chart>

Simple XY Line Chart

Reference: http://c3js.org/samples/simple_xy.html

<c3-chart>
  <c3-data>
    <c3-data-x value="x" />
    <c3-data-column key="x" value="[30, 50, 100, 230, 300, 310]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[130, 300, 200, 300, 250, 450]" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[130, 300, 200, 300, 250, 450]" />
  <c3-x-axis value="[30, 50, 100, 230, 300, 310]" />
</c3-chart>

Multiple XY Line Chart

Reference: http://c3js.org/samples/simple_xy_multiple.html

<c3-chart>
  <c3-data>
    <c3-data-x for="data1" value="x1" />
    <c3-data-x for="data2" value="x2" />
    <c3-data-column key="x1" value="[10, 30, 45, 50, 70, 100]" />
    <c3-data-column key="x2" value="[30, 50, 75, 100, 120]" />
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[20, 180, 240, 100, 190]" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[20, 180, 240, 100, 190]" />
  <c3-x-axis for="data1" value="[10, 30, 45, 50, 70, 100]" />
  <c3-x-axis for="data2" value="[30, 50, 75, 100, 120]" />
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[{x: 10, y:30}, {x: 30, y:200}, {x: 45, y:100}, {x: 50, y:400}, {x: 70, y:150}, {x: 100, y:250}]" />
  <c3-series key="data2" value="[{x: 30, y:20}, {x: 50, y:180}, {x: 75, y:240}, {x: 100, y:100}, {x: 120, y:190}]" />
</c3-chart>

Line Chart with Regions

Reference: http://c3js.org/samples/simple_regions.html

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[50, 20, 10, 40, 15, 25]" />
    <c3-region for="data1" start="1" end="2" style="dashed" />
    <c3-region for="data1" start="3" />
    <c3-region for="data2" end="3" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" regions="[{'start':1, 'end':2, 'style':'dashed'},{'start':3}]" />
  <c3-series key="data2" value="[50, 20, 10, 40, 15, 25]" regions="[{'end':3}]" />
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]">
    <c3-region for="data1" start="1" end="2" style="dashed" />
    <c3-region for="data1" start="3" />
  </c3-series>
  <c3-series key="data2" value="[50, 20, 10, 40, 15, 25]">
    <c3-region for="data2" end="3" />
  </c3-series>
</c3-chart>

Step Chart

Reference: http://c3js.org/samples/chart_step.html

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[300, 350, 300, 0, 0, 100]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
    <c3-data-type for="data1" value="step" />
    <c3-data-type for="data2" value="area-step" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[300, 350, 300, 0, 0, 100]" type="step" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" type="area-step" />
</c3-chart>

Area Chart

Reference: http://c3js.org/samples/chart_area.html

<c3-chart>
  <c3-data>
    <c3-data-column key="data1" value="[300, 350, 300, 0, 0, 100]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
    <c3-data-type for="data1" value="area" />
    <c3-data-type for="data2" value="area-spline" />
  </c3-data>
</c3-chart>

<c3-chart>
  <c3-series key="data1" value="[300, 350, 300, 0, 0, 100]" type="area" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" type="area-spline" />
</c3-chart>

Stacked Area Chart

Reference: http://c3js.org/samples/chart_area_stacked.html

<c3-chart>
  <c3-data type="area-spline">
    <c3-data-column key="data1" value="[300, 350, 300, 0, 0, 100]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
    <c3-data-group value="['data1', 'data2']" />
  </c3-data>
</c3-chart>

<c3-chart type="area-spline">
  <c3-series key="data1" value="[300, 350, 300, 0, 0, 100]" group="data1and2" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" group="data1and2" />
</c3-chart>

Bar Chart

Reference: http://c3js.org/samples/chart_bar.html

<c3-chart>
  <c3-data type="bar">
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
  </c3-data>
  <c3-bar width-ratio="0.5" <!-- width="100" --> />
</c3-chart>

<c3-chart type="bar">
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" />
  <c3-bar width-ratio="0.5" <!-- width="100" --> />
</c3-chart>

Stacked Bar Chart

Reference: http://c3js.org/samples/chart_bar_stacked.html

<c3-chart type="bar">
  <c3-data>
    <c3-data-column key="data1" value="[30, 200, 100, 400, 150, 250]" />
    <c3-data-column key="data2" value="[130, 100, 140, 200, 150, 50]" />
    <c3-data-group value="['data1', 'data2']" />
  </c3-data>
  <c3-bar width-ratio="0.5" <!-- width="100" --> />
  <c3-y-grid>
    <c3-line value="0" />
  </c3-y-grid>
</c3-chart>

<c3-chart type="bar">
  <c3-series key="data1" value="[30, 200, 100, 400, 150, 250]" group="data1and2" />
  <c3-series key="data2" value="[130, 100, 140, 200, 150, 50]" group="data2and2" />
  <c3-bar width-ratio="0.5" <!-- width="100" --> />
  <c3-y-line value="0" />
</c3-chart>

Scatter Plot

Reference: http://c3js.org/samples/chart_scatter.html

<c3-chart>
  <c3-data type="scatter">
    <c3-data-x for="setosa" value="setosa_x" />
    <c3-data-x for="versicolor" value="versicolor_x" />
    <c3-data-column key="setosa_x" value="[3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3]" />
    <c3-data-column key="versicolor_x" value="[3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8]" />
    <c3-data-column key="setosa" value="[0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2]" />
    <c3-data-column key="versicolor" value="[1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3]" />
  </c3-data>
  <c3-x-axis label="Sepal.Width">
    <c3-tick no-fit />
  </c3-x-axis>
  <c3-y-axis label="Petal.Width" />
</c3-chart>

Pie Chart

Reference: http://c3js.org/samples/chart_pie.html

<c3-chart>
  <c3-data type="pie" onclick="" onmouseover="", onmouseout="">
    <c3-data-column key="data1" value="[30]" />
    <c3-data-column key="data2" value="[120]" />
  </c3-data>
</c3-chart>

Donut Chart

Reference: http://c3js.org/samples/chart_donut.html

<c3-chart>
  <c3-data type="donut" onclick="" onmouseover="", onmouseout="">
    <c3-data-column key="data1" value="[30]" />
    <c3-data-column key="data2" value="[120]" />
  </c3-data>
  <c3-donut title="Iris Petal Width" />
</c3-chart>

Gauge Chart

Reference: http://c3js.org/samples/chart_gauge.html

<c3-chart color-pattern="['#FF0000', '#F97600', '#F6C600', '#60B044']" color-threshold="[30, 60, 90, 100]" size-height="180">
  <c3-data type="gauge" onclick="" onmouseover="", onmouseout="">
    <c3-data-column key="data" value="[91.4]" />
  </c3-data>
  <c3-gauge <!-- label-format="" label-show="" min="" --> />
</c3-chart>

Combination Chart

Reference: http://c3js.org/samples/chart_combination.html

<c3-chart>
  <c3-data type="bar">
    <c3-data-column key="data1" value="[30, 20, 50, 40, 60, 50]" />
    <c3-data-column key="data2" value="[200, 130, 90, 240, 130, 220]" />
    <c3-data-column key="data3" value="[300, 200, 160, 400, 250, 250]" />
    <c3-data-column key="data4" value="[200, 130, 90, 240, 130, 220]" />
    <c3-data-column key="data5" value="[130, 120, 150, 140, 160, 150]" />
    <c3-data-column key="data6" value="[90, 70, 20, 50, 60, 120]" />
    <c3-data-type for="data3" value="spline" />
    <c3-data-type for="data4" value="line" />
    <c3-data-type for="data6" value="area" />
    <c3-data-group value="['data1', 'data2']" />
  </c3-data>
</c3-chart>
Add a custom footer
Add a custom sidebar
Clone this wiki locally