Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Tool to visualize stats of over time
<!--Load the AJAX API-->
<style type="text/css">
#input {
#text {
#output {
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
// Load the Visualization API and the annotatedtimeline chart package.
google.load("visualization", "1", {packages: ['annotatedtimeline']});
// Set a callback to run when the Google Visualization API is loaded.
// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function doStuff() {
$("#showinput").click(function(){ $("#showinput").prop('disabled', true); $("#showoutput").prop('disabled', false); $("#input").show(); $("#output").hide(); });
$("#showoutput").click(function(){ $("#showinput").prop('disabled', false); $("#showoutput").prop('disabled', true); $("#input").hide(); $("#output").show(); });
var tzo = new Date().getTimezoneOffset() / -60;
$("#enter").click(function(){ drawChart( $("#text").val(), $("#itz").val(), $("#otz").text() ) });
function drawChart(raw, itz, otz) {
var tzOffset = otz - itz;
// Create the data table.
var data = new google.visualization.DataTable();
var lines = raw.split(/\r?\n/);
var l, f;
var fields = lines[0].split(",");
data.addColumn('datetime', fields[0]);
for (f = 1; f < fields.length; ++f) {
data.addColumn('number', fields[f]);
data.addRows(lines.length - 1);
for (l = 1; l < lines.length; ++l) {
fields = lines[l].split(",");
var d = new Date();
var m = fields[0].match(/^(\d\d?)\.(\d\d?)\.(\d\d\d\d) (\d\d?):(\d\d)$/);
if (!m) continue;
d.setMonth(m[2] - 1);
// Roflcopter TZ to my TZ?
d.setTime ( d.getTime() + tzOffset * 60 * 60 * 1000 );
data.setValue(l-1, 0, d);
data.setValue(l-1, 1, parseFloat(fields[1]));
for (f = 2; f < fields.length; ++f) {
if (f != 3) {
data.setValue(l-1, f, parseInt(fields[f]));
// Instantiate and draw our chart, passing in some options.
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('output'));
$("#showinput").prop('disabled', false);
$("#showoutput").prop('disabled', true);
annotatedtimeline.draw(data, {'displayAnnotations': true, 'scaleType': 'allmaximized'});
<div id="app">
<button id="showinput" disabled="disabled">Input</button> <button id="showoutput">Output</button> (Timezone difference: <span id="tzdiff">?</span>)
<div id="input" style="display:block">
<textarea id="text"></textarea>
Input timezone: <input id="itz">?</input><button id="enter">Enter</button>
Output timezone: <span id="otz">?</span>
<!--Div that will hold the chart-->
<div id="output" style="display:none">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment