Scroll Chart Problem, using Vue

[Jason V]

Using Vue 2 to render a fairly simple chart, but with 200+ data points. The chart renders fine (using this same Javascript when set as a normal 2d Column chart, but is obviously difficult to read with that many columns. When applying the same data to the Scroll Column chart (but making the changes for the differences in attributes), no bars/columns render. The chart shows up, but nothing else. If I hard code in a value and a label, that will show. The data is (as far as I can tell) correctly formatted as value: 12345 and label: "stuff", and again, works fine with the Column 2D chart but not the scrolling one. Thoughts/help anyone?

 

<script>
  import Vue from 'vue';
  import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import { FCComponent } from 'vue-fusioncharts';

  // resolve charts dependency
  Charts(FusionCharts);

  // register Vue-FusionCharts component
  Vue.component('fusioncharts', FCComponent, Charts);

  export default {
    name: 'chart',

    data: function () {
      return {
        type: 'scrollColumn2d',
        width: '750',
        height: '550',
        dataFormat: 'json',
        dataSource: {
          chart: {
            caption: "Sales Trends",
            subcaption: "FY 2012 - FY 2013",
            xaxisname: "Month",
            yaxisname: "Revenue",
            placeValuesInside: "1",
            rotateValues: "1",
            valueFontColor: "#ffffff",
            numberprefix: "$",
            numVisiblePlot: "12",
            theme: "ocean"
          },
          categories: [{ category: [],}],
          dataset: [{data: [],}]
        }

      } //end of data return
    }, //end of data: function

    created() {

      this.dataSource.dataset.data = accountArray.map( (accounts) => {
        return {
          value: accounts.Impressions
        }
      });

      this.dataSource.categories.category = accountArray.map( (account) => {
        return {
          label: account.week
        };
      });

    }

  } // end of export
</script>

<template>
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataformat="dataFormat"
    :datasource="dataSource">
  </fusioncharts>
</template>

[Ayan Bhadury]

After investigating the above code snippet we came to the observation that the categories and the dataset object are not being able to retrieve the values properly hence you are getting a blank chart with no data plots, in order to fix this as your chart module is getting load first then you are generating the categories and dataset objects you need to use this using object.assign method which would assign the new values into the old data objects, also please note that the while retrieving the categories and dataset object please make sure you are traversing it in a proper way as dataset and categories is an array of objects.   

For further reference please check the sample from the given Dropbox link https://www.dropbox.com/s/v5sussz9gdz7w83/scrollcolumn(ES6).zip?dl=0
Please note you need to download all the dependencies using npm install