C3js is a wrapper around D3js, that provides simple, out-of-the-box charts. Visit c3js.org for more.
Supported.
An object with each key corresponding to the line label, and a list of integer values.
{
"line1": [1, 2, 10, 15],
"line2": [2, 30, 40, 55]
}An object with each key corresponding to the line label, and a list of its values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}An object with each key corresponding to the line label, and a list of its values. A dates key must be specified, with a list of dates.
{
"dates": ["2016-08-22", "2016-09-01", "2016-09-11", "2016-09-21"],
"line1": [1, 2, 3, 4],
"line2": [2, 10, 3, 10],
"line3": [2, 10, 20, 40]
}An object with each key corresponding to the line label, and a list of integer values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}An object with each key corresponding to the line label, and an an integer value.
{
"data d": 16,
"data e": 77,
"data b": 87,
"data c": 41,
"data a": 15
}An object with each key corresponding to the line label, and a list of integer values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}An object with each key corresponding to the line label, and an an integer value.
{
"data d": 16,
"data e": 77,
"data b": 87,
"data c": 41,
"data a": 15
}An object with each key corresponding to the line label, and a list of its values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}An object with each a single key called data and an integer value corresponding to the current gauge value.
{
"data": 40
}An object with each key corresponding to the line label, and a list of integer values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}An object with each key corresponding to the line label, and a list of integer values.
{
"bar1": [1, 2, 30, 12, 100],
"bar2": [2, 4, 12, 50, 80],
}Plotly is an extremely diverse, powerful and now open source charting library that supports a wide range of formats, including webGL and 3d charting/visualization. See https://plot.ly/ for more.
Supported.
All values are specified using JSON configuration specified by the API. See https://plot.ly/javascript/ for more.
Usually, the format is at the very least, something like the below json. You can also see more examples that have been tested with jsondash in the plotly json configs directory. Typically, you can format it exactly as recommended by Plotly API, except converted to JSON format (most javascript can be converted 1:1 using JSON.stringify for example).
This means configuration that uses javascript functions are not accepted; these would need to be pre-computed on the server side instead, and then the results dumped to JSON.
{
"data": [],
"layout": {}
}D3js is a powerful SVG based "dynamic document" drawing library that can create just about any imaginable visualization. Visit d3js.org for more.
A recursive json config that uses name and children as its main keys of arbitrary depth. Additional keys can be added as needed.
{
"name": "chartname",
"children": [
{
"name": "childelements",
"children": []
}
]
}A recursive json config that uses name and children as its main keys of arbitrary depth. Additional keys can be added as needed.
{
"name": "chartname",
"children": [
{
"name": "childelements",
"children": []
}
]
}A recursive json config that uses name and children as its main keys of arbitrary depth. Additional keys can be added as needed.
{
"name": "chartname",
"children": [
{
"name": "childelements",
"children": []
}
]
}An array of arrays, where each array element contains 2 items: the x, y coordinates for a given point.
[
[2, 10], [100, 30], [300, 10], [320, 101]
]A recursive json config that uses name and children as its main keys of arbitrary depth. Additional keys can be added as needed.
{
"name": "chartname",
"children": [
{
"name": "childelements",
"children": []
}
]
}One-off, simple, ad-hoc displays.
Not supported.
No schema; you can serve whatever kind of page you want. Similar to an iframe, except this will load the source directly into the page. Note: some unintended side effects of your dashboard may occur (such as css style overrides), so YMMV. Alternatively, you can use the iframe option.
No schema; you can load whatever page you want. This will not affect the dashboard, unlike the custom option, but you will have limited access to the contents of the iframe (typically not a concern.)
Any number, positive or negative. Prefixes, such as currencies, are also allowed (there is no real limit to the string, but it is typically shown as a number, and styled accordingly).
"$12,300""-12,300"2302Supported.
A table with automatic styling, sorting, filtering and pagination. Format is a list of objects, where values can be any key and value, but all elements in the list must have matching key names.
[
{
"name": "foo",
"age": 30
},
{
"name": "bar",
"age": 20
}
]An interactive timeline creator.
Not supported.
A timeline using timeline.js. Format requirements are available here.
VennJS is a wrapper for d3js that provides an easy to use api for Venn and Euler diagrams. Visit https://github.com/benfred/venn.js for more.
Not supported.
A list of objects with keys sets, and size, where set is a list of set names, and size is relative size of the circle.
[
{"sets": ["A"], "size": 12},
{"sets": ["B"], "size": 12},
{"sets": ["A", "B"], "size": 2},
]Sparklines are "mini" charts that can be used inline. They most often make sense as complementing a larger context, for example, a paragraph of text. See http://omnipotent.net/jquery.sparkline/ for more.
Not supported.
An array of arrays, where each element contains two integers, representing x/y positions.
[
[1, 2], [2, 10], [10, 30]
]An array of arrays, where each element contains two integers, representing x/y positions.
[
[1, 2], [2, 10], [10, 30]
]...
An array of integers representing up and down positions.
[
[20, 40, 30, 10]
]...
An array of integers, representing percentages.
[
[20, 40, 30, 10]
]...