sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:53:17 +02:00
parent 30bf334951
commit a7b6060664
1 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
js/dos/ext/vis/examples/graph2d/12_customRange.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h2>Graph2d | Custom axis range</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
}
}
};
</pre>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0"})
groups.add({id: 1, content: "group1"})
groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
drawPoints: true,
dataAxis: {
left: {
range: {min:-5, max:30}
},
right: {
range: {min:-5}
},
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
</script>
</body>
</html>