Pushing data from highcharts to highcharts editor

[jigar.sheth]

I have a highcharts displayed on screen with a "edit" button to edit the chart. On "edit" I open the highcharts editor.

I want to push the data from highcharts displayed on the screen to the highcharts editor popup - how can I do this?

[rafalS]

Hi, jigar.sheth!

Could you give me some more information? Maybe a link to your chart? Or some screens?
I just need to reproduce your situation to solve your problem. For now, I don't know what exactly do you want to achieve and how to start.

Kind regards!
Rafał

[jigar.sheth]

Hi Rafal,

My apologies for not being clear.

Unfortunately I wont be able to provide you the link as it is not deployed- but I can provide screenshots and details on what I am trying to do. I am trying to implement this in Angular6 - since there is not enough documentation around I have loaded up highcharts editor javascript files and using it.

1. Screen which displays highcharts

display chart

1.jpg (38.9 KiB) Viewed 1573 times

2. Chart editor button which will popup the high charts editor modal popup

charts editor button

2.jpg (42.24 KiB) Viewed 1573 times

3. high charts editor popup - I want the chart from #1 to displayed here. I dont have much control over the source of the data so I will have to read it from the the displayed high chart from #1.

higchart editor modal popup

3.jpg (61.51 KiB) Viewed 1573 times

Code Snippet:

Code: Select all

loadeditor()
{
 this.modal = this.highEditor.highed.ModalEditor(false, {
                        allowDone: true                         
                        },
                            function (html) {
                                //This is called when the chart editing is done
                                self.updateChart(html);
                            }
        ); 
        this.modal.editor.chart.on('New', this.setDefaultData(this.modal.editor))
        this.modal.show();  
}
 setDefaultData(editor) {     
        let highWindow = eval('window');        
        let json3 = highWindow.deChart.options;
       editor.chart.options.chart = json3;
}

I tried to set the chart options, but it is not working.
When I try to push csv data, it works fine.

Code: Select all

editor.chart.data.csv(csvData)

but I couldn't find a way to extract csv data from current displayed highchart from #1.

[wojtek]

Hi jigar.sheth,

1. To extract csv data from the chart you can simply invoke chart.getCSV() method. However, it will give you only data from the chart and not chart options.

Api reference:
https://api.highcharts.com/class-refere ... art#getCSV

Demo:
http://jsfiddle.net/wchmiel/cjw6ao7r/1/

2. The better way to achieve it is to use editor constructor where you can provide properties with chart options which you can get from chart.userOptions. Read the github article posted below to find more information about it.

Highcharts Editor Api:
https://github.com/highcharts/highchart ... Editor-API

Kind regards.

[jigar.sheth]

Hi Wojtek,

Thank you for the reply.

getCSV thing works fine. I cannot use chart.userOptions since there is an existing bug in highcharts editor that doesnot allow changing the chart template if we set the chart type when loading the editor- any updates on this #141 bug?

https://github.com/highcharts/highchart ... issues/141

Thanks,
Jigar

[wojtek]

jigar.sheth,

Sorry about that, however, you have to wait for Highcharts core developers answer on github thread. I reported it.

Kind regards.