31
Views
3
Comments
Solved
OutSystems Charts 3.1.0 Javascript

Hello,

I am working on a highly customized chart using Charts 3.1.0 using JavaScript. I must use JavaScript to enable the functionality that I require. It is a combination stacked bar chart and line, with a single point on the line. I then enable data labels and format the data label using position to achieve the flag at the data point location.

The challenge comes in with multiple charts on the same page, which I also require. The charts API examples in the charts API show how to call the API to modify it, as exampled here: https://charts.outsystems.com/samples/gradient-fill

I am an absolute novice to JavaScript, but I can see where GetActiveChart() could attempt to apply the javascript to multiple charts, however, I do not have enough expertise to be sure. I've attempted putting the chart into a block, with no success.

Any help would be greatly appreciated, it took me a long time to get the chart formatted the way I wanted, and I am desperate to get multiple charts on the same page as it is critical to my application.

I've attached my OML for reference. Please note I had multiple attempts to try and get it to work, that will be evident in the OML.

TestRangeChart.oml
Solution

Hi Scott,

To meet the specified requirement, apply the following code change to showcase multiple charts on a single page. 

Implementation Steps:

  • Introduce an input parameter called 'ChartId'  in the JS node as shown below.

  • To make a reference to a chart instance, use the GetChartById() method instead of GetActiveChart() and provide the 'ChartId' input parameter value as demonstrated below. 

Code Snippet:

OutSystems.ChartAPI.ChartManager.GetChartById($parameters.ChartId).customizeChartObject(chartPlotOptions);

Demo Screen: CustomChart

Refer to the attached update oml file. I hope this helps you!


Kind regards,

Benjith Sam

You Sir, are a gentleman and a scholar. Thank you!

You're welcome, Scott. I'm glad that the proposed solution helped you :)


Kind regards,

Benjith Sam

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