While running deserializeModel running into some problem.

[McQuinTrix]

Hello there,

I am using chart editor for an angular application. While creating the chart I face no problem. We save the json string from serializeModel in database. When we are getting data and putting the string in deserializeModel it throws an error

ERROR TypeError: Cannot read property 'tb' of undefined
    at Dj.B (chart-editor.min.js:230)
    at De (chart-editor.min.js:55)
    at ii.e.dispatchEvent (chart-editor.min.js:53)
    at Wi (chart-editor.min.js:202)
    at Yq.e.Tg (chart-editor.min.js:566)

I tried doing same from console replacing the starting and ending " with the ES6 ` (tilde). It works fine. I tried various ways to resolve it but not working. Can you please let me know how you deserializeModel in your application if you have used it ?

[Shestac92]

@McQuinTrix
Please, can you specify what version of chart editor you are using? I mean branch and commit.
Also, can you provide the serialized object for reproducing the issue? If the data includes private information you can replace it with dummy data, but the chart configuration is required as is.

[McQuinTrix]

Hi @Shestac92 , So I was just testing out this plugin in sample application with this url : https://www.anychart.com/features/chart_editor/chart-editor.min.js .

serializeObject = "{"dataSettings":{"active":"cgoog_1558567123","field":"0","mappings":[[{"ctor":"marker","mapping":{"value":"1"},"id":"goog_1558567124"},{"ctor":"marker","mapping":{"value":"2"},"id":"goog_1558567125"}]]},"anychart":{},"chart":{"type":"scatter","seriesType":"marker","settings":{"getSeries('goog_1558567124').name()":"Field 1","getSeries('goog_1558567125').name()":"Field 2","xAxis(0).enabled()":true,"yAxis(0).enabled()":true,"title().enabled()":true},"typeKey":"scatter"},"editorSettings":{"lockSeriesName":{"getSeries('goog_1558567124').name()":"1","getSeries('goog_1558567125').name()":"2"}},"standalones":{"scale":[{"type":"linear","key":"xScale()","name":"Default X Scale","instance":null,"locked":false},{"type":"linear","key":"yScale()","name":"Default Y Scale","instance":null,"locked":false}]}}"

If I remove the first and last " from the string and replace with (tilde sign) and run serializeModel from console it works fine. But the model I use is stored in variable and then it throws the error..

When I pass it as:

this.editorRef.deserializeModel(chartConfig.editConfigJSON);

where editConfigJSON has the serializedmodel it throws the tb is undefined error

[McQuinTrix]

Hi @Shestac92 , I think I know why it is happening. Suppose we have instantiated Chart A we get serializedModel from the editor's reference and then deserialize it without closing Chart A, it will deserialize and run promptly.

If I instantiate new Chart B and deserialize the model which we got from Chart A then it throws the following error:

ERROR TypeError: Cannot read property 'tb' of undefined
    at Dj.B (chart-editor.min.js:230)
    at De (chart-editor.min.js:55)
    at ii.e.dispatchEvent (chart-editor.min.js:53)
    at Wi (chart-editor.min.js:202)
    at Yq.e.Tg (chart-editor.min.js:566)

So, we cannot deserialize model of Chart A on Chart B ? Because only difference between both model was the cgoog_RandomIds in the model.

If not, how to edit a chart which was previously built ?

[Shestac92]

@McQuinTrix
Thank you for the details!
The serialized model is required to restore the editor state (and chart). The model stores the state of the editor at a certain moment.
There is no possibility of applying the deserialized model (of Chart A) to the existing model of Chart B, it can bring unexpected results and errors. So, it's an unexpected use-case. If you need to to create Chart B similar to Chart A one can just restore chart from model A.

[McQuinTrix]

@Shestac92 Thank you! Can you please let me know how to restore model of Chart B ? I think to get model of Chart A we need to do chart_A_Ref.getModel() how do i set model of Chart B with it ?

[Shestac92]

@McQuinTrix
As I said previously the model cannot be applied to any existing chart. The model stores the chart with all its settings. So, if you have a model of chart you can restore exactly the same chart.

[ajaydev12]

@Shestac92

Would the chart editor be suitable for the following use case?

Using Chart Editor we configure all the settings and then store the chart configuration in a database.
Sometime later, user wants to make some changes to the existing chart configuration, like add a series or change the title. In this case, we want the ability to restore the chart editor with the configuration saved in database, and that's when the errors reported by @McQuinTrix occur.

[Shestac92]

@ajay12thwonder
Yes! Exactly for this case, the chart editor model was designed. The model is saved the state of the chart editor.
As I understood from the issue description, @McQuinTrix is trying to apply the saved model to another existing chart. But the model is used for restoring the chart, not applying or overriding the existing one.

Unfortunately, we have no model of the chart to reproduce the issue.

[McQuinTrix]

@Shestac92

I tried this

var model = editor.getModel();

I stored the model in the database. I don't see an API to initialize the editor with model. Can you please point me in the right direction.

[McQuinTrix]

So I have made a codepen to make this easier to explain:
Full View: https://codepen.io/McQuinTrix/full/YmrXrd
Codepen Editor View: https://codepen.io/McQuinTrix/pen/YmrXrd

Editor 1 loads on "Generate Editor 1" and Editor 2 loads on "editorComplete" event of Editor 1 where I am passing the model of Editor 1 to Editor 2 before instantiating like this :

// Which will hold Editor 1's reference after Editor 1 is initialized
var editor1Ref;
....

function initEditor2(){
  let editor2 = anychart.editor();
  
  //Using Editor 1's model to initialize Editor 2
  editor2.data({
    default: editor1Ref.getModel()
  });
  editor2.render(document.getElementById("editor2"));
}

Is this how to use the model ?

[Shestac92]

@McQuinTrix
For the current master branch the following approach is correct:

anychart.onDocumentReady(function() {
  // Create editor instance
  var editor = anychart.editor();

  // Render editor to div#container
  editor.render(document.getElementById("container"));

  editor.listen('editorComplete', function() {
    // get model
    var model = editor.serializeModel();
    console.log(model);

    // dispose current editor
    editor.dispose();
    editor = null;

    // create new one
    editor = anychart.editor();
    editor.render(document.getElementById("container"));
    
    // apply stored model
    editor.deserializeModel(model);
  });
});

Also, I want to warn you, that model doesn't include chart data. It means that one can create a chart with the same settings but new data. In the sample above, in the second editor, you can choose another data preset but you will get the same chart just with new data.