juijs-chart
Version:
SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D)
69 lines (64 loc) • 2.02 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="charset=utf-8;"/>
<script src="../dist/jui-chart.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
const data = [
{ date : new Date("2015/01/01 00:00:00"), sales : 50, profit : 35, etc : 10 },
{ date : new Date("2015/01/01 06:00:00"), sales : 20, profit : 30, etc : 10 },
{ date : new Date("2015/01/01 12:00:00"), sales : 10, profit : 5, etc : 10 },
{ date : new Date("2015/01/01 18:00:00"), sales : 30, profit : 25, etc : 10 },
{ date : new Date("2015/01/02 00:00:00"), sales : 25, profit : 20, etc : 10 }
];
graph.ready([ "chart.builder", "util.time" ], function(builder, time) {
window.c = builder("#chart", {
height : 300,
padding : {
right : 120
},
axis : [
{
x : {
type : "date",
domain : [ new Date("2015/01/01"), new Date("2015/01/02") ],
interval : 1000 * 60 * 60 * 6, // // 6hours
format : "MM/dd HH:mm",
key : "date",
line : true
},
y : {
type : "range",
domain : [ 0, 100 ],
step : 5,
line : true,
orient : "right"
},
data: data
}
],
brush : [
{
type : "line",
target : [ "sales", "profit", "etc" ],
active: [ "sales", "etc" ],
symbol : "curve"
}
],
widget : [
{ type : "zoomselect" },
{ type : "cross", xFormat: function(d) { return time.format(d, "HH:mm:ss"); }}
],
event : {
"zoomselect.end": function(stime, etime) {
console.log(new Date(stime), new Date(etime));
}
}
});
});
</script>
</body>
</html>