Infoviz
A lightweight JavaScript library for creating beautiful, interactive data visualizations. Supports multiple chart types with flexible customization options.
Install / Use
/learn @nocoo/InfovizREADME
InfoViz is an information visualization library based on Raphaël. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
By the way, InfoViz supports iOS devices, include the new iPad with retina display.
Everything can be customized
You may overwrite almost every visual style in InfoViz charts. There's few magic numbers in InfoViz code, when we need a number, we add an option for you to overwrite. Transparent background? Sure! Reverse color? Sure! Black and white? Sure!
See Configurations to find out how.
Introducing v0.3.x
We hate to change client APIs, but there're some changes you may have to do in your side to make it work with v0.3.x:
New Module System
Since v0.3.x, InfoViz use SeaJS to seperate visualization controls into modules, you may use whatever you like, just make sure it supports CMD spec. Instead of load every control, it will load controls on demand. It's a tradeoff between HTTP connections and one big big JavaScript file. We hope our module system could work well in most cases.
To use SeaJS module system:
<script src="./js/raphael.min.js"></script>
<script src="./js/sea.min.js"></script>
<script>
;(function() {
seajs.use([ './js/infoviz' ], function(InfoViz) {
// Call InfoViz.chart here.
});
})();
</script>
or:
<script src="./min/raphael.min.js"></script>
<script src="./min/sea.min.js"></script>
<script>
;(function() {
seajs.use([ './min/infoviz' ], function(InfoViz) {
// Use InfoViz.chart here.
});
})();
</script>
After you run the make command.
jQuery is no longer needed
InfoViz.chart(
'i_linechart', // Give DOM element an id, and change this line from jQuery selector to id string, without #
'linechart',
{
'vertical_axis_name': 'Vertical',
'horizontal_axis_name': 'Horizontal',
'horizontal_field': 'F2',
'vertical_field': 'F1',
'data': {
// some data
}
}
);
Sorry for the inconvenient, but we think it was worth it.
1 AxisCharts
1.1 LineChart
LineChart
A LineChart has a enumerable as horizontal field, and a value field as vertical field.
Demo: Click Here
InfoViz.chart(
'i_linechart',
'linechart',
{
'vertical_axis_name': 'Vertical',
'horizontal_axis_name': 'Horizontal',
'horizontal_field': 'F2',
'vertical_field': 'F1',
'data': {
'line1': {
'name': 'China',
'data': [
{ 'F1': 1, 'F2': 'A', 'F3': 3 },
{ 'F1': 42, 'F2': 'B', 'F3': 6 },
{ 'F1': 7, 'F2': 'C', 'F3': 9 },
{ 'F1': 110, 'F2': 'D', 'F3': 12 }
]
},
'line2': {
'name': 'Unite States',
'data': [
{ 'F1': 13, 'F2': 'A', 'F3': 15 },
{ 'F1': 10, 'F2': 'B', 'F3': 12 },
{ 'F1': 72, 'F2': 'C', 'F3': 9 },
{ 'F1': 1, 'F2': 'D', 'F3': 3 },
{ 'F1': 4, 'F2': 'E', 'F3': 6 }
]
},
'line3': {
'name': 'Unite Kingdom',
'data': [
{ 'F1': 19, 'F2': 'A', 'F3': 15 },
{ 'F1': 20, 'F2': 'B', 'F3': 12 },
{ 'F1': 11, 'F2': 'D', 'F3': 3 },
{ 'F1': 42, 'F2': 'E', 'F3': 6 }
]
},
'line4': {
'name': 'Italy',
'data': [
{ 'F1': 29, 'F2': 'A', 'F3': 15 },
{ 'F1': 70, 'F2': 'B', 'F3': 12 },
{ 'F1': 42, 'F2': 'C', 'F3': 9 },
{ 'F1': 51, 'F2': 'D', 'F3': 3 },
{ 'F1': 22, 'F2': 'E', 'F3': 6 }
]
},
'line5': {
'name': 'Russia',
'data': [
{ 'F1': 9, 'F2': 'A', 'F3': 15 },
{ 'F1': 90, 'F2': 'B', 'F3': 12 },
{ 'F1': 92, 'F2': 'C', 'F3': 9 },
{ 'F1': 52, 'F2': 'E', 'F3': 6 }
]
}
}
},
{ 'legend': { 'margin-top': 0 } }
);
AreaChart
Some people may want to use an AreaChart to visualize their LineChart data. You can turn on area-enabled option in linechart configuration to enable it.
Demo: Click Here
InfoViz.chart(
'i_linechart',
'linechart',
{
'vertical_axis_name': 'Vertical',
'horizontal_axis_name': 'Horizontal',
'horizontal_field': 'F2',
'vertical_field': 'F1',
'data': {
// ... Same with Normal LineChart
}
},
{ 'legend': { 'margin-top': 0 }, 'linechart': { 'area-enabled': true } }
);
LineChart/AreaChart with right axis
LineChart now supports right axis, which provides second vertical field. Lines using right axis will be visualized as dotted lines.
Demo: Click Here
To enable right axis in LineChart or AreaChart:
InfoViz.chart(
'i_linechart5',
'linechart',
{
'vertical_axis_name': 'Left',
'vertical_axis_name_right': 'Right', // Set right axis name here
'horizontal_axis_name': 'Horizontal',
'horizontal_field': 'F2',
'vertical_field': [ 'F1', 'F3'], // Change single field name to array
'tooltip_title': 'InfoViz {F2}',
'tooltip_content': 'left: {F1}, right: {F3}',
'data': {
'line1': {
'name': 'China(left)',
'axis': 0, // Set axis index here
'data': [
{ 'F1': 1, 'F2': 'A', 'F3': 3 },
{ 'F1': 42, 'F2': 'B', 'F3': 6 },
{ 'F1': 7, 'F2': 'C', 'F3': 9 },
{ 'F1': 110, 'F2': 'D', 'F3': 12 }
]
},
'line2': {
'name': 'U.S.(left)',
'axis': 0, // Set axis index here
'data': [
{ 'F1': 13, 'F2': 'A', 'F3': 15 },
{ 'F1': 10, 'F2': 'B', 'F3': 12 },
{ 'F1': 72, 'F2': 'C', 'F3': 9 },
{ 'F1': 1, 'F2': 'D', 'F3': 3 },
{ 'F1': 4, 'F2': 'E', 'F3': 6 }
]
},
'line3': {
'name': 'U.K.(left)',
'axis': 0, // Set axis index here
'data': [
{ 'F1': 19, 'F2': 'A', 'F3': 15 },
{ 'F1': 20, 'F2': 'B', 'F3': 12 },
{ 'F1': 11, 'F2': 'D', 'F3': 3 },
{ 'F1': 42, 'F2': 'E', 'F3': 6 }
]
},
'line4': {
'name': 'Italy(right)',
'axis': 1, // Set axis index here
'data': [
{ 'F1': 29, 'F2': 'A', 'F3': 6 },
{ 'F1': 70, 'F2': 'B', 'F3': 10 },
{ 'F1': 42, 'F2': 'C', 'F3': 16 },
{ 'F1': 51, 'F2': 'D', 'F3': 5 },
{ 'F1': 22, 'F2': 'E', 'F3': 12 }
]
},
'line5': {
'name': 'Russia(right)',
'axis': 1, // Set axis index here
'data': [
{ 'F1': 9, 'F2': 'A', 'F3': 4 },
{ 'F1': 90, 'F2': 'B', 'F3': 6 },
{ 'F1': 92, 'F2': 'C', 'F3': 12 },
{ 'F1': 52, 'F2': 'E', 'F3': 4 }
]
}
}
},
{
'linechart': { 'area-enabled': true },
'legend': { 'margin-top': 0 },
'grid': { 'enable-right-axis': true } // Turn this option on
},
function(info) { console.log(info); }
);
1.2 BarChart
A BarChart has a enumerable as horizontal field, and a value field as vertical field.
Demo: Click Here
InfoViz.chart(
'i_barchart',
'barchart',
{
'vertical_axis_name': 'Vertical',
'horizontal_axis_name': 'Horizontal',
'horizontal_field': 'F2',
'vertical_field': 'F1',
'data': {
'bar1': {
'name': 'China',
'data': [
{ 'F1': 1, 'F2': 'A', 'F3': 3 },
{ 'F1': 42, 'F2': 'B', 'F3': 6 },
{ 'F1': 7, 'F2': 'C', 'F3': 9 },
{ 'F1': 110, 'F2': 'D', 'F3': 12 }
]
},
'bar2': {
'name': 'Unite States',
'data': [
{ 'F1': 13, 'F2': 'A', 'F3': 15 },
{ 'F1': 10, 'F2': 'B', 'F3': 12 },
{ 'F1': 72, 'F2': 'C', 'F3': 9 },
{ 'F1': 1, 'F2': 'D', 'F3': 3 },
{ 'F1': 4, 'F2': 'E', 'F3': 6 }
]
},
'bar3': {
'name': 'Unite Kingdom',
'data': [
{ 'F1': 19, 'F2': 'A', 'F3': 15 },
{ 'F1': 20, 'F2': 'B', 'F3': 12 },
{ 'F1': 11, 'F2': 'D', 'F3': 3 },
{ 'F1': 42, 'F2': 'E', 'F3': 6 }
]
