fusioncharts / vue-fusioncharts Goto Github PK

I'm using vue-fusioncharts with a single file component structure (utilizing webpack). I've followed the instructions on how to include fusioncharts in the app (https://www.fusioncharts.com/vue-fusioncharts/) and continue to get 'No data to display'. The only thing unique that I'm doing, different from the examples, is that the data is being included within a component and not on the Vue instance itself..

the main.js file:

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import App from './App';
import router from './router';
import store from './store';

// resolve charts dependency
Charts(FusionCharts);

// register VueFusionCharts component
Vue.use(VueFusionCharts);

// Require the main Sass manifest file
require('./assets/sass/main.sass');

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store, // inject store to all children
  router,
  template: '<App/>',
  components: { App },
});

the component file

...
    fusioncharts(:type='type', :width='width', :height='height', :dataFormat='dataFormat', :dataSource='dataSource')
</template>

<script>
const myDataSource = {
  'chart': {
    'caption': 'Age profile of website visitors',
    'subcaption': 'Last Year',
    'theme': 'ocean',
  },
  'data': [
    {
      'label': 'Teenage',
      'value': '1250400',
    },
    {
      'label': 'Adult',
      'value': '1463300',
    },
    {
      'label': 'Mid-age',
      'value': '1050700',
    },
    {
      'label': 'Senior',
      'value': '491000',
    },
  ],
};

export default {
  name: 'track-progress',
  data() {
    return {
      type: 'column2d',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: myDataSource,
    };
  },
};
</script>
...

I've looked at similar issues, but no luck and so far no solution regarding single file components.. any help would be appreciated!

Please visit the fiddle http://jsfiddle.net/cmqr5fa1/2/ and follow the exact procedure:

1. Run the fiddle
2. Click Swap component
3. Click Swap component
4. Click Toggle chart

When you execute step 4, you should see the chart rendered, but this does not happen!

Hey there,
I'm working for this charts, I run this chart on my Nuxt 2.... here I followed step from this articles
https://fusioncharts.github.io/vue-fusioncharts/

using Vue.component() or Vue.use() but still didn't work in my vue page...

is there anyone using this chart in Nuxt 2?

Thank you

Is there anyone who could recommend me a fusionchart with a template?

We saw a lot of js examples, but is there a example using a component?

https://stackoverflow.com/questions/61175524/fusioncharts-example-with-template

Make the vue fusioncharts available as component

I use the 3.18.0 library
I'm using the type chart: scrollcolumn2d
I used displayValue: https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-values

My problem is, when the values exceed the height of the column, the values are cut.

