jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added the groups.visibility option and example

v3_develop
Alex de Mulder 10 years ago
parent
5eab978deb
commit
0d8aa7ccc0
6 changed files with 5022 additions and 4861 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4860
    -4857
      dist/vis.js
  2. +9
    -0
      docs/graph2d.html
  3. +145
    -0
      examples/graph2d/14_toggleGroups.html
  4. +1
    -0
      examples/graph2d/index.html
  5. +1
    -1
      lib/timeline/Graph2d.js
  6. +6
    -3
      lib/timeline/component/LineGraph.js

+ 4860
- 4857
dist/vis.js
File diff suppressed because it is too large
View File


+ 9
- 0
docs/graph2d.html View File

@ -430,6 +430,15 @@ The options colored in green can also be used as options for the groups. All opt
<td>true</td> <td>true</td>
<td>Show or hide the data axis.</td> <td>Show or hide the data axis.</td>
</tr> </tr>
<tr>
<td>groups.visibility</td>
<td>Object</td>
<td></td>
<td>You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
this is not communicated across instances of graph2d. Take a look at <a href="../examples/Graph2d/14_toggleGroups.html">Example 14</a>
for more explaination.
</td>
</tr>
<tr> <tr>
<td>legend</td> <td>legend</td>
<td>Boolean</td> <td>Boolean</td>

+ 145
- 0
examples/graph2d/14_toggleGroups.html View File

@ -0,0 +1,145 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Toggle Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
div.graphs {
width:300px;
display:inline-block;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
We then use a setOptions like so:
<pre class="prettyprint lang-js">
graph2d1.setOptions({
groups:{
visibility:{
0:true, // group id:0 visible
1:false, // group id:1 hidden
2:false, // group id:2 hidden
3:false, // group id:3 hidden
"__ungrouped__":false // default group hidden
}
}
})
</pre>
</div>
<br />
<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: false,
graphHeight:200,
start: '2014-06-10',
end: '2014-07-04',
showMajorLabels:false,
showMinorLabels:false
};
var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, options, groups);
var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, options, groups);
var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, options, groups);
var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, options, groups);
var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, options, groups);
var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, options, groups);
graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
</script>
</body>
</html>

+ 1
- 0
examples/graph2d/index.html View File

@ -20,6 +20,7 @@
<p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p> <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
<p><a href="12_customRange.html">12_customRange.html</a></p> <p><a href="12_customRange.html">12_customRange.html</a></p>
<p><a href="13_localization.html">13_localization.html</a></p> <p><a href="13_localization.html">13_localization.html</a></p>
<p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
</div> </div>
</body> </body>

+ 1
- 1
lib/timeline/Graph2d.js View File

@ -190,7 +190,7 @@ Graph2d.prototype.getLegend = function(groupId, width, height) {
*/ */
Graph2d.prototype.isGroupVisible = function(groupId) { Graph2d.prototype.isGroupVisible = function(groupId) {
if (this.linegraph.groups[groupId] !== undefined) { if (this.linegraph.groups[groupId] !== undefined) {
return this.linegraph.groups[groupId].visible;
return (this.linegraph.groups[groupId].visible && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true));
} }
else { else {
return false; return false;

+ 6
- 3
lib/timeline/component/LineGraph.js View File

@ -68,6 +68,9 @@ function LineGraph(body, options) {
visible: true, visible: true,
position: 'top-right' // top/bottom - left,right position: 'top-right' // top/bottom - left,right
} }
},
groups: {
visibility: {}
} }
}; };
@ -178,7 +181,7 @@ LineGraph.prototype._create = function(){
*/ */
LineGraph.prototype.setOptions = function(options) { LineGraph.prototype.setOptions = function(options) {
if (options) { if (options) {
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
util.selectiveDeepExtend(fields, this.options, options); util.selectiveDeepExtend(fields, this.options, options);
util.mergeOptions(this.options, options,'catmullRom'); util.mergeOptions(this.options, options,'catmullRom');
util.mergeOptions(this.options, options,'drawPoints'); util.mergeOptions(this.options, options,'drawPoints');
@ -551,7 +554,7 @@ LineGraph.prototype._updateGraph = function () {
for (var groupId in this.groups) { for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) { if (this.groups.hasOwnProperty(groupId)) {
group = this.groups[groupId]; group = this.groups[groupId];
if (group.visible == true) {
if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
groupIds.push(groupId); groupIds.push(groupId);
} }
} }
@ -900,7 +903,7 @@ LineGraph.prototype._drawBarGraphs = function (groupIds, processedGroupData) {
for (i = 0; i < groupIds.length; i++) { for (i = 0; i < groupIds.length; i++) {
group = this.groups[groupIds[i]]; group = this.groups[groupIds[i]];
if (group.options.style == 'bar') { if (group.options.style == 'bar') {
if (group.visible == true) {
if (group.visible == true && (this.options.groups.visibility[groupIds[i]] === undefined || this.options.groups.visibility[groupIds[i]] == true)) {
for (j = 0; j < processedGroupData[groupIds[i]].length; j++) { for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
combinedData.push({ combinedData.push({
x: processedGroupData[groupIds[i]][j].x, x: processedGroupData[groupIds[i]][j].x,

Write Preview
Loading…
Cancel
Save