Graph manipulation with (Java) script

[Berti]

Could anyone please tell me how I could manipulate a value in a graph related to a chosen color, with a certain script?

I think this should be possible with a script during submission or perhaps in the Footer of the Graph settings?

For instance:

I am using a bar graph to present the actual, real time, health status of a certain system. This typical bar, varies between 0 - 100%, but always gets a color choosen by the system, and dependent on the Style I've choosen. I would like to manipulate this color, depending on the retrieved field value.

Example;

I would like to use a red colored graph when the value of the field is e.g. between 0 < n < 50 (range free to choose in script)

I would like to use an orange  colored when the value of the field is e.g. between 50 < n < 75

I would like to use a  green colored when the value of the field is e.g. between 75 < n <= 100

[Vitalikssssss]

Hi @Berti,

I can say that Caspio uses HighChart library to render the chart. 

I don`t have a solution for your described case but perhaps you can try to use a solution from this topic:

Stackoverflow

Regards,

vitalikssssss

[Vitalikssssss]

Hi @Berti,

I have found a solution which might work for your case.

You need to place following snippet of Javascript code into Chart Datapage footer:

<script type="text/javascript">

var int = setInterval(updateChartOptions, 100);

function updateChartOptions(){


    if(typeof Highcharts == "undefined" || !Highcharts.charts.length) return;


    Highcharts.charts[0].update({plotOptions: {
        column: {
            zones: [{
                value: 10000, // up to this value color of column will be blue
                    color: 'blue'
                },
                {
                value: 30000, // if column is more than 30000 it will be green
                    color: 'green'
                },{
                color: 'red' // if value if above 30000 it will be red
                }]
            }
        }});
    clearInterval(int);
}

</script>

Hope this helps.

 

Regards,

vitalikssssss