Skip to content

HTTPS clone URL

Subversion checkout URL

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

Cannot retrieve contributors at this time

142 lines (108 sloc) 5.581 kB
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js"></script>
</head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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" />
<![endif]-->
<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'});
});
</script>
</head>
<body>
<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="http://code.google.com/apis/chart/image/docs/making_charts.html">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();this.select();">
<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>
</select>
<label for="titlecolor">Title color:</label>
<input type="text" size="40" name="title-color" class="title-colorpicker colorpicker"></input>
</div>
</div>
<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="">
<h4>Type</h4>
<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>
<div class="size" id="size" name="size" onfocus="" onkeyup="">
<h4>Size <span class="quiet small">(in pixel)</span></h4>
<label>Width</label>
<input type="text" name="chartwidth" id="chartwidth" length="5" size="8" onkeyup="updateCode()" value="600" onclick="javascript:this.focus();this.select();">
<label>Height</label>
<input type="text" name="chartheight" id="chartheight" length="5" size="8" onkeyup="updateCode()" value="300" onclick="javascript:this.focus();this.select();">
</div>
<div class="color" id="chartcolor" name="chartcolor" onfocus="" onkeyup="">
<h4>Color</h4>
<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>
</div>
<div class="span-12 last">
<h2>Preview</h2>
<div id="preview-canvas">
PREVIEW GOES HERE
</div>
<div>
<p>
<a class="button positive generate"><img src="images/icons/tick.png"> Generate code</a><br/><br/>
</p>
</div>
<div>
<h2>Embed code <span class="quiet tiny">Copy &amp; paste this into an HTML in your CMS/Blog</span></h2>
<br>
<textarea id="codeOutput" class="fullwidth"></textarea>
</div>
</div>
<div class="span-24 last center" id="footer">
<p>
As part of Hacks/Hackers <a href="http://meetupbos.hackshackers.com/events/17319807/?eventId=17319807&action=detail&rv=rv17&rv=rv17">ONA Hack Day</a> by <a href="http://twitter.com/daigofuji">Daigo Fujiwara</a>, <a href="http://twitter.com/foxyninja7">Kevin Shaul</a>, <a href="http://twitter.com/erika_owens">Erika Owens</a>, <a href="http://twitter.com/kdawg39">Kieth Robinson, <a href="http://twitter.com/monkeycycle_org">Michael Pereira</a>, and <a href="http://twitter.com/pazzypunk"> Pattie Reaves</a>
</p>
</div>
</div> <!-- end .container -->
</body>
</html>
<body>
<form id="example-form" name="example-form">
<textarea id="data" type="textarea" cols="50" rows="20"></textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.