Reload page on navbar?

Questions General
1

Hello guys, i have the following problem. i am using chart js plugins inside my website. if i reload my side via “f5” i get the following output:

1

if i am using now my nav-bar and go back to this page with that chart i get the following output: 2

the plugin for the colors and the plugin for the labels dont load in. can i change the route that my page is reloading everything somehow ?

2

Is this plugin an ember addon? How is it being loaded on your site?

1 Like
3

its included in the index.js file

'use strict';

module.exports = {
  name: require('./package').name,

  included() {
    this._super.included.apply(this, arguments);

this.import('node_modules/startbootstrap-sb-admin-2/css/sb-admin-2.css');
this.import('node_modules/startbootstrap-sb-admin-2/js/sb-admin-2.js');
this.import('node_modules/startbootstrap-sb-admin-2/vendor/fontawesome-free/css/all.css');
this.import('node_modules/startbootstrap-sb-admin-2/vendor/fontawesome-free/js/all.js');
this.import('node_modules/apexcharts/dist/apexcharts.js');
this.import('node_modules/moment/moment.js');
this.import('node_modules/chart.js/dist/Chart.js');
this.import('node_modules/chart.js/dist/Chart.css');

//here
this.import('node_modules/chartjs-plugin-labels/build/chartjs-plugin-labels.min.js');

this.import('node_modules/bootstrap/dist/css/bootstrap.css');
this.import('node_modules/chartjs-plugin-streaming/dist/chartjs-plugin-streaming.js');
this.import('node_modules/hammerjs/hammer.js');
this.import('node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.js');
this.import('node_modules/chartjs-plugin-colorschemes/dist/chartjs-plugin-colorschemes.js');
  }
};

and i used it in the chart options if i create the chart.

  plugins: {
          labels: [{
                 render: 'label',
                 ...

its a npm package

4

The reason I ask is this sounds like a problem with the way that the chart code is initialized. Generally any ember addon that wraps a charting library will provide some way of hooking the chart initialization code into the Ember component lifecycle. My guess is that your chart code is only getting run in certain circumstances and there is a break in the behavior that chart.js expects and that your Ember app is providing. I would take a look at the addon code for ember-cli-chart to see how their chart components and initialization code works. Or of course you could just try the addon instead. And if you have any specific questions about any of it feel free to ask here!

1 Like
5

yeah i will look into the addon later how they initialize the chart. the thing is the normal chart is initialized with the right data in it. its just the chart js addons that have a problem.