New JavaScript InfoVis Toolkit Visualizations

Posted in: javascript infovis toolkit , visualization

Area Charts

var areaChart = new $jit . AreaChart ({ //id of the container injectInto : 'infovis' , //set animations animate : true , //visualization 'padding' offset : 5 , //labels 'margin' labelOffset : 10 , //show aggregated values showAggregates : true , //show labels showLabels : true , //use gradients for rendering type : 'stacked:gradient' , //label styling Label : { size : 13 , family : 'Arial' , color : 'white' }, //enable tips Tips : { enable : true , onShow : function ( tip , elem ) { tip . innerHTML = "<b>" + elem . name + "</b>: " + elem . value ; } }, //add leftclick handler filterOnClick : true , //add rightclick handler restoreOnRightClick : true });

Bar Charts

var barChart = new $jit . BarChart ({ injectInto : 'infovis' , animate : true , //set orientation vertical or horizontal orientation : 'horizontal' , //bar separation barsOffset : 20 , offset : 10 , labelOffset : 5 , type : 'stacked:gradient' , showAggregates : true , showLabels : true , Label : { size : 13 , family : 'Arial' , color : 'white' }, Tips : { 'enable' : true , 'onShow' : function ( tip , elem ) { tip . innerHTML = "<b>" + elem . name + "</b>: " + elem . value ; } } });

Pie Charts / Rose Diagrams

JSON Data Format

var json = { //category labels 'label' : [ 'label A' , 'label B' , 'label C' , 'label D' ], //each "stack" is described here 'values' : [ { 'label' : 'date A' , 'values' : [ 20 , 40 , 15 , 5 ] }, { 'label' : 'date B' , 'values' : [ 30 , 10 , 45 , 10 ] }, { 'label' : 'date E' , 'values' : [ 38 , 20 , 35 , 17 ] }, { 'label' : 'date F' , 'values' : [ 58 , 10 , 35 , 32 ] }, { 'label' : 'date D' , 'values' : [ 55 , 60 , 34 , 38 ] }, { 'label' : 'date C' , 'values' : [ 26 , 40 , 25 , 40 ] }] };

Please enable JavaScript to view the comments powered by Disqus.

Disqus

Today I'd like to announce the addition of three new components in the next version of the JavaScript InfoVis Toolkit : Area Charts, Bar Charts and Pie Charts. I hope these components will be widely used among the JIT user community. All components support a simpler JSON format that I'll describe later in this post. These components are easy-to-use, yet very powerful: they support live data updates and multi valued data as we will see next.The Area Chart is a useful component to track the evolution of a bunch of categories at the same time. In addition, the aggregation of the values of all these categories is also presented in a meaningful way. This component supports live updates (as you'll see in the first seconds of the video), filtering/restoring categories, tooltips and a legend. As usual this is all JavaScript:The visualization is instanciated this way:Additionally this visualization allows programmatic category filtering, JSON updating, selecting you own colors, etc.Bar Charts are similar to Area Charts, but they support additional styling and positioning. You can use vertical or horizontal Bar Charts. Here's an example:This object is created the same way you create an AreaChart:Finally there's the Pie Chart. But this is no regular Pie Chart. It can support simple data as well as more complex data. You can add multiple categories to this Pie Chart, combining them into something more like a Stacked Rose Diagram. They also support live updates as you'll see in the first seconds of the video:The JSON data format for these visualizations had to depict something like a contingency table, and so I decided to adopt something like this:I hope you find these visualizations useful, and if you can't wait for the next version to come out to use these charts you can always build the project from GitHub . Here's a wiki with some instructions on how to make your own build of the library while you're waiting for an official release. If you ever find bugs please use the issue tracker at GitHub . If you need help or have any questions you can always go to the Google Group . Well, this got long enough. Hope you enjoyed it!