• Jump To … +
    butterfly_example.ts dark_example.ts flamechart_example.ts icicle_sunburst_example.ts legend_example.ts pie_example.ts plot_area_example.ts plot_zoom_example.ts region_example.ts sankey_example.ts scatterplot_example.ts stack_example.ts swimlanes_example.ts sync_example.ts table_searchable_example.ts table_selectable_example.ts table_sortable_example.ts timeline_example.ts worldbank_example.ts
  • ¶

    C3 Timelines

    Demonstrate timelines that use a time scale and JavaScript Date objects as x values.

  • ¶

    This example also demonstrates a mechanism of dynamically adding charts to a table instead of attaching to already existing div elements in the DOM.

    var table_selection = d3.select('#timeline_example_table');
var timelines = [];
  • ¶

    The time scale that will be shared among all charts in this example.

    var time_scale = d3.time.scale().domain([new Date(2014, 6, 1), new Date(2014, 7, 1)]);
  • ¶

    Create a month’s worth of daily sample random data for this timeline.

    type TimelineDatum = { date: Date, num: number }
var timeline_data: TimelineDatum[] = [];
for (let day = 1; day <= 30; day++)
    timeline_data.push({
        date: new Date(2014, 6, day, Math.random() * 24),
        num: Math.round(Math.random() * 10),
    });
  • ¶

    Create c3 timeline charts

  • ¶

    Append two example rows in the table and attach a new c3.Plot.horiz_zoom to each one. Note that .node() is called on the D3 selection to pass in the actual DOM node element as the anchor.

    for (let row_color of ['darkred', 'darkblue']) {
    let row = table_selection.append('tr');
    row.append('td').text(row_color)
        .style('font-weight', 'bold')
        .style('background-color', 'lightgray')
        .style('text-align', 'center');

    timelines.push( new c3.Plot.Zoomable<TimelineDatum>({
        anchor: <HTMLElement>row.append('td').append('div').node(),
        width: '100%',
        zoomable: 'h',
  • ¶

    Create a month’s worth of daily sample random data for this timeline.

            data: timeline_data,
  • ¶

    Setup the user **scales ** for the plot.The horizontal scale will be the time scale we created above and the vertical scale will go from 0- 11 to accomodate the random num values.

            h: time_scale,
        v: d3.scale.linear().domain([0, 11]),
  • ¶

    accessor functions to get the x and y values of the data points.

            x: (d) => d.date,
        y: (d) => d.num,
  • ¶

    The maximum zoom factor that the user is allowed to zoom in. The user cannot zoom out more than the original defined domain.

            zoom_extent: 16,
  • ¶

    Add an **axis ** so that grid lines are drawn, but not the scale itself.

            axes: [
            new c3.Axis.X({
                grid: true,
                ticks: false,
                axis_size: 0,
            }),
        ],
  • ¶

    **Color ** this chart based on the example color for this row

            content_options: {
            styles: {
                'stroke': row_color,
                'fill': row_color,
            },
        },
  • ¶

    Add line layer. The r option will create a circle at each data point. The label_options.text will provide a text label for each data point circle.

            layers: [
            new c3.Plot.Layer.Line<TimelineDatum>({
                interpolate: 'cardinal',
                r: 12, // radius for circles at datapoints
                label_options: {
                    text: (d) => d.num,
                    styles: {
                        'fill': 'white',
                        'stroke': 'none',
                        'font-weight': 'bold',
                    },
                },
            }),
        ],
    }));
}
  • ¶

    Create c3 Axis

  • ¶

    Create an additional row in the table for the time scale

    var row = table_selection.append('tr');
row.append('td').text("Time")
    .style('font-weight', 'bold')
    .style('background-color', 'lightgray')
    .style('text-align', 'center');
  • ¶

    Create a c3.Axis.x **axis **. c3 axis objects may be created independently from plots for increased flexibility in layout options

    var timeline_axis_example = new c3.Axis.X({
    anchor: <HTMLElement>row.append('td').node(),
    scale: time_scale,
    height: 30,
    tick_count: 4,
});
  • ¶

    Synchronize Zooming

  • ¶

    Setup event handlers so zooming in one of the timeline charts will zoom the other timeline charts.

    timelines.forEach((timeline) => {
    timeline.on('zoom', (extent) => {
        for (let other_timeline of timelines.filter((t) => t !== timeline))
            other_timeline.focus(extent);
        timeline_axis_example.redraw()
    });
});
  • ¶

    Resize the timelines

  • ¶

    Resize the timelines to fit the window

    window.onresize = function () {
    for (let timeline of timelines)
        timeline.resize();
    timeline_axis_example.resize();
}
  • ¶

    Render the timelines!

  • ¶

    Perform the initial rendering of the charts and add them to the global examples array.

    for (let timeline of timelines)
    timeline.render();
timeline_axis_example.render();