Creating Zoom Scatter in Vue

[VueZoomScatter]

Hello, I have a question about the needed imports for using a Zoom Scatter chart with Vue and NPM.

The following code gives an error, but works with type: scattter. What are the necessary imports? 

<template>

<fusioncharts

:type="type"

:width="width"

:height="height"

:dataFormat="dataFormat"

:dataSource="dataSource"

:events="events"

></fusioncharts>

</template>

 

<script>

 

import Vue from 'vue';

import VueFusionCharts from 'vue-fusioncharts';

import FusionCharts from 'fusioncharts';

import Charts from 'fusioncharts/fusioncharts.charts';

import Zoomscatter from 'fusioncharts/fusioncharts.zoomscatter';

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

import { FCComponent } from "vue-fusioncharts";

 

Vue.use(VueFusionCharts, FusionCharts, Charts, Zoomscatter, FusionTheme);

 

export default {

name: "FusionCharts",

components: {

fusion: FCComponent

},

props: {},

created() {},

computed: {

test_result() {

return this.$store.state.test_result;

},

},

watch: {

test_result: function() {

this.dataSource.dataset = [{ data: this.test_result }];

},

},

data: function() {

return {

type: "zoomscatter",

width: "800",

height: "800",

dataFormat: "json",

dataSource: {

chart: {

caption: "",

theme: "fusion",

},

dataset: null,

},

events: {},

}

},

methods: {},

};

</script>

 

[Ayan Bhadury]

Hi,

 

According to your given query, we tried replicating the issue at our end. It seems to be working fine for us. Kindly find the link for the sample below:

https://codesandbox.io/s/recursing-shaw-wijpu

 

Please try this at your end and feel free to reach out to us if you face any issues.

 

[VueZoomScatter]

Thank you for your help. Your code works in the sandbox, but in my local environment, I get these errors:

Error 1: fusioncharts.zoomscatter.js:1 Uncaught SyntaxError: Unexpected token '<'

Error 2: fusioncharts.js?8f68:13 Uncaught (in promise) Error: ChunkLoadError: Loading chunk 9 failed.

(missing: http://localhost:8000/app/fusioncharts.zoomscatter.js)
    at Function.a.e (fusioncharts.js?8f68:13)
    at d (fusioncharts.js?8f68:13)
    at Function.eval (fusioncharts.js?8f68:13)
    at i (fusioncharts.js?8f68:13)
    at o (fusioncharts.js?8f68:13)
    at h (fusioncharts.js?8f68:13)
    at e.t.chartType (fusioncharts.js?8f68:13)
    at new e (fusioncharts.js?8f68:13)
    at new f (fusioncharts.js?8f68:13)
    at VueComponent.renderChart (vue-fusioncharts.js?27e3:401)
    at eval (fusioncharts.js?8f68:13)

I have tried uninstalling and reinstalling the NPM modules, but this hasn't fixed the error. Please let me know if you have a solution.

[Ayan Bhadury]

You are missing this module : 

 

import Zoomscatter from "fusioncharts/fusioncharts.zoomscatter";

 

Make sure all the lib files are imported properly before the chart is rendered. Import in your main app component.

[VueZoomScatter]

Thank you, I didn't realize that the imports needed to be in the main component. Have a good day.

[Ayan Bhadury]

Welcome