Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active August 29, 2015 14:04
Show Gist options
  • Save timelyportfolio/db285de282e9a47f5bed to your computer and use it in GitHub Desktop.
Save timelyportfolio/db285de282e9a47f5bed to your computer and use it in GitHub Desktop.
Download ZIP
dimple define tick labels on x axis
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
<div id="volumeReport">
<script>
var svg = dimple.newSvg("#volumeReport", 590, 500);
var data = [
{"Date": "22/7/2014", "Volume" : 0},
{"Date": "15/11/2014", "Volume" : 1000},
{"Date": "5/01/2015", "Volume" : 2000},
{"Date": "5/2/2015", "Volume" : 3000},
{"Date": "31/3/2015", "Volume" : 4000}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y %H:%M:%S:%L", "%d-%m-%Y");
x.addOrderRule("Date");
x.timeField = "Date";
x.dateParseFormat = "%d/%m/%Y";
myChart.addMeasureAxis("y", "Volume");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.lineMarkers = true;
myChart.draw();
myChart.axes[0].shapes.call(
d3.svg.axis()
.orient("bottom")
.scale(myChart.axes[0]._scale)
.tickValues(data.map(function(d,i){
return d3.time.format("%d/%m/%Y").parse(d.Date)
})
)
.tickFormat(d3.time.format("%d-%m-%Y"))
)
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment