Log in to AnswerLog in to Follow
2021-02-16 08-16-49
Shweta Gedam
Champion
202Views
6Comments
Solved
How to pass local variable into high charts json text
Question

Hi, 

I am using a line chart where I have to show dynamic values on the x-axis and y-axis for the tick intervals depending on the data retrieved. 

So, I'm writing high charts json text in the Advanced format property. 

It works when I hardcode any value like 

X-axis :{

step:2

}

But I don't have to hardcode it, it should be dynamically calculated value which I am storing in to local variable in preparation. 

Please help on this! 

0
0
18 Jun 2020

Hi Shweta,


Are you doing this in XAxisJSON or the HighchartsJSON properties of the Chart Widget.

These are just regular Text attributes, so you can do any text manipulations that you like.  So you can concatenate literals with variables with the + sign.


So that would be something like 

" X-axis :{ 

    step: " + localvariable + " 

   } "


I must say, though,  I don't really recognise your example json as correct syntax for highcharts, but probably you just quickly put something in the post.  For starters, there's no hyphen between X and axis, and I don't see a step property for xAxis, just tickInterval and labels.step.


Hope this helps,

Dorine

1
0
18 Jun 2020
2021-02-16 08-16-49
Shweta Gedam
Champion

Dorine Boudry wrote:

Hi Shweta,


Are you doing this in XAxisJSON or the HighchartsJSON properties of the Chart Widget.

These are just regular Text attributes, so you can do any text manipulations that you like.  So you can concatenate literals with variables with the + sign.


So that would be something like 

" X-axis :{ 

    step: " + localvariable + " 

   } "


I must say, though,  I don't really recognise your example json as correct syntax for highcharts, but probably you just quickly put something in the post.  For starters, there's no hyphen between X and axis, and I don't see a step property for xAxis, just tickInterval and labels.step.


Hope this helps,

Dorine


Thanks Dorine,

 It solved my problem but it's only working after i provide values above 10 only for Y-axis tick interval. It shows intervals according to it if it is less than 10. 

It would be great if you can suggest something on this.

0
0
20 Jun 2020

Follow this example! I generate my data from data base. (PS.: This example it's a line chart with 3 lines, but is the same for 1 line.



It's to Reactive, but if you are working on Web Traditional, in your preparation, you will GETDATA (the data from first Image that I show you, and after you just need to do what I have into OnInitialize (next image)

NOTE: You never make a flow like that, I just edited it to fit the image.

If you only want one line you don't have to make the Appends, the data comes straight, if you have multiple lines you have one append for each line. Now I will show you what I have in each action / function.

Since I have a chart with three lines, I have this twice more.


Since I have a chart with three lines, I have this twice more.


This action has to go to the References, to the OutSystems Charts module.



What each variable is (Attention, these are structures since they come from the OutSystems Charts module)






I hope this information helps you.


Cheers

0
0
19 Jun 2020

Hi Shweta,

can you share an oml of what you are doing, it's hard to know what's wrong from such a brief description.

maybe you are doing something different in your code if less than 10, are you sure it is the value you think it is ?


Dorine

0
0
20 Jun 2020

Hi Guys,

Please check my script :

var data = "{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}";

Highcharts.chart('ChartContainer', {

chart: {

            type: 'pie',

            spacingBottom: 5

        },

        credits: { enabled: false },

        title:"",

        tooltip: {

            enabled: true,

            formatter: function() {

                            return this.point.tooltip;

                    }

        },

        plotOptions: {

            pie: {

                dataLabels: {

                    enabled: true,

                    formatter: function() {

                            return this.point.name + ': ' + this.point.y;

                    }

                },

                showInLegend: true,

                stickyTracking: false,          

                point: {events: {legendItemClick: function(event) {return false;}}}

            }

        },

        legend: {   floating: false,

                    layout: 'horizontal',

                    align: 'center',

                    verticalAlign: 'bottom'

        },

        series: [{name: ' ', data: ["+data+"]}]


});

Its working fine when i passed static value to data series.

series: [{name: ' ', data: [{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}]}]

This is script i need to pass dynamic data is series data. I am trying with above code but its fails.

please data variable initialize in first row and assign in series data which is in las row.

Also i am trying with list variable but its also failed.

So please give solution how to solve this with the above script using list variable or using JavaScript define variable.   

0
0
05 Oct 2020

Swapnil Shinde wrote:

Hi Guys,

Please check my script :

var data = "{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}";

Highcharts.chart('ChartContainer', {

chart: {

            type: 'pie',

            spacingBottom: 5

        },

        credits: { enabled: false },

        title:"",

        tooltip: {

            enabled: true,

            formatter: function() {

                            return this.point.tooltip;

                    }

        },

        plotOptions: {

            pie: {

                dataLabels: {

                    enabled: true,

                    formatter: function() {

                            return this.point.name + ': ' + this.point.y;

                    }

                },

                showInLegend: true,

                stickyTracking: false,          

                point: {events: {legendItemClick: function(event) {return false;}}}

            }

        },

        legend: {   floating: false,

                    layout: 'horizontal',

                    align: 'center',

                    verticalAlign: 'bottom'

        },

        series: [{name: ' ', data: ["+data+"]}]


});

Its working fine when i passed static value to data series.

series: [{name: ' ', data: [{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}]}]

This is script i need to pass dynamic data is series data. I am trying with above code but its fails.

please data variable initialize in first row and assign in series data which is in las row.

Also i am trying with list variable but its also failed.

So please give solution how to solve this with the above script using list variable or using JavaScript define variable.   

 Hi Swapnil,

don't really have time to look at how to do it with a parameter , but with a data variable at top of javascript, this won't work as you are creating a string variable, but it should be an array.

Try this way :

creation of data array at top :

var data = [{name:'Low Risk', y:30,color:'#62DB7D',tooltip:'Low Risk : 30%'},{name:'Medium Risk', y:50,color:'#F5A623',tooltip:'Medium Risk : 50%'},{name:'High Risk', y:20,color:'#FF6262',tooltip:'High Risk: 20%'}];

and then in definition of series at the bottom of your javascript reference this array by name :

 series: [{name: ' ', data: data}]

 Dorine

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