A bubble chart helps to plot data set with two to four dimensions. Two of them can be represented by x-y position of bubbles whereas the rest two can be represented by size and style of bubbles. In this library Bubbles charts are Scatter charts with option bubbles:true inside data-opts. Scatter Chart documentation can be consulted for the purpose. All configuration options are applicable as of Scatter Chart. FillStyles of bubbles are taken from 'color' inside sets if present or from bubblesFillColor inside data-opts if present or from data-colors, themes or defaults to '#000'. Label over bubbles are letters inside sets as they are in scatter chart. Label position and styles can be adjusted by data-text-opts and data-text-stroke-opts configurations.
| 4.2 Simple Bubble Chart with labels and styles | |
<canvas class="chartlet" data-type="scatter" data-range="0 10" data-sets="[2 2 'DOT' '#F00' 10] [4 4 'text' '#0F0' 20] [6 6 '*' '#00F' 30] [8 8 '-' '#FFA500' 40]" width="200" height="200" data-text-opts="color:#000 offsetY:3" data-text-stroke-opts="color:#FFF offsetY:4" data-opts="alpha:0.5 xAxis:6 yAxis:6 bubbles:true">
</canvas>
|
|
| 4.3 Bubble Chart with Text Stroke and z axis as region population | |
<canvas class="chartlet" data-type="scatter" data-range-x="65 85" data-range-y="1 5" data-sets="
[80.66 1.67 'CAN' 'rgba(24, 100, 214, 1)' 33739900]
[79.84 1.36 'DEU' 'rgba(208, 34, 40, 1)' 81902307]
[78.6, 1.84 'DNK' 'rgba(208, 34, 40, 1)' 5523095]
[72.73 2.78 'EGY' 'rgba(215, 118, 7, 1)' 79716203]
[80.05 2, 'GBR' 'rgba(208, 34, 40, 1)' 61801570]
[72.49 1.7, 'IRN' 'rgba(215, 118, 7, 1)' 73137148]
[68.09 4.77 'IRQ' 'rgba(215, 118, 7, 1)' 31090763]
[81.55 2.96 'ISR' 'rgba(215, 118, 7, 1)' 7485600]
[68.6, 1.54 'RUS' 'rgba(208, 34, 40, 1)' 141850000]
[78.09 2.05 'USA' 'rgba(24, 100, 214, 1)' 307007000]" width="300" height="200" data-text-opts="color:#000 offsetY:3 font:'10px sans-serif'" data-text-stroke-opts="alpha:1 color:#FFF offsetX:1 offsetY:4 font:'10px sans-serif bold'" data-opts="bubblesAlpha:0.7 xAxis:6 yAxis:6 bubbles:true">
</canvas>
|
|
| 4.4 Bubble Chart with Color Range and Static Bubbles Radius | |
<canvas class="chartlet" data-type="scatter" data-range-x="65 85" data-range-y="100 500" data-color-range="'#ffff00' '#F00'" data-sets="
[80 167 '' '' 120]
[79 136 '' '' 130]
[78 184 '' '' 50]
[72 278 '' '' 230]
[81 200 '' '' 210]
[72 170 '' '' 100]
[68 477 '' '' 80]" width="300" height="200" data-opts="bubblesAlpha:0.7 bubblesRadius:23 bubbles:true">
</canvas>
|
|