Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 210 lines (169 sloc) 12.3 KB
<!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 Bar/Fever Chart Generator | Convert your spreadsheet into Google Chart Tool | 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/underscore-min.js"></script>
<script src="js/logic.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div class="container">
<div id="header" class="span-24 last">
<h1><img src="images/bar.png" alt="" width="27" height="17" border="0" /> Interactive Bar/Fever Chart Generator</h1>
<p>Convert your spreadsheet data into <a href="http://code.google.com/apis/chart/image/docs/making_charts.html"> google chart</a>. A <a href="http://hackshackers.com/hacking-at-ona11/">Hacks/Hackers Hack Day @ ONA2011</a> project.<br />
<strong>How to format your data</strong>: For Example,
<a href="https://docs.google.com/spreadsheet/ccc?key=0Apvvlouo3eMgdFZWeUNPQ1pjYXJINmtSOW9YZ09ISEE&hl=en_US" target="_blank">this spreadsheet</a> will produce <a href="examples/example-unemployment.html" target="_blank">this</a>, <a href="https://docs.google.com/a/daigofujiwara.com/spreadsheet/ccc?key=0Apvvlouo3eMgdG50R3ZCWWZnMUNOeVB1QWM3ai1tamc&hl=en_US#gid=0" target="_blank">this spreadsheet</a> will produce <a href="examples/example-beckett-era.html" target="_blank">this</a>, and <a href="https://docs.google.com/a/daigofujiwara.com/spreadsheet/ccc?key=0Apvvlouo3eMgdDZOLUdRNlh5dkRvQjRxVzM0UkNGQmc&hl=en_US#gid=0" target="_blank">this spreadsheet</a> will produce <a href="examples/example-usmedian-income.html" target="_blank">this</a>.<br/>
<a href="http://interactivechartsfordummies-pazzypunk.dotcloud.com/">pazzypunk's dotcloud URL</a>, <a href="http://charts.daigofujiwara.com/">daigo's mirror site URL</a> and shortened at: <a href="http://bit.ly/charttool">bit.ly/charttool</a>. Check out the <a href="https://github.com/pazzypunk/interactive_charts_for_dummies">github repo <img src="images/github.png" alt="github repo" width="16" height="16" /></a>. <a href="https://docs.google.com/document/d/1vekp8TzdLXnKgNC4k9BXE6sQIT3ypIWWhqOh0MDQLQ0/edit?hl=en_US">Google doc</a> memo</p>
<p><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7db41d045e7543"></script -->
<!-- AddThis Button END --></p>
</div><!-- end #header -->
<div class="span-24 last">
<div class="title" name="title">
<label>Do you want headline for this chart displayed?:</label>
<input type="radio" name="wanttitle" value="titleyes" id="titleyes" checked="checked" /><label for="titleyes"> Yes</label>
<input type="radio" name="wanttitle" value="titleno" id="titleno" /> <label for="titleno"> No</label>
<div id="titleoption">
<label for="title"></label>
<input id="title" type="text" size="40" value="Name your chart" onclick="javascript:this.focus();this.select();">
<label for="titlesize">Headline size:</label>
<select id="titlesize">
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16" selected="selected">16 px</option>
<option value="18">18 px</option>
<option value="20">20 px</option>
<option value="22">22 px</option>
<option value="24">24 px</option>
<option value="28">28 px</option>
<option value="32">32 px</option>
</select>
<label for="titlecolor">Headline color:</label>
<input type="text" size="40" id="title-color" name="title-color" class="title-colorpicker colorpicker"></input>
</div>
</div>
</div>
<div class="span-11 colborder">
<h2>Data <span class="quiet tiny">Copy &amp; paste your spreadsheet data here, i.e. <a href="https://docs.google.com/spreadsheet/ccc?key=0Apvvlouo3eMgdFZWeUNPQ1pjYXJINmtSOW9YZ09ISEE&hl=en_US" target="_blank">1</a>, <a href="https://docs.google.com/a/daigofujiwara.com/spreadsheet/ccc?key=0Apvvlouo3eMgdG50R3ZCWWZnMUNOeVB1QWM3ai1tamc&hl=en_US#gid=0" target="_blank">2</a>, <a href="https://docs.google.com/a/daigofujiwara.com/spreadsheet/ccc?key=0Apvvlouo3eMgdDZOLUdRNlh5dkRvQjRxVzM0UkNGQmc&hl=en_US#gid=0" target="_blank">3</a></span></h2>
<p id="data-processed" class="success"><img src="images/icons/tick.png" alt=""> Data processed.</p>
<p id="data-error" class="error"><img src="images/icons/cross.png" alt=""> Data may contain invalid characters. Try <a href="javascript:void(0);" class="showdebug">debugging it</a> below.</p>
<textarea id="data" class="fullwidth" onchange="processData()"></textarea>
<div class="datatype-select"><em>Data type: </em>
<input type="radio" name="datatype" value="num" id="num" checked="checked" onchange="processData()" /> <label for="num"> Number</label>
<input type="radio" name="datatype" value="pct" id="pct" onchange="processData()" /> <label for="pct"> Percentage (%)</label>
<input type="radio" name="datatype" value="dol" id="dol" onchange="processData()" /> <label for="dol"> Currency ($)</label>
</div>
<p class="quiet" style="text-align:right;">Problem processing the data? Try <a href="javascript:void(0);" class="showdebug">debugging it.</a></p>
<div class="option" style="border-left:1px solid #999;" id="debug">
<!-- eventually delete this from here -->
<h4>Data Labels <span class="quiet small">Enter comma separated value.</span></h4>
Name labels (i.e. Year, Month...): <input type="text" id="chartlabelsname" value=""></input><br/>
<input type="text" id="chartlabels" value=""></input>
<h4>Data Values <span class="quiet small">Enter comma separated value, only numbers.</span></h4>
Name of data: <input type="text" id="chartdataname" value=""></input><br/>
<input type="text" id="chartdata" value=""></input>
<div class="datatype-select">Formatted data:
<br/>
<input type="text" id="chartformatteddata" value=""></input>
</div>
<!-- to here -->
</div>
<h2>Chart options</h2>
<div class="type option" >
<h4>Type</h4>
<div><input type="radio" name="charttype" value="BarChart" id="horitype" checked="checked" /> <label for="horitype"> <img src="images/hori-type.png" width="16" height="12"> Horizontal Bar</label>
<input type="radio" name="charttype" value="ColumnChart" id="verttype" /> <label for="verttype"><img src="images/vert-type.png" width="16" height="12"> Vertical Bar</label>
<input type="radio" name="charttype" value="LineChart" id="linetype" /> <label for="linetype"><img src="images/line-type.png" width="16" height="12"> Fever</label>
</div>
</div>
<div class="size option" id="size" name="size">
<h4>Size <span class="quiet small">(in pixel)</span></h4>
<label for="chartwidth">Width</label>
<input type="text" name="chartwidth" id="chartwidth" length="5" size="8" value="330" onclick="javascript:this.focus();this.select();">
<label for="chartheight">Height</label>
<input type="text" name="chartheight" id="chartheight" length="5" size="8" value="300" onclick="javascript:this.focus();this.select();">
</div>
<div class="color option" id="chartcolor" name="chartcolor">
<h4>Color</h4>
<!-- <label for="canvas-color">Canvas background color</label>
<input type="text" size="40" id="canvas-color" name="canvas-color" class="colorpicker"></input><br/> -->
<label for="chart-color">Background </label>
<input type="text" size="40" id="chart-color" name="chart-color" class="colorpicker"></input><br/>
<label for="bar-color">Bar or line </label>
<input type="text" size="40" id="bar-color" name="bar-color" class="bar-colorpicker colorpicker"></input> <a href="javascript:void(0);" id="changeBlue">Blue</a>, <a href="javascript:void(0);" id="changeRed">Dark Red</a>
</div>
<div class="maxmin option">
<h4>Max/Min <span class="quiet small">For zero baseline, set minValue to "0". Default is "automatic".</span></h4>
<!-- hAxis vAxis:{minValue:"0", maxValue:"10"} -->
<label for="minv">minValue</label>
<input type="text" name="minv" id="minv" length="5" size="8" value="automatic" onclick="javascript:this.focus();this.select();">
<label for="maxv">maxValue</label>
<input type="text" name="maxv" id="maxv" length="5" size="8" value="automatic" onclick="javascript:this.focus();this.select();">
</div>
<div class="legend option" id="chartlegend">
<h4>Legend position</h4>
<label for="legend-position"></label>
<select id="legend-position">
<option value="none">No legend</option>
<option value="top">Top</option>
<option value="right">Right</option>
<option value="bottom">Bottom</option>
</select>
</div>
<div class="did option" id="chartcolor" name="chartcolor">
<h4>Give unique "id" for html div tag</h4>
<input type="text" size="40" id="chartdivid" name="chartdivid" value="chart_div"></input><br/>
<p>Change this if you plan to have multiple charts on one page. <a href="javascript:void(0);" id="randomchartdivid">Randomize</a></p>
</div>
</div>
<div class="span-12 last">
<h2>Preview</h2>
<script type="text/javascript">google.load("visualization", "1", {packages:["corechart"]});</script>
<div id="preview-canvas">
</div>
<div class="renderbutton">
<input type="submit" class="button" id="renderChart" name="renderChart" value="Generate code" />
</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" onclick="javascript:this.focus();this.select();"></textarea>
<p>Tips: Try changing configuration options of <a href="http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Configuration_Options" target="_blank">horizontal chart</a>, <a href="http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html#Configuration_Options" target="_blank">vertical chart</a>, or <a href="http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options" target="_blank">fever chart</a></p>
<h6>Bonus: <a href="http://code.google.com/apis/chart/image/">Google Image Charts</a> <a href="javascript:void(0);" class="small" id="showimgchart">SHOW</a></h6>
<div id="imgchart">
<textarea id="codeImgOutput" class="fullwidth"></textarea>
<img id="chartPreview" src="images/bar.png">
</div>
</div>
</div>
<div class="span-24 last center" id="footer">
<p>
Created as part of <a href="http://meetupbos.hackshackers.com/events/17319807/?eventId=17319807&action=detail&rv=rv17&rv=rv17">Hack Day @ ONA11</a> Project on September 22, 2011, by <a href="http://about.me/daigofujiwara">Daigo Fujiwara</a>, <a href="http://twitter.com/foxyninja7">Kevin Schaul</a>, <a href="http://twitter.com/erika_owens">Erika Owens</a>, <a href="http://twitter.com/kdawg39">Keith Robinson, <a href="http://twitter.com/monkeycycle_org">Michael Pereira</a>, <a href="http://twitter.com/stannenb">Saul Tannenbaum</a>, and <a href="http://twitter.com/pazzypunk"> Pattie Reaves</a>. The project won <a href="http://hackshackers.com/hacking-at-ona11/">Most Practical award</a>. Yay!
</p>
</div>
</div> <!-- end .container -->
</body>
</html>