Monday, March 24, 2014

NextReports: Creating a bubble chart

NextCharts can create a bubble chart from version 1.1. There are some minor differences between this chart and other types of charts.

First, the labels property uniquely identifies every bubble on the chart. You won't see the labels on X axis as on other charts, because values on X axis now have data meaning and must be computed similar with those on Y axis. Label values will be seen on tooltip if the template tooltip message contains a markup #label.

Second, the data property will contain exactly three arrays with values for X, Y and Z dimensions. These values can be seen in tooltip if #x, #val and #z markups are used.

Third, there is a new categories property with Strings that identify in which category falls every bubble. From this property the legend is computed (all unique categories). Category value can be seen inside tooltip if #c markup is used.

Let's create a bubble chart which shows the correlation between Life Expectancy (X), Fertility Rate (Y) and Population (Z) for a specific country (label) from a region (category).

JSON is like the following:
{"data":[[80.66,79.84,78.6,72.73,80.05,72.49,68.09,81.55,68.6,78.09],
         [1.67,1.36,1.84,2.78,2,1.7,4.77,2.96,1.54,2.05],
         [33739900,81902307,5523095,79716203,61801570,73137148,31090763,7485600,141850000,307007000]
        ],    
 "labels":["CAN","DEU","DNK","EGY","GBN","IRN","IRQ","ISR","RUS","USA"], 
 "categories":["North America","Europe","Europe","Middle East","Europe","Middle East","Middle East","Middle East","Europe","North America"],
 "color":["#004CB3","#A04CB3","#7aa37a"],                           
 "alpha":0.6, 
 "showGridX":true, 
 "showGridY":true,    
 "colorGridX":"rgb(0,198,189)", 
 "colorGridY":"rgb(0,198,189)", 
 "message":"#label< br >Life Expectancy: #x< br >Fertility Rate: #val< br >Region: #c< br >Population: #z", 
 "tickCount":4,
 "title":{"text":"Population Correlation", "font":{"weight":"bold", "size":14, "family":"sans-serif"}, "color":"blue", "alignment":"center"},
 "labelOrientation":"horizontal",         
 "type":"bubble",         
 "yData":{"font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"blue"},
 "xData":{"font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"blue"},
 "yLegend":{"text":"Fertility Rate","font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"#993366"},
 "xLegend":{"text":"Life Expectancy","font":{"weight":"bold","size":14,"family":"sans-serif"}, "color":"#993366"},
}
Result is the following chart:

When we move the mouse over a bubble element we will see all data defined in tooltip template message:


To use NextReports Designer (from 7.1 version)  to create such chart you must use a simple convention. You have to select on X axis the labels column (Country), and on Y axis you should add the four dimensions of the chart X, Y, Z and category (in this order).


No comments: