Tuesday, 25 February 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:


No comments:

Post a Comment