Wednesday, December 15, 2010

How to easily create charts using jQuery and HTML5

Posted by Zero at 12:58 AM Labels: , , , , ,
Step 1: Preparing files

Here we go! The first thing to do is obviously to create a directory on your Mac (or PC, nobody’s perfect ). You should name it chart for example. Once done, download the required Javascript and CSS files and save it on your hard drive.

Now, create a new html document, named charts.html. Copy the html structure below, and paste it into your newly created charts.html file.

Charts!

Did you notice that I used the doctype? It is the right doctype to use, as the javscript code we’ll add later will turn a html table into a HTML 5 canvas.

Step 2: Adding data

Now that we downloaded the javascript files and created an html document, it’s time to add data. Copy the code below and paste it within the and tags of your charts.html file.

Visits from August 16 to August 21
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
CatsWhoCode.com12541112041135410058987182545477
WpRecipes.com9855887087317488815965474512
CatsWhoBlog.com324125442597310821142045950

Of course, feel free to add your own data to make the example more interesting for you.

Step 3: Let the magic happen

Alright, now we have a bunch of downloaded files and an html document. It’s time to merge them all together and finally generate the chart.
Unzip the downloaded file and open the extracted directory. Copy the following files into your chart directory.

charting/css/basic.csscharting/css/visualize.csscharting/css/visualize-light.csscharting/js/visualize.js

