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>
