Highcharts
Highcharts is a powerful charting library that supports many different ways of visualising data. Use this if you're trying to visualise in a way that isn't supported in the other visualisations. Bear in mind that Highcharts can be quite difficult to configure correctly, and that only the core Highcharts library is supported. See the 'Known Limitations' section for full compatibility information.
Supported Sizes
- 1 x 1
- 2 x 1
- 1 x 2
- 2 x 2
- 3 x 2
- 4 x 2
Known Limitations
Parameters
The payload for this visualisation is based on the structure you would use if you were using Highcharts in your own JavaScript. For more details, see the official Highcharts documentation.
One thing to note is that it is JavaScript, not JSON:
{
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
series: {
// YOUR DATA POINTS HERE
}
}
See the Highcharts options reference for complete documentation and view their chart demo gallery to get an idea of the types of charts you can create in Geckoboard.
Push API Usage
For Push widgets, the JavaScript definition needs to be converted to a string and then passed in as the value to a key called highchart
. Please note that all strings inside the JavaScript payload need to be escaped.
{
"api_key": "YOUR_API_KEY",
"data": {
"highchart": "{\"chart\": {\"renderTo\": \"container\", ...}, \"series\": {...}"
}
}
Here’s a quick example of how to push some data via cURL:
curl http://push.geckoboard.com/v1/send/[WIDGET ID] -d '{"api_key":"[API KEY]", "data":{"highchart": "{chart:{style: {color: \"#b9bbbb\"},renderTo:\"container\",backgroundColor:\"transparent\",lineColor:\"rgba(35,37,38,100)\",plotShadow: false,},credits:{enabled:false},title:{style: {color: \"#b9bbbb\"},text:\"Monthly Average Temperature\"},xAxis:{categories:[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"]},yAxis:{title:{style: {color: \"#b9bbbb\"}, text:\"Temperature\"}},legend:{itemStyle: {color: \"#b9bbbb\"}, layout:\"vertical\",align:\"right\",verticalAlign:\"middle\",borderWidth:0},series:[{color:\"#108ec5\",name:\"NewYork\",data:[17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]},{color:\"#52b238\",name:\"Berlin\",data:[13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0]},{color:\"#ee5728\",name:\"London\",data:[11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]}]}"}}'