Highchart.Chart() on Marionette App

Question

I'm new in Highcharts.js and Marionette.js ,

Task:

I try to create two Marionette app's such that each of them would store a Highcharts.Chart() , such that both of these two Chart()'s would be appeared each time on the same region .

Implementation:

So my general idea is like that -

Let's Graph1Manager be the 1st Marionette app -

var Graph1Manager = new Marionette.Application()

and main-region the region for the Charts()'s -

<div id="main-region" class="container"> Here would be a chart </div>

For Graph1Manager I implemented the -

Graph1Manager.on("initialize:after", function () {...})

such that Graph1Manager loads all the data required for the 1st Chart() once .

So my question is:

Where and how I have to store and draw the Chart() on Graph1Manager ?

Does it have to be in any Marionette.ItemView.extend ?

Answer 1

I have previously built an application using Marionette and Highcharts so I think I can speak to this from some experience.

There's more than one way to go about this but in general unless you have some special reason you would just want to have one Marionette app running. I can't tell if you're trying to display two views at the same time in the same region but in case you are this is definitely not possible--as soon as you show the second view the first will be removed from the dom.

Anyways on to your questions: The simplest way (and the way I have done this) is to use an ItemView and draw the chart in the onRender() method. So it will look something like this:

var MyView = Marionette.ItemView.extend({

  template: _.template('<div class="chart-container" style="height: 325px;"></div>'),

  onRender: function() {
    this.$('.chart-container').highcharts({
        ...highcharts options here
    })
  }

});

Then when you're ready to display it you'll create an instance and show it in the region:

var view = new MyView();
Graph1Manager.nameOfRegion.show(view);

Whenever you show another view in the region the previous one will automatically close so remember you'll have to create a new instance of it if you want to use it again...