Dynamic barchart

2

chart_BySVGPathStrokeDashGap.hype.zip (16.4 KB)

Hi Kalle,

i know you did not ask for this :), but working with svg-path revealing dash/gap would allow to work without any interval-methods to control the progress of the timeline.

best day!

Hans

3 Likes
3

Hei Hans,
that´s great! It will help me to create simple graphics like these even faster. Very helpful - thanks a lot for that.

BUT… :grimacing::stuck_out_tongue_winking_eye: for a better understanding and a continuous increase of my javascript learning curve - I would still be interested in a solution of my approach… :wink:

LG Kalle

4

You are overwriting your myGetPercent … my first guess at a glance. This is a perfect use case for Hype StableSymbol. I’ll try to post a fix without it, though.

1 Like
5

intervalInstances.hype.zip (18.1 KB)

as for your question: you’ll need instances of the intervals …

1 Like
6

please an example using stableSymbol! :slight_smile: :+1:

7

This is much easier… don't use a global approach but initialize on SymbolLoad instead.
getPercent.hype.zip (20,5 KB)

This is much to simple for Hype StableSymbol. That would be needed if you want to create a reusable API (like changing the bar dynamically or other stuff like that) for the Symbol across scenes.

2 Likes
8

okay :slight_smile:

@ktewes

that's the difference and it provides you from creating instances yourself when running a global timeline action

9

@ktewes also when you only want a bar to scale you can use setElementProperty with a time on width. Then you don't even need your interval as seElementProperty does it for you. The approach of controlling the animation makes sense when you want to create fancy animations that have to stop at a certain progression that would be too much to micromanage by controlling every element property individually OR if you just like using the visual approach more :wink:

Yes, and the function now is truly symbol-based meaning initialized from within the symbol. So, you can duplicate the symbol as often as you want and reuse it in many scenes. Although, without Stable Symbol you can't store values in the symbolInstance across scenes or across function calls used in the symbol as hypeDocument.getSymbolInstanceById always gives you a fresh copy of the symbol API hence destroying anything you stored in there. Hope, this makes clear where Hype StableSymbol comes in.

10

Thanks a lot Gerd and Max. Great stuff. Max’ approach indeed looks a little bit easier to me :smiley: @MaxZieb Yes, I had the idea with setElementProperty, too. But what about eg. donuts/pies?

11

True, you can use @h_classen great idea/code with line dash OR your approach with the timeline without introducing more dependencies.

12

Here is an inverse version of your idea. It uses the width of a “hidden” element we can control using setElementProperty to drive the progression of the symbols Main Timeline. It offers the following values:

  • data-percent (of main timeline) defaults to 100% if not provided
  • data-duration (for animation) defaults to 1 second
  • data-easing (for animation) defaults to easeinout (list of all easing functions)

Download here:
HypeSymbolProgress.hype.zip (28,1 KB)

1 Like
13

Updated after encouragement:

Gumroad only requires an email so this is all you need to download free files. So, I am moving my examples there and if some people value my examples I’ll put more effort into them with tutorials etc. as an paid upsell!

1 Like
14

Thanks again, this is exactly what my intension was, when I started this little project for me this morning - having a standalone symbol which allows me to create charts on a dynamic basis - perfect!
And - yes, I think you should make use of platforms like Gumroad - you´re investing a lot of time and work (I assume… :smirk:) in creating solutions, especially in your extensions project. Yep! Go ahead!! :+1:t2:

1 Like
15

Thank you for the encouragement, I produce a lot but fail to create tutorials and good example files. Maybe the commercial route will help in doing that. My thinking would be… most extensions are and stay under MIT and reside on GitHub, examples files are on a donation basis or small pay if they are complex and tutorials (video etc.) an upsell. It reflects the production value and the philosophy of keeping it free to use but still would be an encouragement on producing material for beginners or people unfamiliar with the concepts. Although if it helps commercially, I'd appreciate a kickback in any case.

1 Like
16

There is no way to script 'back' as an easing function, is there?

17

There actually is. The problem is that the runtime doesn't offer it as a "string" preset but there is a hidden feature to pass in a function into the easing function.

Here is also a version that offers an alternative based on a timingTimeline dataset value allowing for manual setup of the duration and easing in the editor. It's still flexible as each timeline can be defined in the symbol and addressed by the dataset. Download here but I'll update/merge it to one version in the template ZIP with a single function on Gumroad later.
HypeSymbolProgress_timelineVersion.hype.zip (35,0 KB)

18

I would like to use this bar chart solution in my digital signage. I'm using mysql and php. How can I change the percvalue number by way of a simple webform that can be managed by a non-technical person? safetyPercent.zip (152.7 KB)

19

Why are you duplicating the code and symbol.
Just reuse it… that is the whole purpouse of this approach :wink:

safetyPercent-Max.hype.zip (170,4 KB)

There is a newer version of this approach you might want to consider at

20

The duplication of the symbol and the code is two fold, my artist has the bars changing color from left to right (the final slide will have 15 bars of varying amount of green) and the duplicate javascript is me working under the assumption that if I can figure out a way to get the data values out of my database to control the length of the various bars, I'll simply use individual scripts, one for each bar. I've found a few methods on the Web for bring in database values using php into a javascript script, but I've been unsuccessful in getting those to work within Hype.

21

If its only a bar you want to animate you can just build it and animate it using code. The Symbol Progress approach is only needed if you want to animate the progress (time property itself). Makes most sense for complex animations where the progress is some sort of indicator.

Something elementary with data is the following… but it doesn't use symbols.
Data can also be defined in window (Head HTML) outside of Hype.

safetyPercent-Maxv2.hype.zip (176,2 KB)