2

I am using vue google charts in my nuxt project. When I change date selections, the data is mutated, and the computed method in my geochart component reads the correct new data.... But the legend at the bottom (color bar) does not work like it should... Instead it reads NaN NaN...As a result, the chart shows the correct data, but not the correct color coding. Screenshot attached for clarity. (Mouseover on the countries shows the correct data, but since the color mapping is not kicking in, the two countries show the same color shade, despite the values being significantly different)

This is how I am loading the chart:

<GChart
  :settings="{ packages: ['geochart'], mapsApiKey: '<usingmapsapikeyhere>' }"
  type="GeoChart"
  :data="countriesForMap"
  :options="chartOptions"
  ref="gChart"
/>

countriesForMap ----

computed: {
    ...mapState(["countriesForMap"]),
  }

enter image description here

hungary
  • 41
  • 3
  • We need more info here, what do you see in your vue devtools state? Is the type of the data as expected? – kissu Jun 30 '21 at 07:37
  • Yes. The data is as expected. I change the dates, the right method fires up, and the data in all components changes - including the data in the maps component.... Mouseover on the countries in the map shows the right data in tooltips... But the legend goes NaN - NaN and the colorcoding of countries based on the data stops working. – hungary Jun 30 '21 at 07:43
  • When I say as expected, it is more about the data that the package is waiting for, like a `Date` type. `NaN` is basically saying that you did some forbidden things and that it got poorly coercion-ed. – kissu Jun 30 '21 at 07:47
  • I figured it out. Instead of updating the array, my mutation was appending new data to the same array, which was making the array unusable. I am not sure why it was still reflecting the correct data on the map, but now that I have changed the mutation code, it is working fine now. – hungary Jun 30 '21 at 07:52
  • Feel free to post this as an answer and accept your own answer (if you can). – kissu Jun 30 '21 at 07:52
  • Thanks for your help @kissu. Helped me look in the right place. Still pretty new at this. Apologies for the extremely stupid mistake I was making there. – hungary Jun 30 '21 at 07:53
  • No issues, everybody is learning daily here. Welcome to SO, relax yourself and enjoy the free ride on the road of help. :) – kissu Jun 30 '21 at 08:25

1 Answers1

0

I figured it out. Instead of updating the array, my mutation was appending new data to the same array, which was making the array unusable. I am not sure why it was still reflecting the correct data on the map, but now that I have changed the mutation code, it is working fine now.

For example, The initial array looked like

[
["Country", "Data"],
["India", 42],
["Japan", 12]
]

Because of the wrongly set up mutation function, my new data array was looking like this:

[
["Country", "Data"],
["India", 42],
["Japan", 12],
["Country", "Data"],
["India", 23],
["Japan", 7]
]

Fixing that solved the problem.

hungary
  • 41
  • 3