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)
61 lines • 1.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../dist/jui-chart.js"></script>
<script>
graph.ready([ "chart.builder" ], function(builder) {
builder("#chart", {
width: 600,
height : 600,
theme : "classic",
axis : {
x : {
type : "block",
domain : "quarter",
line : true
},
y : {
type : "range",
domain : function(d) { return [d.sales, d.profit ]; },
step : 3,
line : true,
orient : "right"
},
data : [
{ quarter : "1Q", sales : 1, profit : 3 },
{ quarter : "2Q", sales : 3, profit : 2 },
{ quarter : "3Q", sales : 10, profit : 1 },
{ quarter : "4Q", sales : 0.49, profit : 4}
]
},
brush : [{
type : "column",
target : [ "sales", "profit" ]
}],
widget : [{
type: "title",
text: "hihi"
}, {
type: "tooltip",
format : function(data, key) {
return {
key: key,
value: data[key]
}
}
}],
event: {
"click": function(obj, e) {
console.log(obj, e);
}
}
});
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>