Documentation

Charts

Charts are graphical representations of data.

Chart Building

Functions build charts by creating or modifying a chart entity.

Line Chart

Line charts connect series of data points.

Build up a line chart

diafunc.chart("line-chart")
    .line()
    .label("a")
    .label("b")
    .label("c")
    .label("d")
    .label("e")
    .dataSet("example1", "#6fae6f")
    .add("example1", 1)
    .add("example1", 2)
    .add("example1", 2.5)
    .add("example1", 2)
    .add("example1", 1.5)
    .dataSet("example2", "#5a90d6")
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 2);

Area charts are a special form of line charts.

Build up an area chart

diafunc.chart("area-chart")
    .line()
    .area()
    .label("a")
    .label("b")
    .label("c")
    .label("d")
    .label("e")
    .dataSet("example1", "#6fae6f")
    .add("example1", 1)
    .add("example1", 2)
    .add("example1", 2.5)
    .add("example1", 2)
    .add("example1", 1.5)
    .dataSet("example2", "#5a90d6")
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 2);

Bar Chart

Bar charts visualize categorical data with rectangular bars with heights proportional to the values.

Build up a bar chart

diafunc.chart("bar-chart")
    .bar()
    .label("a")
    .label("b")
    .label("c")
    .label("d")
    .label("e")
    .dataSet("example1", "#6fae6f")
    .add("example1", 1)
    .add("example1", 2)
    .add("example1", 2.5)
    .add("example1", 2)
    .add("example1", 1.5)
    .dataSet("example2", "#5a90d6")
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 3)
    .add("example2", 2.5)
    .add("example2", 2);

Pie Chart

Pie charts visualize numerical proportions.

Build up a pie chart

diafunc.chart("pie-chart")
    .pie()
    .label("a")
    .color("#5a90d6")
    .label("b")
    .color("#6fae6f")
    .label("c")
    .color("#d08c5a")
    .label("d")
    .color("#a86fb5")
    .label("e")
    .color("#5b8fae")
    .dataSet("example")
    .add("example", 10)
    .add("example", 30)
    .add("example", 20)
    .add("example", 40)
    .add("example", 15);

The doughnut chart is a special form of pie chart.

Build up a doughnut chart

diafunc.chart("doughnut-chart")
    .pie()
    .doughnut()
    .label("a")
    .color("#5a90d6")
    .label("b")
    .color("#6fae6f")
    .label("c")
    .color("#d08c5a")
    .label("d")
    .color("#a86fb5")
    .label("e")
    .color("#5b8fae")
    .dataSet("example")
    .add("example", 10)
    .add("example", 30)
    .add("example", 20)
    .add("example", 40)
    .add("example", 15);

Polar Chart

Polar charts are similar to pie charts, but each segment has the same angle and the radius of the segment differs depending on the value.

Build up a polar chart

diafunc.chart("polar-chart")
    .polar()
    .dataSet("example")
    .label("a")
    .color("#5a90d6")
    .label("b")
    .color("#6fae6f")
    .label("c")
    .color("#d08c5a")
    .label("d")
    .color("#a86fb5")
    .label("e")
    .color("#5b8fae")
    .add("example", 10)
    .add("example", 30)
    .add("example", 20)
    .add("example", 40)
    .add("example", 15);

Radar Chart

A radar chart is a way of showing multiple data points and the variation between them.

Build up a radar chart

diafunc.chart("radar-chart")
    .radar()
    .label("a")
    .label("b")
    .label("c")
    .label("d")
    .label("e")
    .dataSet("example1", "#6fae6f")
    .add("example1", 1)
    .add("example1", 3)
    .add("example1", 2)
    .add("example1", 2.5)
    .add("example1", 0)
    .dataSet("example2", "#5a90d6")
    .add("example2", 2)
    .add("example2", 1)
    .add("example2", 4)
    .add("example2", 2)
    .add("example2", 1.5);

Bubble Chart

Bubble charts visualize three-dimensional data. Data points are visualized via their coordinates and bubble sizes.

Build up a bubble chart

diafunc.chart("bubble-chart")
    .bubble()
    .dataSet("example1", "#6fae6f")
    .add("example1", 1, 1, 10)
    .add("example1", 2, 2, 30)
    .add("example1", 3, 0, 20)
    .add("example1", 4, 1.5, 50)
    .add("example1", 5, 2.5, 40)
    .dataSet("example2", "#5a90d6")
    .add("example2", 1.5, 1, 10)
    .add("example2", 2.5, 2, 30)
    .add("example2", 3.5, 0, 20)
    .add("example2", 4.5, 1.5, 50)
    .add("example2", 5.5, 2.5, 40);

Scatter Chart

Scatter charts visualize data points on a linear axis.

Build up a scatter chart

diafunc.chart("scatter-chart")
    .scatter()
    .dataSet("example1", "#6fae6f")
    .add("example1", 1, 3)
    .add("example1", 2, 1)
    .add("example1", 3, 2.5)
    .add("example1", 4, 2)
    .add("example1", 5, 4)
    .dataSet("example2", "#5a90d6")
    .add("example2", 1, 3.5)
    .add("example2", 2, 1.5)
    .add("example2", 3, 3)
    .add("example2", 4, 2.5)
    .add("example2", 5, 4.5);

What next?

2D Visualization

Charting Guide