Create a column chart with dynamic data and column numbers

Explorer ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

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.

Views

117

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

I attached my file here. Please take a look.

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 02, 2021 Apr 02, 2021

Copy link to clipboard

Copied

LATEST

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines