score:2

Accepted answer

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...


Related Articles