Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (108 sloc) 5.581 kB
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/logic.js"></script>
</head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<title>Interactive Charts for Dummies | Hack Day Project Sept. 22, 2011</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.wheelcolorpicker.min.js"></script>
<script src="js/logic.js"></script>
<script type='text/javascript'>
$(function() {
$('.colorpicker').wheelColorPicker({dir: 'images'});
$('.title-colorpicker').wheelColorPicker({dir: 'images', color: '000000'});
$('.bar-colorpicker').wheelColorPicker({dir: 'images', color: '6699cc'});
<div class="container">
<div id="header" class="span-24 last">
<h1>Interactive Bar Charts Generator | Hack Day Project Sept. 22, 2011</h1>
<p>Convert your Excel data into <a href="">simple google interactive chart</a>. A project for Hacks/Hackers Hack Day 2011.</p>
</div><!-- end #header -->
<div class="span-24 last">
<div class="title" name="title" onfocus="" onkeyup="">
<label for="title"></label>
<input id="title" type="text" size="40" value="Name your bar chart" onclick="javascript:this.focus();;">
<label for="titlesize">Title size:</label>
<select id="titlesize">
<option value="8">8 px</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="14">14 px</option>
<option value="16">16 px</option>
<option value="18">18 px</option>
<label for="titlecolor">Title color:</label>
<input type="text" size="40" name="title-color" class="title-colorpicker colorpicker"></input>
<div class="span-11 colborder">
<h2>Data <span class="quiet tiny">Copy &amp; paste your Excel data here</span></h2>
<textarea id="data" class="fullwidth" onkeyup="getData()"></textarea>
<h2>Chart options</h2>
<div class="type" onfocus="" onkeyup="">
<div><input type="radio" name="charttype" value="h" id="horitype" /> <label for="horitype"> <img src="images/hori-type.png" width="16" height="12"> Horizontal</label> <input type="radio" name="charttype" value="v" id="verttype" /> <label for="verttype"><img src="images/vert-type.png" width="16" height="12"> Vertical</label></div>
<div class="size" id="size" name="size" onfocus="" onkeyup="">
<h4>Size <span class="quiet small">(in pixel)</span></h4>
<input type="text" name="chartwidth" id="chartwidth" length="5" size="8" onkeyup="updateCode()" value="600" onclick="javascript:this.focus();;">
<input type="text" name="chartheight" id="chartheight" length="5" size="8" onkeyup="updateCode()" value="300" onclick="javascript:this.focus();;">
<div class="color" id="chartcolor" name="chartcolor" onfocus="" onkeyup="">
<label for="canvas-color">Canvas background color</label>
<input type="text" size="40" name="canvas-color" class="colorpicker"></input><br/>
<label for="chart-color">Chart background color</label>
<input type="text" size="40" name="chart-color" class="colorpicker"></input><br/>
<label for="bar-color">Bar color</label>
<input type="text" size="40" name="bar-color" class="bar-colorpicker colorpicker"></input>
<div class="span-12 last">
<div id="preview-canvas">
<a class="button positive generate"><img src="images/icons/tick.png"> Generate code</a><br/><br/>
<h2>Embed code <span class="quiet tiny">Copy &amp; paste this into an HTML in your CMS/Blog</span></h2>
<textarea id="codeOutput" class="fullwidth"></textarea>
<div class="span-24 last center" id="footer">
As part of Hacks/Hackers <a href="">ONA Hack Day</a> by <a href="">Daigo Fujiwara</a>, <a href="">Kevin Shaul</a>, <a href="">Erika Owens</a>, <a href="">Kieth Robinson, <a href="">Michael Pereira</a>, and <a href=""> Pattie Reaves</a>
</div> <!-- end .container -->
<form id="example-form" name="example-form">
<textarea id="data" type="textarea" cols="50" rows="20"></textarea>
<input type="submit" value="Submit" />
Jump to Line
Something went wrong with that request. Please try again.