Highcharts Bubble Chart?

  

I am attempting to create a scatter graph which has eg date on the x axis, price on the y axis, and score determining the size of the bubble. This is possible in Highcharts, using their bubble chart. 

When trying to integrate with Outsystems, DataPointInit only takes two metrics, label (date) and value (price), along with the data series, so I am unable the pass the the third dimension (score) through into the chart.

I have attempted creating my own action similar to DataPointInit, but with three dimensions, however the data is converted back to two dimensions on being passed to the chart widget. 

I have also tried writing the javascript using a RunJava action to build the chart from scratch, which doesn't seem to do anything (copied and pasted as a test from here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bubble/) including putting the html to install Highcharts, and the html to define the container on the page as an expression with escape content set to no.

Any help/thoughts/suggestions to assist me on this problem would be greatly appreciated!

Thanks,

Zoe

Hi Zoe,

Have you tried using the advanced setting JSON?

You can override everything in the Charts configuration using this, take a look here (scroll all the way down).

 You can even create a structure from the JSON (P10) directly and populated step by step

The bubble chart you see is configured like this:

SyntaxEditor Code Snippet

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"{

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts bubbles with radial gradient fill'
        },

        xAxis: {
            gridLineWidth: 1
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },

        series: [{
            name: 'Series 1',
            data: [
                [9, 81, 63],
                [98, 5, 89],
                [51, 50, 73],
                [41, 22, 14],
                [58, 24, 20],
                [78, 37, 34],
                [55, 56, 53],
                [18, 45, 70],
                [42, 44, 28],
                [3, 52, 59],
                [31, 18, 97],
                [79, 91, 63],
                [93, 23, 23],
                [44, 83, 22]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }, {
            name: 'Series 2',
            data: [
                [42, 38, 20],
                [6, 18, 1],
                [1, 93, 55],
                [57, 2, 90],
                [80, 76, 22],
                [11, 74, 96],
                [88, 56, 10],
                [30, 47, 49],
                [57, 62, 98],
                [4, 16, 16],
                [46, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }]

    }")


Cheers

Excellent, this works!

Just a final point: Is it possible to use the data from an entity rather than hardcoding it in the AdvancedFormat_Init? To do the above, I set the source data point list to a blank list. I could pass a data point list through but it would only have two dimensions, and any other list passed through gets converted to a Data Point list, with two dimensions.

Thanks!

Hi Zoe,

In this case I don't think so since each data point (as you also mention) has 3 values (x,y,z).

However you should be able to create a structure to support this, populate the data based on a query and then dynamically create the JSON. For the mandatory datasource of the chart use an empty datapoint list.

Cheers