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)
50 lines (49 loc) • 1.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../dist/jui-chart.js"></script>
<script>
var data = [
{ quarter : "1Q", samsung : 0, lg : 35, sony: 10 },
{ quarter : "2Q", samsung : 20, lg : 30, sony: 5 },
{ quarter : "3Q", samsung : 20, lg : 0, sony: 10 },
{ quarter : "4Q", samsung : 0, lg : 0, sony: 0 }
];
graph.ready([ "chart.builder" ], function(builder) {
builder("#chart", {
width : 500,
height : 500,
axis : {
x : {
type : "block",
domain : "quarter",
line : true
},
y : {
type : "range",
domain : [ 0, 100 ],
format : function(value) {
return value + "%";
},
line : true,
orient : "right"
},
data : data
},
brush : {
type : "fullstackcolumn",
target : [ "samsung", "lg", "sony" ],
showText : function(percent) {
return percent + "%%";
}
}
});
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>