VueZoomScatter

Creating Zoom Scatter in Vue

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now