chart-line: Uncaught TypeError: Cannot read property 'forEach' of undefined.

[agoransson]

Using the demo code for chart-line I get the above mentioned error on line 65 of chart-lines.html. It doesn't seem to like the array.

Here's the error copied from console.

Invalid expression syntax: 10,14,20,25,13,9,40 Error: Unexpected token 14 {index: 3, description: "Unexpected token 14", stack: (...), message: "Unexpected token 14"}prepareBinding @ polymer.js:3215PolymerExpressions.prepareBinding @ polymer.js:3772syntax.prepareBinding @ polymer.js:11086mixin.newDelegate_.bindingMaps @ polymer.js:6834parseMustaches @ polymer.js:6910parseAttributeBindings @ polymer.js:7056getBindings @ polymer.js:7079createInstanceBindingMap @ polymer.js:7117createInstanceBindingMap @ polymer.js:7121createInstanceBindingMap @ polymer.js:7121createInstanceBindingMap @ polymer.js:7121getInstanceBindingMap @ polymer.js:7151mixin.createInstance @ polymer.js:6740mdv.instanceTemplate @ polymer.js:9616base.shadowFromTemplate @ polymer.js:10040base.parseDeclaration @ polymer.js:10007base.parseDeclarations @ polymer.js:9988base.makeElementReady @ polymer.js:9888base.createdCallback @ polymer.js:9857o @ app-router.html:3s @ app-router.html:3o @ app-router.html:3

This is the example code I'm using in my layout.

<div horizontal layout>
  <chart-line
      width="600"
      height="400"
      labels="['Monday','Tuesday','Wednesday','thursday','Friday','Saturday','Sunday']"
      values="[[10,14,20,25,13,9,40]]"
      colors="['253,180,92','247,70,74','70,191,189','148,159,177','77,83,96']">
  </chart-line>
</div>

I've been trying to decode this problem myself but can't find the reason why this chart isn't working. Would love some help.

These are the installed components:

{
  "name": "myapp",
  "version": "0.0.0",
  "dependencies": {
    "core-elements": "Polymer/core-elements#^0.5.1",
    "paper-elements": "Polymer/paper-elements#^0.5.1",
    "polymer": "Polymer/polymer#^0.5.4",
    "app-router": "~2.6.0",
    "process-arrow": "futurice/process-arrow#~0.3.5",
    "chart-elements": "~0.2.0"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^2.2.3"
  }
}

Thanks.

[agoransson]

Actually testing all of the demo.html charts I also find the same problem in the radar and bar charts.

Uncaught TypeError: Cannot read property 'forEach' of undefined
  (anonymous function) @ chart-radar.html:63
  (anonymous function) @ polymer.js:8988
chart-radar.html:63 

Uncaught TypeError: Cannot read property 'forEach' of undefined
  (anonymous function) @ chart-line.html:65
  (anonymous function) @ polymer.js:8988
chart-line.html:65 

Uncaught TypeError: Cannot read property 'forEach' of undefined
  (anonymous function) @ chart-bar.html:65
  (anonymous function) @ polymer.js:8988
chart-bar.html:65

[kaspervm]

I am having exactly the same problem. Is it because of this error the graph will not display?

[agoransson]

I'm actually thinking this has something to do with Polymer rather than these elements. I've seen similar errors with other third-party elements, all fail on handling the arrays.

[gvance]

I'm not sure where in the source yet but I've been able to isolate this to the values attribute if there is only one index. To make your example work, @agoransson, adjust your values attribute to the following values="[[10,14,20,25,13,9,40], []]" so that there's another index present.

[gvance]

@robdodson Polymer is not set up to handle multidimensional arrays, in order to overcome I recommend having each index as a string and parse each index during the forEach.

index.html <chart-element values="['[65,59,90,81,56,55,40]']"> </chart-element>

in updateChart() data: JSON.parse(this.values[i])

may need to throw in a try catch.

[kenny0202]

Actually I got this to work

what you had is values="[[10,14,20,25,13,9,40]]"

instead of putting the single quotes i added spaces between the 2 array brackets and it worked

values="[ [10,14,20,25,13,9,40] ]"

[robdodson]

I've updated the API for the latest release. You now need to pass a data object, similar to the one Chart.js requires. I'd recommend doing this through a binding of some kind. I'm going to close this issue since it no longer matches the new API