My chart takes a few minutes to update after data has come in asynchronously. Is this a bug, or am I doing something wrong?

It isn't the case that the data just takes a long time to come in from the server. I see that the data has come in from the server because it shows up when I display it with a simple <ol></ol>. However, it doesn't show up in the graph until a few minutes have passed.

("High card" should say "Pair", "Two pair", "Three of a kind", etc.)

<template>
  <section>
    <ol>
      <li>High card: {{ results.highCard }}</li>
      <li>High card: {{ results.pair }}</li>
      <li>High card: {{ results.twoPair }}</li>
      <li>High card: {{ results.threeOfAKind }}</li>
      <li>High card: {{ results.straight }}</li>
      <li>High card: {{ results.flush }}</li>
      <li>High card: {{ results.fullHouse }}</li>
      <li>High card: {{ results.fourOfAKind }}</li>
      <li>High card: {{ results.straightFlush }}</li>
      <li>High card: {{ results.royalFlush }}</li>
    </ol>

    <vue-chart
      v-if="results.highCard"
      chart-type="BarChart"
      v-bind:columns="columns"
      v-bind:rows="rows"
      v-bind:options="options"
    ></vue-chart>
  </section>
</template>

<script>
export default {
  name: 'outcome-analyzer-results',
  props: ['results'],
  data: function () {
    return {
      columns: [{
        type: 'string',
        label: 'Hand'
      }, {
        type: 'number',
        label: 'Percentage'
      }],
      rows: [
        ['High card', this.results.highCard],
        ['Pair', this.results.pair],
        ['Two pair', this.results.twoPair],
        ['Three of a kind', this.results.threeOfAKind],
        ['Straight', this.results.straight],
        ['Flush', this.results.flush],
        ['Full house', this.results.fullHouse],
        ['Four of a kind', this.results.fourOfAKind],
        ['Straight flush', this.results.straightFlush],
        ['Royal flush', this.results.royalFlush]
      ],
      options: {
        chartArea: {
        	width: '50%',
        },
        legend: {
        	position: 'none'
        },
        hAxis: {
          format: 'percent',
          minValue: 0
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
  section {
    margin-left: 50px;
  }
</style>

Hi, I'm using your Vue-Charts component and I get the following error "Uncaught (in promise) TypeError: Can not read property '__eventTarget' of null", when I select and manage the event of a chart (Geo) element after this it was perhaps updated with new data after a call to a web service.
Do you know what is caused and how to solve it?
Thank you so much for your availability

I see in the demos that Lodash is used for a lot of the data prep before loading the data into the component, but I am wondering about adding some sort of API layer that can allow access to the underlying google.visualization.DataTable object. The DataTable class provides a number of useful helper methods like .join() , .group() and .getFilteredRows() that can be used with the google.visualization.DataView class to make more ad hoc data sets to create charts.

I am wondering what the best practices for this would be considering the one way data flow for vue.js. I am using vuex so I have a global data store, so maybe having an option of creating a global DataTable to run those methods on to create DataView's and then register those with individual components. What do you think @haydenbbickerton ?

Also, for a number of the chart options, there is a newer Material Design themed chart version, but to access that, the chart needs to be created using google.charts.[ChartType] rather than google.visualization.[ChartType]

Hello,

Is it possible to use google orgchart ?

https://developers.google.com/chart/interactive/docs/gallery/orgchart

Thanks,

Hey,

Awesome library, this isn't an issue but I wanted to get some advice before I contributed

I was just wondering if you had any thoughts on handling 'select' events?

I am currently messing around with syncing a 'selected' prop between the parent and graph components, which works but it doesn't feel right. Another idea would be to dispatch an event but it could get messy if you have multiple graphs on the same page.

Cheers
Brock

If the options props is changed the chart is redrawn, however the changes in the options are not reflected in the redrawn chart because the draw method on the ChartWrapper is using the old options instance.

I guess a fix would be to call chartWrapper.setOptions (see docs) when the chart is redrawn or the options props is changed

how to redraw chart on window resize

Just spreading around this issue, even though I am not sure it's specific to vue-charts, but in Internet Explorer in all versions but Edge, I've started to get an error "Invalid Chart Type: ColumnChart".. No matter what chart I attempt, LineChart, etc. I get the same error in a red box.

It used to work in as early as iE8, which I am required to test in at my company... (yes, kill me..) so I don't know what has changed, but I also can't find any information on how to assess this error message. If anyone here knows, would appreciate the assistance.

Thanks,

Josh

Is there any plan for vue2 support?

Google's library allows you to specify the language in its settings
https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings

The googleChartsLoader in vue-charts calls google.charts.load(version, options); but doesn't expose the language option in its interface googleChartsLoader (packages = ['corechart'], version = 'current', mapsApiKey = false)

The language option doesn't work on the current release.

<vue-chart :chart-type="chartType" :packages="['timeline']" :language="de" :columns="columns" :rows="rows" :options= "options" :chart-events="chartEvents" > </vue-chart>
@haydenbbickerton

Receiving this warning after adding vue-charts package to project:

DeprecationWarning: Intl.v8BreakIterator is deprecated and will be removed soon.

Hi,

Is it possible to get currently selected item from vue-chart?
I try to use getSelection() from https://google-developers.appspot.com/chart/interactive/docs/reference#getselection

but it's not present on vue-chart object.

Is there any working example for a combination Chart?
I tried to combine a Candlestick Chart with a line chart, but cannot get it to work with vue-charts. Some more example in the repo would be highly appreciated.

Hello,

Situation
Upon loading the view, I query the API for some data. My charts are using the data from Vuex as input, with empty object as a fallback.

issue
When loading the app in IE10 I get the error 'invalid chartType' on every chart I have. When opening the dev tools this message is not triggered, but the console says; 'google is undefined'. I find it quite weird because when I inspect the code the drawing of the chart should wait until the loader from google is resolved.

Any idea what might cause this in IE specifically? Haven't seen it in Chrome or Firefox etc.

It seems to be the same error as in #19, however I would like to ask your perspective on this. Inserting the google scripts manually doesn't really seem like the right solution for this.

In the example for window resize events, you use $broadcast.

That's been removed in Vue 2.x.

Vue-charts throws error with latest vue version 1.0.20 Google Charts loader.js can only be loaded once. , kindly help , this was working before updated npm components

When using some type of charts such as GeoChart, the events implementation is throwing the following error:

Uncaught (in promise) TypeError: Cannot read property '__eventTarget' of null

After troubleshooting, it seems that when the chart type is GeoChart the component's data chart doesn't get set before the eventsBinder(self, self.chart, self.chartEvents) gets called.

How to set the language for number format etc.?

Google Charts usually doesn't return data to the 'select' event. This should be handled in a different way for most charts.

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Methods

Hello,

Is there a way to use convertOptions for charts that allow it; to use some 'beta' options like in the Bar chart for example

I'm guessing this could be added as an optional prop ?

Looking to add a date range selector via the google charts with their controls stuff. See here: https://developers.google.com/chart/interactive/docs/gallery/controls#5-create-control-and-chart-instances

Hi @haydenbbickerton,
Great initiative with VueCharts.

I tested it with the Gauge chart, but it throw an error: google.load is not a function
Any plans to support Gauge charts too?

rows are pushed on ready ()

Which works for several pages worth of visualizations except TreeMap. Not sure what's going on here.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('number', 'Recuento');
      data.addColumn({type: 'string', role: 'annotation'}, '');

      data.addRows([
        ['1', 2, '(0) 0%'],
        ['2', 2, '(34) 71%'],
        ['3', 1, '(0) 0%'],
        ['4', 3, '(0) 0%'],
        ['5', 1, '(0) 0%']
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 1, 2]);

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(view, {
        title: 'home',
        legend: 'none',
        height: 400,
        width: 800,
        series: {
          0: {
            type: 'bars',
            color: "rgb(103, 58, 183)"
          },
          1: {
            type: 'line',
            color: 'black',
            lineWidth: 0,
            pointSize: 0,
            visibleInLegend: false
          }
        },
        vAxis: {
          format: '#',
          viewWindowMode:'explicit',
          viewWindow: {
              min:0
        }
    }
      });
    }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Does not work with <vue-chart></vue-chart>

When following the installation instructions:
npm install --save-dev vue-charts
The language prop is not yet implemented.

I had to clone the current repo and copy paste the dist-folder into node_modules in order to make it work.

I would like to have my graph use the full viewport width, but haven't been able to get that working.

If I put simple numbers in the options.width, options.height properties, the graph does use them. If I try to leave the width undefined (as in the resizing example), the graph seems to use the default width (400px or something like that).

Using Vue 2.1.10.

How would someone go about incorporating custom colors on the bar graph in a similar manner to the google chart example? (link below).

The "colors" option array only works for "columns", where-as I need to be able to color rows. I know, it's a matter of semantics, but that's how the data is arranged.

columns: [ { 'type': 'string', 'label': 'Products' }, { 'type': 'number', 'label': 'Processing Costs ($)' } ], rows: [ ['productOne', 10], ['productTwo', 20], ['productThree', 30] /* etc */ ]

var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);

https://developers.google.com/chart/interactive/docs/gallery/columnchart#coloring-columns

Hello,

We are Vue newbies using Vue 2.1.0 and vue-charts 0.2.1.

In one of our components we have a table element, whose rows we want to be click-able:

<vue-chart
chart-type="Table"
:chart-events="chartEvents"

There's a particular path through our application that results in an error being thrown:

Uncaught (in promise) TypeError: Cannot read property '__eventTarget' of null

It seems like it happens when this vue chart is called second, after another chart is called first.
If this chart is called first before any others have been called, it works fine.
If the chart is called third or any subsequent calls, it works fine as well.

In our particular scenario, the first chart being called when the error occurs is a LineChart.

We're having a hard time debugging it because vue-charts is a bit of a black box to us and because we don't know what information to log to the console that could illuminate what's happening. If we delete the line:

:chart-events="chartEvents"

the issue goes away. So it's likely an issues with the eventBinding on the chart. Is it possible your previous bug-fix for this issue didn't fix it completely?

Thanks!