BellaDati Technical Documentation : Pie Chart

Pie chart

JSON used as input for Pie chart rendering consists of multiple elements.

Basic structure

{
  "elements": [
    {
      "type": "pie",
      "start-angle": 0,
      "values": [ ... ]
  ]
}

Common elements

NameDescriptionExample
chartId
Chart view identifier. Refer to REST API.
chart_159-NUeNe2yaRv_uO7ao2Bkig
bg_color
Defines the color of the background for the entire chart
#e5e5e5
is_decimal_separator_comma
Determines whether to use comma as decimal separator. [0, 1]1
is_thousand_separator_disabled
Determines whether to use the thousands separator or not. [0, 1]1
tooltip

Defines the basic tooltip settings for the entire chart.

NameDescriptionExample
mouse
Mouse sensitivity2
shadow
[true, false]true
stroke
[0, 1]1
colour
Default font color for tooltips
#202020
background
Default background for tooltips.
"#ffffff"
 

Example

{
	"chartId": "chart_159-NUeNe2yaRv_uO7ao2Bkig",
	"bg_colour": "#e5e5e5",
	"is_decimal_separator_comma": 1,
	"is_thousand_separator_disabled": 1,
	"tooltip": {
	    "mouse": "2",
    	"shadow": true,
	    "stroke": 1,
	    "colour": "#202020",
	    "background": "#ffffff"
	},
	"options": {}
} 

"elements" content

Each object in array elements describe one chart element. In example above we have only one element with type pie, that has start-angle as 0 and contains array with 4 values. Each value object consists of label, tool tip, value, context and highlight. Colours are specified at the end of this pie chart element.

NameDescriptionExample
type
Type of the chart. For pie chart, the value is "pie"pie
start-angle

Starting angle for the first value. "0" means that the first value starts at 90 degrees from the top of the pie

0
values
NameDescriptionExample
value
Numerical value to display12345.4567
tip
Tooltip text to display on mouse hoverThis is tooltip
label
Value label displayed with the dot (optional)This is label
context
If defined, context will be send to the client as event parameter 
 
colours
Array of colors used for each value 
 "elements": [
    {
      "type": "pie",
      "start-angle": 0,
      "values": [
        {
          "label": "Praha",
          "tip": "Praha\n173,935.32584",
          "context": "{\"dataLink\":\"159_-1246808118\",\"identifierQuery\":\"[L_CITY={Praha}]\"}",
          "value": 173935.32
        },
        {
          "label": "Ostrava",
          "tip": "Ostrava\n129,206.78054",
          "context": "{\"dataLink\":\"159_-1285321828\",\"identifierQuery\":\"[L_CITY={Ostrava}]\"}",
          "value": 129206.78
        },
        {
          "label": "Poprad",
          "tip": "Poprad\n49,255.9769",
          "context": "{\"dataLink\":\"159_1174322742\",\"identifierQuery\":\"[L_CITY={Poprad}]\"}",
          "value": 49255.97
        },
        {
          "label": "Brno",
          "tip": "Brno\n74,466.29905",
          "context": "{\"dataLink\":\"159_452775651\",\"identifierQuery\":\"[L_CITY={Brno}]\"}",
          "value": 74466.29
        }
      ],
      "colours": [
        "#4379bd",
        "#b5cb04",
        "#ff4800",
        "#2998ae"
      ]
    }
  ]

Examples

 

Attachments: