Skip to content

Instantly share code, notes, and snippets.

@AndreiLux
Created April 17, 2014 09:33
Show Gist options
  • Save AndreiLux/10968666 to your computer and use it in GitHub Desktop.
Save AndreiLux/10968666 to your computer and use it in GitHub Desktop.
TimeAxis labels broken when passing Epoch time values
<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.5.min.js"></script>
</head>
<body>
<div id="chartContainer1">
<script type="text/javascript">
data1 = [{"t":"2014-04-13 00:00:00","v":3},{"t":"2014-04-12 00:00:00","v":4},{"t":"2014-04-11 00:00:00","v":2},{"t":"2014-04-10 00:00:00","v":2},{"t":"2014-04-07 00:00:00","v":3},{"t":"2014-04-06 00:00:00","v":4},{"t":"2014-04-05 00:00:00","v":4},{"t":"2014-04-04 00:00:00","v":5},{"t":"2014-04-03 00:00:00","v":2},{"t":"2014-04-02 00:00:00","v":1},{"t":"2014-03-31 00:00:00","v":2},{"t":"2014-03-30 00:00:00","v":4},{"t":"2014-03-29 00:00:00","v":2},{"t":"2014-03-28 00:00:00","v":1},{"t":"2014-03-27 00:00:00","v":2},{"t":"2014-03-24 00:00:00","v":2},{"t":"2014-03-23 00:00:00","v":3},{"t":"2014-03-22 00:00:00","v":3},{"t":"2014-03-21 00:00:00","v":2},{"t":"2014-03-20 00:00:00","v":1}]
var svg1 = dimple.newSvg("#chartContainer1", 700, 450);
var myChart1 = new dimple.chart(svg1, data1);
myChart1.setBounds(60, 30, 650, 300);
var x = myChart1.addTimeAxis("x", "t", "%Y-%m-%d %H:%M:%S", "%d");
x.floatingBarWidth = 15;
x.timePeriod = d3.time.day;
x.timeInterval = 1;
myChart1.addMeasureAxis("y", "v");
myChart1.addSeries(null, dimple.plot.bar);
myChart1.draw();
</script>
</div>
<div id="chartContainer2">
<script type="text/javascript">
data2 = [{"t":1397340000,"v":3},{"t":1397253600,"v":4},{"t":1397167200,"v":2},{"t":1397080800,"v":2},{"t":1396821600,"v":3},{"t":1396735200,"v":4},{"t":1396648800,"v":4},{"t":1396562400,"v":5},{"t":1396476000,"v":2},{"t":1396389600,"v":1},{"t":1396216800,"v":2},{"t":1396134000,"v":4},{"t":1396047600,"v":2},{"t":1395961200,"v":1},{"t":1395874800,"v":2},{"t":1395615600,"v":2},{"t":1395529200,"v":3},{"t":1395442800,"v":3},{"t":1395356400,"v":2},{"t":1395270000,"v":1}]
var svg2 = dimple.newSvg("#chartContainer2", 700, 450);
var myChart2 = new dimple.chart(svg2, data2);
myChart2.setBounds(60, 30, 650, 300);
var x = myChart2.addTimeAxis("x", "t", null, "%d");
x.floatingBarWidth = 15;
x.timePeriod = d3.time.day;
x.timeInterval = 1;
myChart2.addMeasureAxis("y", "v");
myChart2.addSeries(null, dimple.plot.bar);
myChart2.draw();
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment