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).

NextCharts: Tooltip Messages

NextCharts can have a tooltip message with some markups that are automatically replaced at runtime. JSON property is called message.

The most important markup is #val which represents the actual value on Y axis. If you select for tooltip message Value #val you will see tooltips like in following chart:

Another markup is #x which represents the actual value of X label.
A message like #x<br>Value #val will show the following (here <br> markup is used to start a new line) :

Other markups have meaning just for specific chart types. For example, #total means the total value of all Y values and it has meaning for stacked bars, horizontal stacked bars and pie charts. A message like Category #x<br>Value #val from #total will show the following on a pie chart:

For pie charts there is another markup #percent which shows the percent from total of the current slice value. A message like Category #x<br>Value #val from #total<br>#percent% of 100% will show as:

To format actual Y value, if it is not a simple integer, you can use a JSON property like:

"tooltipPattern" : {
    "decimals": 2,
    "decimalSeparator" : ".",
    "thousandSeparator" : ","
}

From next version of NextReports (7.1) designer will have a new tooltip message property to allow customization like showing before, instead of some default values.