Multi series bar chart with annotations

[jkon]

Multi series bar chart with annotations

[FERNman]

Hello, I've just added a new example that makes more sophisticated use of roles (and also edited the Readme to better explain roles).

Basically, how you should apply roles like the following:

roles: [
        {type: 'number', role: 'interval'},
        {type: 'number', role: 'interval'},
        {type: 'string', role: 'annotation'},
        {type: 'string', role: 'annotationText'},
        {type: 'boolean', role: 'certainty'}
]

Don't change columnNames just because you're passing roles. They've nothing in common:

columnNames: ['Element', 'Density']

And for completeness, here's the data object:

data: [
        ['April', 1000, 900, 1100, 'A', 'Stolen data', true],
        ['May', 1170, 1000, 1200, 'B', 'Coffee spill', true],
        ['June', 660, 550, 800, 'C', 'Wumpus attack', true],
        ['July', 1030, null, null, null, null, false]
]

If this isn't correct or doesn't work for you, I'm happy to investigate further. I'd love to hear whether this has helped!

[jkon]

So, I finally got around to trying this out and I'm not quite getting the behavior I need. My data looks like:

data: [
  [ "Cash", 31912.89737871802, 38666.46103793153, "$31,912.90", "$38,666.46"],
  ["Bonds", 89362.187203375, 85066.1985940699, "$89,362.19", "$85,066.20"],
  ["Stocks", 263889.47676791146, 262931.901718003, "$263,889.48", "$262,931.90"]
]

and my roles look like this:

roles: [
  {"type": "string", "role": "annotation"},
  {"type": "string", "role": "annotation"}
]

and I'm getting the annotations both showing up on the second bars only like this:

The annotations should be on the corresponding bar. What am I doing wrong? The documentation from google makes me think that the columns and roles shouldn't be separate and then combined. it should just be one array that we can pass in with column names and roles in the order we specify. Sorry if I am not understanding this right.

[jkon]

Hey, the changes you made to the roles did fix the annotation issue, however I have run into another problem because of the way you fixed it. I'm not sure if it is something I need to fix in my code or something you could do. The problem, is that when I have the roles for the annotation and my chart gets rerendered (like an ngIf, but in my case it's because I have the chart in a carousel component I created where only the current slide is rendered), it splices the roles into the columnNames. This works fine the first time the chart is rendered, but when it is removed (in my case, when the slide changes), and then rerendered (when you go back to the same slide), the roles are spliced in again, which makes it mismatched with the data. Too many columns. An error is thrown and the chart doesn't render at all. I'm sure I could fix it by regenerating the whole object to pass in, but that seems unnecessarily intensive. Is there a way you could add a check before you splice the roles in to see if they are already there?

[FERNman]

You're right, I've just fixed it. Will release it tomorrow or in the upcoming days!

Thanks for noticing btw, I didn't think of how hardcore javascript is using copy-by-reference when writing this!

[jkon]

Awesome! I really appreciate your responsiveness. This package and your attentiveness to it are saving me so much time :)