`import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

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

When I commented this code Vue working as expected.

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

i use exactly this example :
https://www.fusioncharts.com/charts/gauges/gauge-with-trend?framework=vue

When the chart data value is the 0 then fusion chart gives an error like Error: <text> attribute x: Expected length, "NaN".

[{
        "label": "Chart title",
        "value": 0
    },
    {
        "label": "Chart title",
        "value": 0
}]

Hello, I'm trying to apply keep-alive attribute on my Vue (nuxt.js) application. Looks like it's impossible? Every time I change the page and returning back to the one with the charts, they're gone. There is no errors printed in console or anything else that can indicate what the issue might be.

Is that possible to run fusioncharts on keep alive mode?

Is there any plan to support vue 3?

On using custom web pack config, vue app is failing on production build, when FusionCharts is included in the component, here is a demo - https://www.dropbox.com/s/q2d4qlg9ktctuw3/sample_1.zip?dl=0

Please look into this

Hey,

I just found out the package is huge (up to 1.4MB) and we're not using all of it, only 3 types.
I couldn't figure out how to import only the usable parts and reduce the total bundle size.

Could you please guide me on how to properly import per usage base?

Hi guys,

I am getting the following error :
Unknown custom element: <fusioncharts> when I am using import { FCComponent } from "vue-fusioncharts"; . This is the code from https://www.fusioncharts.com/charts/gauges/gauge-linear-scale-with-colored-categories?framework=vue.
The second one is :
TypeError: Vue.component is not a function when trying to register the components. It doesn't work using it as a plugin also. There is a fix for this example?
Thank you!

will vue-fusioncharts support typescript?

Hello,
I'm using fusionchart for a view project and I followed the fusioncharts documentation for the properties you can add and the "dataEmptyMessageFontSize" property doesn't work, so I go to your project and when I see in the configuration file, the dataEmptyMessageFontSize property is not present.
Is this normal?

I am using fusiontime bar charts which are working beautifully. I also added extensions and those are working as well. However adding annotations causes the chart components to revert to undefined and the chart does not render. Are text annotations supported in vue? Thanks.

found in
--->

trying a Quick Start demo after downloads page

HI,
i am trying to use the multilevelpie example from the website with cue-fusioncharts. I keep getting the chart type not supported message. The vue based example given here-link seems not functional. I first was getting can't initiate fusions charts without 'new' when tried to use Vue.use(fusion charts). After following your example on the GitHub,

let vFC = VueFCComponent(FusionCharts, Charts);
Vue.component('fusioncharts', vFC);

I was able to load the page without error, but the started getting chart type not supported message? Does this mean the VueFCComponent doesn't support this chart type?

Module not found: Error: Can't resolve 'fusioncharts', appearing in the latest version of vue-fusioncharts. Seems we need to install it separately.

I am trying to build a chart using VueJS web component:

vue-cli-service build --target wc --inline-vue --name my-app ./src/App.vue --env=production

This command produces the following files on dist:

However when I see dist.html on the browser I get:

I suspect the problem is with shadow dom:

When it tries to get the element to render the chart it fails due to shadow dom VueJS WC build produces.

When run yarn serve app is working fine but does not produce shadow DOM:

Do you think shadow DOM bugs fusion charts? Is there a workaround? Do I miss something there?

I use the 3.18.0 library
I'm using the type chart: column2d
I used the HTML span tag in the data label, but the functionality is not applied in the data label. The functionality is applied in the tooltip

When I add a clip array to xAxis I'm getting a RangeError. Has anyone similar problems?

I've created a repo to show the bug: https://github.com/Ic3m4n34/fusioncharts-bug

Does anyone have an idea how to resolve this?

When I try to use

import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts/core';
import MSLine from 'fusioncharts/viz/msline';

Vue.component('fusioncharts', VueFusionCharts, FusionCharts, MSLine);

in my component, in the console.log I have an error:

The error is pointing in the node-modules\vue-fusioncharts\src\index.js in the install function:

const install = (Vue, FC, ...options) => {
    options && options.forEach && options.forEach((modules) => {
        addDep(FC, _FC, modules);
    });
    let component = _FCComponent(FC);

    Vue.component(component.name, component);
};

Also when I console.log the Vue.component in the install function it says that it's undefined:

const install = (Vue, FC, ...options) => {
    options && options.forEach && options.forEach((modules) => {
        addDep(FC, _FC, modules);
    });
    let component = _FCComponent(FC);
    console.log('vue-fusioncharts', Vue.component); // my console.log
    Vue.component(component.name, component);
};

Another problem is that when I try to import { FCComponent }, the npm can't find it.
import { FCComponent } from 'vue-fusioncharts';

Since renderAt is not supported I need to wrap my chart in a div with an ID fc-1 after an update my page re-renders but the fusion graph changes it's id so it tried to re-render in a div with ID fd-2. How can I specify the container element?

I want to make an API call and update other data once someone selects a range using time navigator. Where can I find the event for that and how to trigger a function call on it?

Best JavaScript Chart Library but the worst documentation ever wasting 4 hours in the doc examples still nothings works, registration component locally but y did globally, error saying using new keyword while what i did its just a simple copy past..., i mean VueDoc