Get your tokens here! You probably already have seen our %v, %k and %t tokens for calling values, keys and series text into tooltips. Well, we’ve added LOTS more tokens/variables that you can use in tooltips, valueboxes, query strings, rules, and more.
See a few of them in action here (photo links to live demo):
Here’s a laundry list of tokens for you to try out in your own posts:
| Token | Type | Long-Format | Description |
| %c | Scale | %scale-position | Scale item position |
| %d | Node | %plot-description | Plot description |
| %data-variable | Node | Custom data | |
| %g | Node | %node-goal-value | Node goal Value |
| %i | Scale | %scale-index | Node Index |
| %k | Scale | %scale-key-value | Scale-key value |
| %k0 | Node | Scale-key Part Value | |
| %kl | Scale | %scale-key-label | Scale-key label |
| %kt | Sacle | %scale-key-text | Scale-key text |
| %kt0 | Node | Scale-key part of text | |
| %kv | Node | %scale-key-value | Scale-key value |
| %kv0 | Node | Scale-key part of value | |
| %l | Scale | %scale-label | Scale-key label |
| %N | Node | %node-count | Nº of nodes |
| %nmv | Node | %node-min-value | Node minimum value |
| %npv | Node | %node-percent-value | Node percent value |
| %nxv | Node | %node-max-value | Node maximum value |
| %p | Node | %plot-index | Plot index |
| %P | Node | %plot-count | Nº of plots |
| %pavg | Node | %plot-average | Plot average value |
| %pmi | Node | %plot-min-index | Plot minimum value |
| %pmv | Node | %plot-min-value | Plot or node min value |
| %pper | Node | %plot-percent | Plot percent |
| %psum | Node | %plot-sum | Sum of all values of the plot |
| %pv | Node | %plot-value | All values of your plot |
| %pxi | Node | %plot-max-index | Plot maximum index |
| %pxv | Node | %plot-max-value | Plot maximum value |
| %sum | Node | The total of the stack of that node | |
| %t | Node | %plot-text | Text of that plot |
| %t0 | Node | Part of the plot text | |
| %total | Node | The total of the stack | |
| %v | Scale | %scale-value | Value |
| %linecolor | Node | Line-color of the plot | |
| %backgroundcolor | Node | Background color of the plot. |
These tokens can be placed in “text” attributes throughout various objects like series, value-box, crosshair-x value-label, and more. Here’s an example of the JSON from the above pie chart example, where we decided to call the series text, value, and node percent value for each slice:
"tooltip":{
"text":"%t: $%v (%npv%)",
"background-color":"#fff",
"border-color":"#333",
"border-width":"1px",
"border-radius":"8px",
"font-color":"#333"
},
Give these a try and email us with any questions support@zingchart.com for chart help, sales@zingchart.com for licensing inquiries!
Spreading Holiday Cheer – 2011 HTML5 Advent(ure) Calendars
Last year, we had a ton of fun developing our HTML5 Advent(ure) Calendar. It gave us a chance to review, demo, play and test out some of the best HTML5 projects and games on the web. We also met some great people in the process.
If you never had the chance to check out the work, here’s a peek:
The calendar got some great feedback and even inquiries from folks who wanted to make calendars of their own, so this yea we released the source code. It’s free to use however you wish, but please link back to us for attribution.
We wanted to share some of the cool calendars that people have created using the source that showcase art, gift ideas, and even pets up for adoption. Great calendars to spread the holiday cheer! check them out:
Battersea Dogs & Cats Home Advent Calendar:
Advent Noir – 24 Classic Black & White Winter Memories
HTML5 Snow, too!
Schlagerfiasko’s 24 days of Christmas
Der Androgon Adventskalender 2011
Great job all! We also saw a neat Mozilla Developers Network Advent this year by Chris Heilmann and team. Have you seen any other HTML5 advent calendars in the wild? Please share – we’d love to see and share them!
Happy Holidays from ZingChart!