Once done, we obviously have to link the css and javascript files to our document. Paste the following after the tag of the document:</p><link href="basic.css" type="text/css" rel="stylesheet" /><link href="visualize.css" type="text/css" rel="stylesheet" /><link href="visualize-light.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="visualize.js"></script><p>It’s time to give life to our chart. Paste the final piece of code after the script calls:</p><script type="text/javascript">$(function(){$('table').visualize();});</script><p>Once you saved the file, your HTML table should be displayed along with a good looking chart. If you don’t want the table to be visible, simply hide it using the display:none css property.</p>Additional explanations<p>Generating bar charts is definitely great, but what if your preference goes to a pie chart? No problem, visualize.js allows 4 different type of charts: Bar, area, pie and line.</p><p>Changing the default type is pretty easy: Just add the type parameter as shown below:</p>$('table').visualize({type: 'pie'});<p>Cool, isn’t it? Visualize.js accepts even more parameters to make sure your chart will look exactly how you want. Here are the parameters which can be used:</p>type: string. Accepts ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.width: number. Width of chart. Defaults to table widthheight: number. Height of chart. Defaults to table heightappendTitle: boolean. Add title to chart. Default: true.title: string. Title for chart. Defaults to text of table’s Caption element.appendKey: boolean. Adds the color key to the chart. Default: true.colors: array. Array items are hex values, used in order of appearance. Default: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].parseDirection: string. Direction to parse the table data. Accepts ‘x’ and ‘y’. Default: ‘x’.pieMargin: number. Space around outer circle of Pie chart. Default: 20.pieLabelPos: string. Position of text labels in Pie chart. Accepts ‘inside’ and ‘outside’. Default: ‘inside’.lineWeight: number. Stroke weight for lines in line and area charts. Default: 4.barGroupMargin: number. Space around each group of bars in a bar chart. Default: 10.barMargin: number. Creates space around bars in bar chart (added to both sides of each bar). Default: 1<p>That’s all for today. Have fun with the charts <imgsrc='http://www.catswhocode.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><div <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-icons'> <span class='item-control blog-admin pid-1395533444'> <a href='https://www.blogger.com/post-edit.g?blogID=5003199952258966910&postID=1536321575627121564&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> </div> <div class='post-footer-line post-footer-line-2'></div> <div class='post-footer-line post-footer-line-3'></div> <div class='social'> <strong>Share this article:</strong> <a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='Tweet this!' src='http://lh4.ggpht.com/_Kwwy9VyLMKw/S3qFl7aSr7I/AAAAAAAAC0Q/PI87tNoY8Js/twitter.png'/></a> <a href='http://www.stumbleupon.com/submit?url=https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html&title=How to easily create charts using jQuery and HTML5' rel='external nofollow' target='_blank' title='StumbleUpon.'><img alt='StumbleUpon' src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qFliGha6I/AAAAAAAAC0M/kHvClkHj8tI/stumbleupon.png'/></a> <a href='http://digg.com/submit?phase=2url=https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html&title=How to easily create charts using jQuery and HTML5' rel='external nofollow' target='_blank' title='Digg this!'><img alt='Digg This!' src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qFK3WEB8I/AAAAAAAACzw/s2RHibzh2-M/digg.png'/></a> <a href='http://del.icio.us/post?url=https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html&title=How to easily create charts using jQuery and HTML5' target='_blank'><img alt='Bookmark on Delicious' src='http://lh3.ggpht.com/_Kwwy9VyLMKw/S3qFKUOPWgI/AAAAAAAACzs/IwukiZwi0Is/delicious.png'/></a> <a href='http://www.facebook.com/share.php?u=https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html&title=How to easily create charts using jQuery and HTML5' rel='nofollow' title='Share this on Facebook'><img alt='Share on Facebook' id='sharethis-last' src='http://lh4.ggpht.com/_Kwwy9VyLMKw/S3qFb0oSsVI/AAAAAAAACz0/l9e5qG649U0/facebook.png'/></a> </div> <div class='clear'></div> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 comments: </h4> <dl class='avatar-comment-indent' id='comments-block'> </dl> <p class='comment-footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Post a Comment</h4> <p> </p> <a href='https://www.blogger.com/comment/frame/5003199952258966910?po=1536321575627121564&hl=en&saa=85391&origin=https://guyswhocode.blogspot.com' id='comment-editor-src'></a> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <!--Can't find substitution for tag [post.friendConnectJs]--> <script src='https://www.blogger.com/static/v1/jsbin/4212676325-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0'); </script> </div> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> <!--Can't find substitution for tag [defaultAdEnd]--> <div class='inline-ad'> <script type="text/javascript"><!-- google_ad_client="pub-7236285611865348"; google_ad_host="pub-1556223355139109"; google_ad_width=300; google_ad_height=250; google_ad_format="300x250_as"; google_ad_type="text_image"; google_ad_host_channel="0001"; google_color_border="FFFFFF"; google_color_bg="FFFFFF"; google_color_link="0000FF"; google_color_url="008000"; google_color_text="000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!--Can't find substitution for tag [adStart]--> <!--Can't find substitution for tag [adEnd]--> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://guyswhocode.blogspot.com/2010/12/php-snippets-to-interact-with-twitter_20.html' id='Blog1_blog-pager-newer-link' title='Newer Post'><img alt='newer post' src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qFKL1DuAI/AAAAAAAACzg/UseFjixu7Qw/but_next.png'/></a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://guyswhocode.blogspot.com/2010/12/enhance-your-web-forms-with-new-html5.html' id='Blog1_blog-pager-older-link' title='Older Post'><img alt='older post' src='http://lh5.ggpht.com/_Kwwy9VyLMKw/S3qFKAce4dI/AAAAAAAACzk/_3EB5x1jkqE/but_prev.png'/></a> </span> <a class='home-link' href='https://guyswhocode.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='https://guyswhocode.blogspot.com/feeds/1536321575627121564/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a> </div> </div> </div></div> </div> <div id='sidebar-wrapper'> <!-- begin search box --> <div class='clearfix' id='searchBox'> <form action='/search' id='searchform' method='get'> <label for='s'> </label><input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value=''/> </form> </div> <!-- end search box --> <div class='sidebar section' id='sidebar'><div class='widget AdSense' data-version='1' id='AdSense1'> <div class='widget-content'> <script type="text/javascript"><!-- google_ad_client="pub-7236285611865348"; google_ad_host="pub-1556223355139109"; google_alternate_ad_url="http://img1.blogblog.com/img/blogger_ad160x600.html"; google_ad_width=160; google_ad_height=600; google_ad_format="160x600_as"; google_ad_type="text_image"; google_ad_host_channel="0001"; google_color_border="FFFFFF"; google_color_bg="FFFFFF"; google_color_link="0000FF"; google_color_url="008000"; google_color_text="000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class='clear'></div> </div> </div><div class='widget Label' data-version='1' id='Label1'> <h2>Labels</h2> <div class='widget-content list-label-widget-content'> <ul> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/Awesome'>Awesome</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/blogger'>blogger</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/buttons'>buttons</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/charts'>charts</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/create'>create</a> <span dir='ltr'>(5)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/development'>development</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/easier'>easier</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/easily'>easily</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/Enhance'>Enhance</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/ezSQL'>ezSQL</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/features'>features</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/forms'>forms</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/hacks'>hacks</a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/HTML5'>HTML5</a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/interact'>interact</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/Javascript'>Javascript</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/jQuery'>jQuery</a> <span dir='ltr'>(3)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/kick-ass'>kick-ass</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/kickass'>kickass</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/Mobile'>Mobile</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/modern'>modern</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/practices'>practices</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/progress'>progress</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/queries'>queries</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/snippets'>snippets</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/theme'>theme</a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/tutorials'>tutorials</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/Twitter'>Twitter</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/useful'>useful</a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/using'>using</a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://guyswhocode.blogspot.com/search/label/WordPress'>WordPress</a> <span dir='ltr'>(5)</span> </li> </ul> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='https://guyswhocode.blogspot.com/2010/'>2010</a> <span class='post-count' dir='ltr'>(19)</span> <ul> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='https://guyswhocode.blogspot.com/2010/12/'>December</a> <span class='post-count' dir='ltr'>(19)</span> <ul class='posts'> <li><a href='https://guyswhocode.blogspot.com/2010/12/best-practices-for-modern-javascript_20.html'>Best practices for modern Javascript development</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/10-useful-new-wordpress-hacks_20.html'>10 useful new WordPress hacks</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/how-to-create-kick-ass-css3-progress_20.html'>How to create a kick-ass CSS3 progress bar</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/top-10-css3-buttons-tutorials_20.html'>Top 10 CSS3 buttons tutorials</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/how-to-create-mobile-wordpress-theme_20.html'>How to create a mobile WordPress theme with jQuery...</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/awesome-wordpress-hacks-to-make-your_20.html'>Awesome WordPress hacks to make your blogger life ...</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using_20.html'>How to easily create charts using jQuery and HTML5</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/enhance-your-web-forms-with-new-html5_20.html'>Enhance your web forms with new HTML5 features</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/php-fast-and-easy-sql-queries-using_20.html'>PHP: Fast and easy SQL queries using ezSQL</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/php-snippets-to-interact-with-twitter_20.html'>PHP snippets to interact with Twitter</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html'>How to easily create charts using jQuery and HTML5</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/enhance-your-web-forms-with-new-html5.html'>Enhance your web forms with new HTML5 features</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/top-10-css3-buttons-tutorials.html'>Top 10 CSS3 buttons tutorials</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/10-useful-new-wordpress-hacks.html'>10 useful new WordPress hacks</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/best-practices-for-modern-javascript.html'>Best practices for modern Javascript development</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/how-to-create-kick-ass-css3-progress.html'>How to create a kick-ass CSS3 progress bar</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/php-fast-and-easy-sql-queries-using.html'>PHP: Fast and easy SQL queries using ezSQL</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/php-snippets-to-interact-with-twitter.html'>PHP snippets to interact with Twitter</a></li> <li><a href='https://guyswhocode.blogspot.com/2010/12/awesome-wordpress-hacks-to-make-your.html'>Awesome WordPress hacks to make your blogger life ...</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div> <div id='footer-bg'> <div id='footer-wrapper'> <div id='footer1'> <div class='footer no-items section' id='footer-1'></div> </div> <div id='footer2'> <div class='footer no-items section' id='footer-2'></div> </div> <div id='footer3'> <div class='footer no-items section' id='footer-3'></div> </div> <div class='clear'></div> </div> <div id='copyright'> <div id='copyrightInner'> <div id='credits_left'> Copyright <a href='https://guyswhocode.blogspot.com/'>Web Development Help</a> </div> <div id='credits_right'> Design by<a href='http://www.site5.com/in.php?id=81811' title='site5'> site5 </a> Blogger Theme by<a href='http://www.BloggerThemes.net' title='Bloggerthemes'> BloggerThemes</a> </div> </div> </div> </div> </div> <!-- end outer-wrapper --> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1601900224-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY5pT8rlbEI2Rdoc_bq2r9WWRiiRuw:1763397678226';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5003199952258966910','//guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html','5003199952258966910'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5003199952258966910', 'title': 'Web Development Help', 'url': 'https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html', 'canonicalUrl': 'http://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html', 'homepageUrl': 'https://guyswhocode.blogspot.com/', 'searchUrl': 'https://guyswhocode.blogspot.com/search', 'canonicalHomepageUrl': 'http://guyswhocode.blogspot.com/', 'blogspotFaviconUrl': 'https://guyswhocode.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Development Help - Atom\x22 href\x3d\x22https://guyswhocode.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Web Development Help - RSS\x22 href\x3d\x22https://guyswhocode.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Development Help - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5003199952258966910/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Web Development Help - Atom\x22 href\x3d\x22https://guyswhocode.blogspot.com/feeds/1536321575627121564/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-7236285611865348', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/100d2c6f8e2be9d1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '1536321575627121564', 'pageName': 'How to easily create charts using jQuery and HTML5', 'pageTitle': 'Web Development Help: How to easily create charts using jQuery and HTML5'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to easily create charts using jQuery and HTML5', 'description': ' Step 1: Preparing files Here we go! The first thing to do is obviously to create a directory on your Mac (or PC, nobody\u2019s perfect ). You s...', 'url': 'https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 1536321575627121564}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3301430289-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar', document.getElementById('AdSense1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); </script> </body> </html>