Multiple charts in vue.js issue

[RonV]

Hello, I wonder if anyone can help. 

Apologies if this is in the wrong section but there's no Vue.js section.

I have a vue.js 2 project that uses Vue-router to switch views, a home view (no charts), a treemap view (FusionCharts treemap) and a column chart view (column3D). Each view is an individual vue.js component.
When running the application, the home page displays fine and when changing the route, the very first chart displays perfectly. I can go back to the home page then to that same chart - all good.  

The problem is when going from the Treemap view to the Column chart view, then I get an error "Uncaught SyntaxError: expected expression, got '<'" .  I suspect it is related to this warning - The script from “http://localhost:8080/fusioncharts.charts.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Same happens when I view the Column chart first, then move to the Treemap view, the warning in that case is - The script from “http://localhost:8080/fusioncharts.treemap.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

The code that fails is this:

Quote

var chart = new FusionCharts({

type: 'stackedcolumn3d',

renderAt: 'incident-view',

width: '100%',

height: '700',

dataFormat: 'json',

dataSource

})

in either the Treemap view or the Column chart view - code is similar but 'type', 'render at' and 'dataSource' parameters are different.

What is causing the MIME type error, and how do I get around this issue?

Thanks
Ron

[Ayan Bhadury]

@RonV please share the import statements also assuming that you are importing FusionCharts files locally at the component level, I would request you to apply at the global level.

https://github.com/fusioncharts/vue-fusioncharts#usage

[RonV]

@Ayan Bhadury Thanks for your reply, I have indeed put the imports in the individual components. These are the imports in the component that builds the Treemap:

import Vue from 'vue'

import VueFusionCharts from 'vue-fusioncharts'

import FusionCharts from 'fusioncharts'

import PowerCharts from 'fusioncharts/fusioncharts.powercharts'

import Treemap from 'fusioncharts/fusioncharts.treemap'

import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

And the imports for the Column3D charts:

import Vue from 'vue'

import VueFusionCharts from 'vue-fusioncharts'

import FusionCharts from 'fusioncharts'

import Column3D from 'fusioncharts/fusioncharts.charts'

import PowerCharts from 'fusioncharts/fusioncharts.powercharts'

import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

It's getting late now but I'll do as you suggest and apply these at global level.

Thanks
Ron

[RonV]

Thanks very much Ayan, I have got this working now!

I've gone the component way and changed the import for vue-fusioncharts to vue-fusioncharts/component. 
Added the constant then used the Vue.component to register.  Which I had set to Vue.use in both components before - I think now this is where the contention was.

Happy days!

Thanks
Ron

[Ayan Bhadury]

Good to know