Create a column chart with dynamic data and column numbers

[George Bernard]

Hi everyone,

I am currently making dynamic chart with its data is random generated and column can be grouped.

Dataset is random generated using number.

Column is number range and can be changed (such as 1-10, 1-5, 1-20...).

Column height is dynamic => Max value and step value are also dynamic.

I want to ask if we can make chart like this in Animate using dynamic dataset?

Thank you very much.

[JoãoCésar]

Hi.

Yeah, it's possible. You're gonna need the Graphics class from CreateJS.

Here is a sample from the CreateJS repo on GitHub: https://github.com/CreateJS/EaselJS/blob/master/examples/BarGraph.html

Hope this helps.

Regards,

JC

[George Bernard]

I can't seem to applied it to my Animate CC. Or am I do it wrong? Can you check it for me?

I also tried this, but don't understand what they did. Can you bring me some light?

[George Bernard]

I attached my file here. Please take a look.

https://www.dropbox.com/s/li62ykgktglku0c/RandomChart.fla?dl=0

[kglad]

instead of using the graphics class to draw the graph it would be much easier to draw (in animate) a one column moveclip (with scale, pivot point at the bottom left, even if you wanted to animate the graph like the above example) and draw your axes (in animate), assign the movieclip a linkage id and then use createjs to add, scale and position the column movieclips.

adding the x and y values would require creation of dynamic textfields, EaselJS v1.0.0 API Documentation : Text (createjs.com)