111
Views
7
Comments
Solved
Highchart Bubble Chart- Reactive
Application Type
Reactive

Hi Everyone , I'm trying to create Bubble Chart In OutSystems Reactive .
But its popping up with the Following Error .

I tried same with Traditional , But the Chart was appeared as expected .
With the Following High-chart Json

"colors: ['#269E54'],
xAxis : {
categories: ['JAN','FEB','MAR','APR','MAY','JUNE'],
labels: {
            style: {
                color: '#269E54',
                fontWeight:'bold'
            }
        }
},
 series: [ {marker: {
                enabled: true
            },
        pointWidth: 15,
        color : '#71BE45',
        type: 'bubble',
        Opacity:0.1,
        name: 'Plan',
        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: {
                enabled: true
            },
        type: 'bubble',
        name: 'Actual',
        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]
        ]
    }],

plotOptions: {
    series: {
        showInLegend: false,
     fillOpacity:0.1

    },
      tooltip: {
        borderRadius: 0,
        borderWidth: 0,
        borderColor: 'white'
    }

}"


Thanks in Advance !!

2021-06-02 20-50-04
Márcio Carvalho
Solution

You need to do this.

Use the required script

And you have to put all the scripts there.

From the fiddler that I shared with you

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bubble

I will share with you my module as an example.

You can have a look at this link too.

https://marcio-carvalho4.outsystemscloud.com/bubblechart/Screen1?_ts=637769840194626046

Regards,

Márcio

bubblechart.oml
UserImage.jpg
Sathish Kumar R

Hi Marcio Carvalho , yes i came across
https://www.highcharts.com/demo/bubble this link
and tried to replicate in Reactive
But still Same Error is popped Up .

But its working Fine in Traditional.

2021-06-02 20-50-04
Márcio Carvalho

I think what is missing is a script of the highcharts for the bubbles module, that's what I think. I did a test and it happened the same to me. Then I look at my console and it says this. 

But still, it should work.

UserImage.jpg
Sathish Kumar R
2021-06-02 20-50-04
Márcio Carvalho
Solution

You need to do this.

Use the required script

And you have to put all the scripts there.

From the fiddler that I shared with you

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bubble

I will share with you my module as an example.

You can have a look at this link too.

https://marcio-carvalho4.outsystemscloud.com/bubblechart/Screen1?_ts=637769840194626046

Regards,

Márcio

bubblechart.oml
UserImage.jpg
Sathish Kumar R
2018-04-14 22-30-16
Claudio Licht

THANK you very much for your example...

I got something similar working ...

My issue is when I try to replace the json (series:  {data etc...) with a parameter with serialized json that came from a list ... if i literaly copy/paste the serialized string instead of the parameter and it is "hard coded" the bubbles work ... but when I try to pass that string as a text variable into the javascript, nothing shows up (no errors in inspect either)

So in other words, if you could possibly show an example of how you would pass the series data from outside the javascript as a parameter that would be GREAT !!!

Thank you!
Claudio

 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.