Hello.

I want to add a function to the value of a chart. Something very similar to this case.

JsFiddle_ClickOnPoint

I already have the function to zoomIn and zoomOut and I have already tested and it works. The problem is that I'm using the whole graph to click and zoomIn. Zoom works all over the map except in points. In other words, I want to get the opposite behavior.

There is the function that I am using. The expected result will be as in the fiddle example

SyntaxEditor Code Snippet

chart: {
            events: {
              load: function() {
                this.clickedOnce = false;                
              },
              click: function(e) {
                const chart = this,
                  yAxis = chart.yAxis[0],
                  xAxis = chart.xAxis[0];

                let x,
                  y,
                  rangeX,
                  rangeY;

                if (!chart.clickedOnce) {
                  x = xAxis.toValue(e.chartX);
                  y = yAxis.toValue(e.chartY);
                  rangeX = xAxis.max - xAxis.min;
                  rangeY = yAxis.max - yAxis.min;

                  xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
                  yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
                  chart.redraw();

                  chart.clickedOnce = true;
                } else {
                  chart.zoomOut();
                  chart.clickedOnce = false;
                }
              }
            }
          },



I already tried the code as mentioned in the fiddle. I already added to the data series without success.

Try this one without sucess :(. 


SyntaxEditor Code Snippet

plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        alert('1');
                    }
                }
            },
            animation: {
                duration: 2000
            }
        }
    }


Best regards







For questions about specific components, it's a good idea to post those to the discussion forum for the component, in this case for Charts Web, here:

https://www.outsystems.com/forge/component-discussions/4142/Charts+Web

That being said, the easiest way to get this to work is not with the advanced format JSON.

Just select the chart widget in Service Studio, and look for the Clickable property. Set it to True, then add a new server action for the OnClick destination. In the new server action, add a RunJavaScript widget to the flow that executes the desired JavaScript.

Be sure to encode any parameters you're passing into the JavaScript, like so:

SyntaxEditor Code Snippet

"alert('Label: '" + EncodeJavaScript(DataPoint_GetClicked.DataPoint.DataPoint.Label) + "', 
value: '" + EncodeJavaScript(DataPoint_GetClicked.DataPoint.DataPoint.Value) + ");"

Thanks Andrew Duthie.

I'll try what you suggested. Anyway today I got it to work for Json using the plotOptions. Here is the result.

SyntaxEditor Code Snippet

plotOptions: {
    series: {
      events: {
        click: function(e) {
          const chart = this.chart,
            yAxis = chart.yAxis[0],
            xAxis = chart.xAxis[0];

          let x,
            y,
            rangeX,
            rangeY;

          if (!chart.clickedOnce) {
            x = xAxis.toValue(e.chartX);
            y = yAxis.toValue(e.chartY);
            rangeX = xAxis.max - xAxis.min;
            rangeY = yAxis.max - yAxis.min;

            xAxis.setExtremes(x - rangeX / 20, x + rangeX / 20, false);
            yAxis.setExtremes(y - rangeY / 20, y + rangeY / 20, false);
            chart.redraw();

            chart.clickedOnce = true;
          } else {
            chart.zoomOut();
            chart.clickedOnce = false;
          }
        }
      },


Best regards and thanks a lot :)

Glad to hear you got it working.