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 | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
|---|
| CatsWhoCode.com | 12541 | 11204 | 11354 | 10058 | 9871 | 8254 | 5477 |
|---|
| WpRecipes.com | 9855 | 8870 | 8731 | 7488 | 8159 | 6547 | 4512 |
|---|
| CatsWhoBlog.com | 3241 | 2544 | 2597 | 3108 | 2114 | 2045 | 950 |
|---|
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</em> 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><strong>type:</strong> string</em>. Accepts ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.<strong>width:</strong> number</em>. Width of chart. Defaults to table width<strong>height:</strong> number</em>. Height of chart. Defaults to table height<strong>appendTitle:</strong> boolean</em>. Add title to chart. Default: true.<strong>title:</strong> string</em>. Title for chart. Defaults to text of table’s Caption element.<strong>appendKey:</strong> boolean</em>. Adds the color key to the chart. Default: true.<strong>colors:</strong> array</em>. Array items are hex values, used in order of appearance. Default: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']<strong>textColors:</strong> array</em>. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].<strong>parseDirection:</strong> string</em>. Direction to parse the table data. Accepts ‘x’ and ‘y’. Default: ‘x’.<strong>pieMargin:</strong> number</em>. Space around outer circle of Pie chart. Default: 20.<strong>pieLabelPos:</strong> string</em>. Position of text labels in Pie chart. Accepts ‘inside’ and ‘outside’. Default: ‘inside’.<strong>lineWeight:</strong> number</em>. Stroke weight for lines in line and area charts. Default: 4.<strong>barGroupMargin:</strong> number</em>. Space around each group of bars in a bar chart. Default: 10.<strong>barMargin:</strong> 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<br />This post was made using the <a href='http://www.webmagnates.org/auto-blogging-software.html' title='auto-blogging software'>Auto Blogging Software</a> from <a href='http://www.webmagnates.org' title'make money online'>WebMagnates.org</a> This line will not appear when posts are made after activating the software to full version.
<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=3381792259335289431&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='clear'></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]-->
<div class='post hentry'>
<a name='4948953742612078444'></a>
<h3 class='post-title entry-title'>
<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>
</h3>
<div class='post-header-line-1'><span class='post-author vcard'>
Posted by
<span class='fn'>Zero</span>
</span>
<span class='post-timestamp'>
at
<a class='timestamp-link' href='https://guyswhocode.blogspot.com/2010/12/enhance-your-web-forms-with-new-html5_20.html' rel='bookmark' title='permanent link'><abbr class='published' title='2010-12-20T19:09:00-08:00'>7:09 PM</abbr></a>
</span>
<span class='post-labels'>
Labels:
<a href='https://guyswhocode.blogspot.com/search/label/Enhance' rel='tag'>Enhance</a>,
<a href='https://guyswhocode.blogspot.com/search/label/features' rel='tag'>features</a>,
<a href='https://guyswhocode.blogspot.com/search/label/forms' rel='tag'>forms</a>,
<a href='https://guyswhocode.blogspot.com/search/label/HTML5' rel='tag'>HTML5</a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://guyswhocode.blogspot.com/2010/12/enhance-your-web-forms-with-new-html5_20.html#comment-form' onclick=''>0
comments</a>
</span>
</div>
<div class='post-body entry-content'>
Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.</p>Required fields<p>Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.</p><p>In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:</p><input type="text" name="client_name" required><p>And on the CSS side, something like</p>input:required { border: 1px red solid;}<p>will save you a lot of time.</p><p>Two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.</p>Placeholders<p>In a form, an input field always has a label explaining what kind of information is required. While you can currently use the label tag to display a label for a specific text field, HTML5 introduces the placeholder attribute. As shown below, using it is pretty simple:</p><input name="firstname" placeholder="Please enter your first name"><p>The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.</p><p>The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:</p>Autofocus<p>A new HTML5 attribute is named autofocus. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.</p><p>Nothing complicated, just use the syntax below, and <strong>remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0</strong>.</p><input name="search" autofocus>Email fields<p>Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named email.</p><input name="email" type="email">Pattern attribute<p>When validating a web form, we have to validate the data entered by the visitor. The new pattern HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.</p><p>This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.</p><input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>Url fields<p>Nowadays, many people have a website, blog, or at least a <ahref="http://www.twitter.com/catswhocode">Twitter profile</a>. This is why many web forms offer the possibility to enter an url.</p><p>HTML5 introduces a new type for the input element, designed specifically for entering urls:</p><input name="url" type="url"><p>Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.</p>Date pickers<p>Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the date type for the input element:</p><input name="day" type="date"><p>When clicked, the date attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.</p><p>Note that a date picker can be implemented on your forms using the following types:</p><input type="date"><input type="datetime"><input type="month"><input type="week"><input type="time"><p>Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On <ahref="http://www.unchi.co.uk/2010/05/17/html5-date-picker-with-fallback/">this site</a> I found a simple fallback implementation for the input type=date HTML5 attribute:</p>var i = document.createElement("input");i.setAttribute("type", "date");if (i.type == "text") { // No HTML5 native date picker support, use jQuery or your favorite framework to create one.}Search boxes<p>To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.</p><input name="q" type="search"><p>For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.</p>Sliders type and step attribute<p>HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.</p><input name="number" type="range" min="0" max="10"><p>The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:</p><input name="number" type="range" min="0" max="10" step="2" ><p>That way, visitors will only be able to select numbers like 0, 2, 4, and so on.</p><div<br />This post was made using the <a href="http://www.webmagnates.org/auto-blogging-software.html" title="auto-blogging software">Auto Blogging Software</a> from <a href="http://www.webmagnates.org">WebMagnates.org</a> This line will not appear when posts are made after activating the software to full version.
<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=4948953742612078444&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='clear'></div>
</div>
</div>
<h2 class='date-header'>Wednesday, December 15, 2010</h2>
<div class='post hentry'>
<a name='1536321575627121564'></a>
<h3 class='post-title entry-title'>
<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>
</h3>
<div class='post-header-line-1'><span class='post-author vcard'>
Posted by
<span class='fn'>Zero</span>
</span>
<span class='post-timestamp'>
at
<a class='timestamp-link' href='https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html' rel='bookmark' title='permanent link'><abbr class='published' title='2010-12-15T00:58:00-08:00'>12:58 AM</abbr></a>
</span>
<span class='post-labels'>
Labels:
<a href='https://guyswhocode.blogspot.com/search/label/charts' rel='tag'>charts</a>,
<a href='https://guyswhocode.blogspot.com/search/label/create' rel='tag'>create</a>,
<a href='https://guyswhocode.blogspot.com/search/label/easily' rel='tag'>easily</a>,
<a href='https://guyswhocode.blogspot.com/search/label/HTML5' rel='tag'>HTML5</a>,
<a href='https://guyswhocode.blogspot.com/search/label/jQuery' rel='tag'>jQuery</a>,
<a href='https://guyswhocode.blogspot.com/search/label/using' rel='tag'>using</a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://guyswhocode.blogspot.com/2010/12/how-to-easily-create-charts-using.html#comment-form' onclick=''>0
comments</a>
</span>
</div>
<div class='post-body entry-content'>
Step 1: Preparing files<p>Here we go! The first thing to do is obviously to create a directory on your Mac (or PC, nobody’s perfect <imgsrc='http://www.catswhocode.com/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ). You should name it chart for example. Once done, download the required Javascript and CSS files and save it on your hard drive.</p><p><imgsrc="http://cdn.catswhocode.com/blog/wp-content/uploads/2010/08/chart.png" alt="" /></p><p>Now, create a new html document, named charts.html. Copy the html structure below, and paste it into your newly created charts.html file.</p><!--DOCTYPE html--><html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><title>Charts! 
