Exporting Chart highcharts

Back to Forums

roy mainfeld

Solved

Question

Charts

I am trying to use the exporting JS library in in my charts. I am using reactive.

At first i downloaded both 9.0.1 and 6.1.4 versions of the script to my scripts in the interface:

Later i created a screen and added in the required scripts the following scripts:

and then i created an on ready action that calls to scripts for 2 graps. one is combined line and column and the other org chart. i call them with pure js and edit and put them each one in its own container:

it works perfectly.

but when i try to make a simple column chart with exporting enabled it doesnt work, i created another screen and put the code "exporting : {enabled : true } " in the highcharts json of the advanced format property it doesnt show me the exporting options although i do require the same dependecies(scripts). Does anybody know what is my problem? Is it lifecycle think or do i need to configure another thing? If anyone has an oml for example it would be awsome:)

another image to show what i mean :

04 May 2021

Benjith Sam

MVP

Solution

Hi roy,

For the mentioned use case, refer to the attached .oml file

See this sample screen: ExportColumnChartDemo

Steps to Follow:

Add the JS script file (ExportHighChartsJS) in the UI Tab / Scripts Directory
Map the same script file to the respective screen's Required Scripts property section
Include the below JSON as a value to the column chart HighChartsJSON property section

exporting: {
        menuItemDefinitions: {
            // Custom definition
            label: {
                onclick: function () {
                    this.renderer.label(
                        'You just clicked a custom menu item',
                        100,
                        100
                    )
                        .attr({
                            fill: '#a4edba',
                            r: 5,
                            padding: 10,
                            zIndex: 10
                        })
                        .css({
                            fontSize: '1.5em'
                        })
                        .add();
                },
                text: 'Show label'
            }
        },
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
            }
        }
    }

Hope this helps you!

Kind regards,

Benjith Sam

RWALabExportColumnChart.oml

04 May 2021

roy mainfeld

thank u very much it worked. Is there a possibility to add "viewFullscreen" in it.

This didn't work.

05 May 2021

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

See the full guidelines