Tuesday, February 25, 2014

NextCharts: Combo Bar Line Charts

NextCharts supports bar and stacked bar combo charts. This means there can be more series inside a chart some bars / stacked bars, some lines.

A simple stacked bar json like:
{
   "type":"stackedbar",
   "style":"glass", 
   "data":[[16,66,24,30,80,52],[48,50,29,60,60,58],[30,40,28,52,34,50]],  
   "labels":["JAN","FEB","MAR","APR","MAY","JUN"], 
   "color":["#004CB3","#A04CB3","#7aa37a"],
   "legend":["2011","2012","2013"],
   "alpha":0.6, 
   "showGridX":true, 
   "showGridY":true, 
   "colorGridX":"rgb(0,198,189)", 
   "colorGridY":"rgb(0,198,189)", 
   "message":"Value #val from #total", 
   "tickCount":4,
   "title":{
        "text":"Financial Analysis",
        "font":{"weight":"bold", "size":16, "family":"sans-serif"},
        "color":"blue",
        "alignment":"center"
   },        
   "xData":{
        "font":{"weight":"bold", "size":14,"family":"sans-serif"},
        "color":"blue"
   },                          
   "yData":{
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"blue"
   },
   "xLegend":{
        "text":"Month",
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"#993366"
   },"
   "yLegend":{
        "text":"Price",
        "font":{"weight":"bold","size":14,"family":"sans-serif"},
        "color":"#993366"
   }
}
will look like:

To add combo lines (2 lines in this example)  we should add some properties to json object:
{
...
 "lineData":[[31.33, 52, 27, 47.33, 74.66, 53.33],[100, 120, 53, 190, 40, 130]],
 "lineColor":["#270283", "#CC6633"],
 "lineLegend":["Average", "Profit"],
...
}
With these, we obtain a combo chart like:


2 comments:

Carlos Costa said...

Hello,
Mihai this project you are developing seems very interesting. In this example you provide could it be possible to attach a link to the chart?
A tablet user could touch the chart and would be taken to another webpage with further charts, tables or interpretations of the values.
How could this be implemented?
Thanks!

Mihai Dinca-Panaitescu said...

Hi Carlos.
Our product NextReports Server has a list of dashboards. Chart click is used by drill-down features: clicked value is passed to the next chart in drill. That's why, right now, there is no click on chart to redirect to an entire dashboard.