Browse Source

Merge pull request #1463 from almende/graph2d_updates

Graph2d updates
newShading
Jos de Jong 9 years ago
parent
commit
44dc1f8ec1
4 changed files with 104 additions and 19 deletions
  1. +3
    -13
      docs/graph2d/index.html
  2. +91
    -0
      examples/graph2d/20_shading.html
  3. +7
    -3
      lib/timeline/component/graph2d_types/line.js
  4. +3
    -3
      lib/timeline/optionsGraph2d.js

+ 3
- 13
docs/graph2d/index.html View File

@ -246,8 +246,6 @@
<p>
Graph2d can load data from an <code>Array</code>, a <code>DataSet</code> (offering 2 way data binding), or a <code>DataView</code> (offering one way data binding).
Objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<p>
Graph2d can be provided with two types of data:
</p>
@ -760,8 +758,9 @@ onRender: function(item, group, graph2d) {
<tr parent="shaded" class="hidden">
<td class="greenField indent">shaded.orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.</td>
<td>'zero'</td>
<td>This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph. The options are 'zero', 'bottom' or 'top'.
See <a href="../../examples/graph2d/20_shading.html">Example 20</a> what these options look like.</td>
</tr>
<tr parent="shaded" class="hidden">
<td class="greenField indent">shaded.style</td>
@ -1318,15 +1317,6 @@ Graph2d.off('rangechanged', onChange);
</td>
</tr>
<tr>
<td>finishedRedraw</td>
<td>
none.
</td>
<td>Fired after a redraw is complete. When moving the Graph2d around, this could be fired frequently.
</td>
</tr>
<tr>
<td>rangechange</td>
<td>

+ 91
- 0
examples/graph2d/20_shading.html View File

@ -0,0 +1,91 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Shading 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;
}
</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 | Shading Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the shading functionality within Graph2d.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['top', 'bottom', 'zero', 'none'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
shaded: {
orientation: 'top'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
shaded: {
orientation: 'bottom'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
shaded: {
orientation: 'zero'
}
}});
groups.add({
id: 3,
content: names[3],
});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-10', y: 0, group: 0},
{x: '2014-06-11', y: 15, group: 0},
{x: '2014-06-13', y: -15, group: 0},
{x: '2014-06-14', y: 0, group: 0},
{x: '2014-06-15', y: 0, group: 1},
{x: '2014-06-16', y: 15, group: 1},
{x: '2014-06-17', y: -15, group: 1},
{x: '2014-06-18', y: 0, group: 1},
{x: '2014-06-19', y: 0, group: 2},
{x: '2014-06-20', y: 15, group: 2},
{x: '2014-06-21', y: -15, group: 2},
{x: '2014-06-22', y: 0, group: 2},
{x: '2014-06-23', y: 0, group: 3},
{x: '2014-06-24', y: 15, group: 3},
{x: '2014-06-25', y: -15, group: 3},
{x: '2014-06-26', y: 0, group: 3},
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
start: '2014-06-05',
end: '2014-06-29'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 7
- 3
lib/timeline/component/graph2d_types/line.js View File

@ -133,13 +133,17 @@ Line.prototype.draw = function (dataset, group, framework) {
// append with points for fill and finalize the path
if (group.options.shaded.enabled == true) {
var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
var dFill;
var zero = 0;
if (group.options.shaded.orientation == 'top') {
dFill = 'M' + dataset[0].x + ',' + 0 + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + 0;
zero = 0;
}
else if (group.options.shaded.orientation == 'bottom') {
zero = svgHeight;
}
else {
dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
zero = Math.min(Math.max(0,group.zeroPosition),svgHeight);
}
var dFill = 'M' + dataset[0].x + ',' + zero + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + zero;
fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
if(group.options.shaded.style !== undefined) {
fillPath.setAttributeNS(null, 'style', group.options.shaded.style);

+ 3
- 3
lib/timeline/optionsGraph2d.js View File

@ -33,7 +33,7 @@ let allOptions = {
graphHeight: {string, number},
shaded: {
enabled: {boolean},
orientation: {string:['bottom','top']}, // top, bottom
orientation: {string:['bottom','top','zero']}, // top, bottom, zero
__type__: {boolean,object}
},
style: {string:['line','bar','points']}, // line, bar
@ -172,7 +172,7 @@ let configureOptions = {
stack:false,
shaded: {
enabled: false,
orientation: ['top','bottom'] // top, bottom
orientation: ['zero','top','bottom'] // zero, top, bottom
},
style: ['line','bar','points'], // line, bar
barChart: {
@ -268,4 +268,4 @@ let configureOptions = {
}
};
export {allOptions, configureOptions};
export {allOptions, configureOptions};

Loading…
Cancel
Save