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)
111 lines (103 loc) • 3.16 kB
HTML
<!DOCTYPE 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>
<div id="chart2"></div>
<script>
const data = [
{ month : "Jan", rainfall : 49.9, sealevel : 1016, temperature : 7.0},
{ month : "Feb", rainfall : 71.5, sealevel : 1016, temperature : 6.9 },
{ month : "Mar", rainfall : 106.49, sealevel : 1015.9, temperature : 9.5 },
{ month : "Apr", rainfall : 129.2, sealevel : 1015.5, temperature : 14.5 },
{ month : "May", rainfall : 144.0, sealevel : 1012.3, temperature : 18.2 },
{ month : "Jun", rainfall : 176.0, sealevel : 1009.5, temperature : 21.5 },
{ month : "Jul", rainfall : 135.6, sealevel : 1009.6, temperature : 25.2 },
{ month : "Aug", rainfall : 148.5, sealevel : 1010.2, temperature : 26.5 },
{ month : "Sep", rainfall : 216.4, sealevel : 1013.1, temperature : 23.3 },
{ month : "Oct", rainfall : 194.1, sealevel : 1016.9, temperature : 18.3 },
{ month : "Nov", rainfall : 95.6, sealevel : 1018.2, temperature : 13.9},
{ month : "Dec", rainfall : 54.4, sealevel : 1016.7, temperature : 9.6}
];
const builder = graph.include('chart.builder');
window.chart = builder('#chart', {
height : 300,
padding : {
right : 120
},
axis : [
{
x : {
domain : "month",
line : true
},
y : {
type : "range",
domain: [ 5, 35 ],
color: "#90ed7d",
orient: "left",
format: function (value) {
return value + " ℃";
}
},
data: data
}
],
brush : [
{ type : "line", target : "temperature", colors: [ "#90ed7d" ], symbol : "curve" }
],
widget : [
{ type : "title", text : "Combination Sample" },
{ type : "legend", align : "end" },
{ type : "zoom" }
],
event : {
'zoom.end' : function() {
window.chart2.removeWidget(2);
window.chart2.render(true);
},
'zoom.close' : function() {
window.chart2.addWidget({ type: 'zoom' });
window.chart2.render(true);
}
}
});
window.chart2 = builder('#chart2', {
height : 300,
padding : {
right : 120
},
axis : [
{
x : {
domain : "month",
line : true
},
y : {
type : "range",
domain : [ 1008, 1020 ],
color : "#434348",
format : function(value) {
return value + " mb";
},
orient : "right",
step: 6
},
data: data
}
],
brush : [
{ type : "line", target : "sealevel", colors : [ "#434348" ] , symbol : "curve" }
],
widget : [
{ type : "title", text : "Combination Sample" },
{ type : "legend", align : "end" },
{ type : "zoom" }
]
});
</script>
</body>
</html>