Loading data as 'defaultChartOptions' for the editor

[suhaibahmed]

Expected behaviour

The editor loads up the data given as CSV format in the defaultChartOption.

Actual behaviour

The editor loads the data (in the chart) for a second but it becomes empty right after. Other options such as title, subtitle, etc are loaded properly.

Reproduction steps

This is the code I tried :

var myOptions = { "chart" : { "type" : "line"

        },
        "yAxis":[{"title":{}}],
        "exporting":{},
        "subtitle":{"text":"Page Stats By Page"},
        "title":{"text":"Page Stats By Page"},
        "data" : {

            csv : 'page,visitors,visits,views\n//cisco.jiveon.com/groups/enterprise-web-analytics,92,129,142\n//cisco.jiveon.com/groups/enterprise-web-analytics/pages/welcome,8,9,15\n//cisco.jiveon.com/groups/enterprise-web-analytics/content,6,8,10\n//cisco.jiveon.com/groups/enterprise-web-analytics/activity,6,6,6\n//cisco.jiveon.com/groups/enterprise-web-analytics/people,3,4,4\n//cisco.jiveon.com/groups/enterprise-web-analytics/imageandvideos,3,3,3\n//cisco.jiveon.com/groups/enterprise-web-analytics/places,3,3,3\n'
        },
        "type" : "line"
}

highed.Editor(document.body,{

    defaultChartOptions : myOptions


}).on('ChartChange', function (data) {
  //Do something with the modified chart here.
});

Editor version

0.2.0

Affected browser(s)

Chrome

index-data-csv.txt

[suhaibahmed]

The following error arises when the editor tries to render the chart with the data :

highcharts.js:249 Uncaught TypeError: Cannot read property 'chart' of undefined at a.Chart.reflow (highcharts.js:249) at highcharts-editor-complete.js:31 at a (editor.js:31) at Object.n [as resize] (highcharts-editor-complete.js:31) at a (highcharts-editor-complete.js:31) at highcharts-editor-complete.js:28 at Array.forEach () at Object.emit (highcharts-editor-complete.js:28) at o (highcharts-editor-complete.js:29)

The above error doesn't come up when the data attribute is not passed in the 'defaultChartOptions'. It is working fine in the previous version of the editor (0.1.x)

[cvasseng]

Data is handled differently from other options, so setting it as part of the default options is not supported.

The best way of achieving the same thing is to call editor.chart.data.csv('<your csv data'); after creating the editor, and in a listener for the New event on the chart, e.g. something like this:

var editor = highed.Editor(<your options>);

function setDefaultData () {
  editor.chart.data.csv('page,visitors,visits,views\n//cisco.jiveon.com/groups/enterprise-web-analytics,92,129,142\n//cisco.jiveon.com/groups/enterprise-web-analytics/pages/welcome,8,9,15\n//cisco.jiveon.com/groups/enterprise-web-analytics/content,6,8,10\n//cisco.jiveon.com/groups/enterprise-web-analytics/activity,6,6,6\n//cisco.jiveon.com/groups/enterprise-web-analytics/people,3,4,4\n//cisco.jiveon.com/groups/enterprise-web-analytics/imageandvideos,3,3,3\n//cisco.jiveon.com/groups/enterprise-web-analytics/places,3,3,3\n');
}

setDefaultData();
editor.chart.on('New', setDefaultData);

[suhaibahmed]

Hey @cvasseng ,

Thanks for the answer, but I'm still facing an issue with this :

I am not able to access the object 'editor.chart', it is undefined. As such I am not able to set the data property using the data.csv() function. It throws a type error :

Uncaught TypeError: Cannot read property 'data' of undefined at setDefaultData (index-data-csv.jsp:126)

Maybe we are accessing the editor object wrongly. index.txt

Attaching the jsp file as txt so you can see it for yourself.

[cvasseng]

Since you're doing .on directly on the editor creation function, you're basically assigning the editor variable the return of the on function instead of the editor instance.

Try this:

   var myOptions = {
            "chart" : {
                "type" : "line"

            },
            "yAxis":[{"title":{}}],
            "exporting":{},
            "subtitle":{"text":"Page Stats By Page"},
            "title":{"text":"Page Stats By Page"},
    
    }
 
    var editor = highed.Editor(document.body,{
        defaultChartOptions : myOptions
    });

    editor.on('ChartChange', function (data) {
        
    });

    console.log(editor.chart);
   

    function setDefaultData () {

        editor.chart.data.csv('page,visitors,visits,views\n//cisco.jiveon.com/groups/enterprise-web-analytics,92,129,142\n//cisco.jiveon.com/groups/enterprise-web-analytics/pages/welcome,8,9,15\n//cisco.jiveon.com/groups/enterprise-web-analytics/content,6,8,10\n//cisco.jiveon.com/groups/enterprise-web-analytics/activity,6,6,6\n//cisco.jiveon.com/groups/enterprise-web-analytics/people,3,4,4\n//cisco.jiveon.com/groups/enterprise-web-analytics/imageandvideos,3,3,3\n//cisco.jiveon.com/groups/enterprise-web-analytics/places,3,3,3\n');

    }

    setDefaultData ()
    editor.chart.on('New', setDefaultData);

[suhaibahmed]

Hey @cvasseng ,

Thanks for the explanation. I tried with the changes you suggested and there isn't any error showing up. The chart loads up with the data for a second, but the data vanishes right after. It looks like the same problem when that I opened up this issue with. I feel like we are getting closer to the solution.

Really appreciate your help here.

Attaching the .jsp file as .txt. index.txt

[cvasseng]

Oh, sorry, I see what's going on - I had some local fixes here that weren't in master yet. It's been pushed now.

In order to use it, you need to clone the repository if you haven't (pull if you have), and then run npm install && gulp && gulp complete in the project root. The baked editor sources will end up in the ./dist folder.

Alternatively I've built one for you here: highcharts-editor.complete.min.zip

[cvasseng]

Actually, there's some other issues in master right now (master is inherently unstable when not close to a new release), so it may be wise to wait until over the weekend. Sorry about the inconvenience.

[suhaibahmed]

Sure thing and no problem. Thanks a ton for this. It looks like you got it to work but I could see the issues you are talking about (Column 1, Column 2 are still shown).

I was playing around with the code that goes : "return x.data.csv()" ,to get it to work

[cvasseng]

@suhaibahmed this works as it should in master now as far as I can tell.

There will be a new release either today or tomorrow, if you don't want to wait you can build master yourself by running npm install && gulp && gulp complete.

[suhaibahmed]

Hey @cvasseng ,

Thanks a ton for this. We have decided to wait for the release.

[cvasseng]

No problem!

The new release is now live at https://github.com/highcharts/highcharts-editor/releases/tag/v0.2.1-rc2