<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


HOW TO programmatically create Dynamic Icons in a jiffy

"A mind is like a parachute. It doesn't work if it is not open." — Frank Zappa  

User Experience (UX) is more important today than ever, as users are getting more discerning & pampered by choices. Delivering functionality is not enough, the look and feel of an application is important as well to improve the effectiveness of an application. Google Charts Tools now let's you generate dynamic icons in the same way that you can generate pie charts, heat maps etc.



Dynamic icons let you merge info programmatically retrieved from data sources with image templates. So for instance, instead of showing a message that the last day for paying a bill is the next day (after querying the database) on a Dashboard, you could make the reminder look more dramatic by having the message in a Post-it note -


The above image has been constructed programmatically by specifying the message as a querystring parameter using the Chart API -
http://chart.apis.google.com/chart?chst=d_fnote&chld=pinned_c|1|004400|h|Pay+bill|by+tomorrow|or+else+...

The taped note in the beginning was generated by writing the URL like this -
http://chart.apis.google.com/chart?chst=d_fnote&chld=taped_y|1|000000|h|Everyday+is|International|Backup|Awareness|Day

Also see:
HOW TO programmatically add text to an image in C#
HOW TO generate Heat Map with Google Charts

Labels: , ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

»

Post a Comment