jQM 1.4 NVD3 Line Chart
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="chart">
<svg id="chartCanvas"></svg>
</div>
</div>
</div>
CSS
#chartCanvas {
background: #yellow;;
height: 300px;
width: 100%;
border: 1px solid #777;
border-radius: 8px;
box-shadow: 2px 2px 5px #888888;
}
JavaScript
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({
left: 100
}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Time (ms)')
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis //Chart y-axis settings
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'));
var reportData = [{
"key": "ActualElapsedTime",
"color": "#d62728",
"values": [{
"x": "2016-03-21T00:00:00",
"y": 100.00
}, {
"x": "2016-03-22T00:00:00",
"y": 100.00
}]
}];
/* Done setting the chart up? Time to render it!*/
d3.select('#chart svg') //Select the <svg> element you want to render the chart in.
.datum(reportData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() {
chart.update()
});
return chart;
});