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 customRange for graph2d Y axis

v3_develop
Alex de Mulder 10 years ago
parent
2abfcd8261
commit
f62fa6d76e
9 changed files with 24167 additions and 24037 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +24006
    -23989
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +12
    -12
      dist/vis.min.js
  5. +94
    -0
      examples/graph2d/12_customRange.html
  6. +1
    -0
      examples/graph2d/index.html
  7. +18
    -19
      lib/timeline/DataStep.js
  8. +29
    -15
      lib/timeline/component/DataAxis.js
  9. +5
    -1
      lib/timeline/component/LineGraph.js

+ 1
- 0
HISTORY.md View File

@ -20,6 +20,7 @@ http://visjs.org
- Added 'slots' for groups when using barCharts. - Added 'slots' for groups when using barCharts.
- Added 'allowOverlap' option for barCharts. - Added 'allowOverlap' option for barCharts.
- Added two examples showing the two additions above. - Added two examples showing the two additions above.
- Added 'customRange' for the Y axis and an example showing how it works.
## 2014-08-14, version 3.2.0 ## 2014-08-14, version 3.2.0

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


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


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


+ 94
- 0
examples/graph2d/12_customRange.html View File

@ -0,0 +1,94 @@
<!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" />
</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.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
customRange: {
left: {
min:-5, max:30
},
right: {
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", options: {slots:{slot:1,total:3}}})
groups.add({id: 1, content: "group1", options: {slots:{slot:2,total:3}}})
groups.add({id: 2, content: "group2", options: {slots:{slot:3,total:3}, 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'}, // align: left, center, right
drawPoints: true,
dataAxis: {
customRange: {
left: {
min:-5, max:30
},
right: {
min:-5
}
},
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options,groups);
</script>
</body>
</html>

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

@ -18,6 +18,7 @@
<p><a href="09_external_legend.html">09_external_legend.html</a></p> <p><a href="09_external_legend.html">09_external_legend.html</a></p>
<p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p> <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
<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>
</div> </div>
</body> </body>

+ 18
- 19
lib/timeline/DataStep.js View File

@ -24,7 +24,7 @@
* @param {Date} [end] The end date * @param {Date} [end] The end date
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/ */
function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
function DataStep(start, end, minimumStep, containerHeight, customRange) {
// variables // variables
this.current = 0; this.current = 0;
@ -35,11 +35,12 @@ function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
this.marginStart; this.marginStart;
this.marginEnd; this.marginEnd;
this.deadSpace = 0;
this.majorSteps = [1, 2, 5, 10]; this.majorSteps = [1, 2, 5, 10];
this.minorSteps = [0.25, 0.5, 1, 2]; this.minorSteps = [0.25, 0.5, 1, 2];
this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
this.setRange(start, end, minimumStep, containerHeight, customRange);
} }
@ -54,9 +55,9 @@ function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
* @param {Number} [end] The end date and time. * @param {Number} [end] The end date and time.
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/ */
DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
this._start = start;
this._end = end;
DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, customRange) {
this._start = customRange.min === undefined ? start : customRange.min;
this._end = customRange.max === undefined ? end : customRange.max;
if (start == end) { if (start == end) {
this._start = start - 0.75; this._start = start - 0.75;
@ -64,9 +65,9 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
} }
if (this.autoScale) { if (this.autoScale) {
this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
this.setMinimumStep(minimumStep, containerHeight);
} }
this.setFirst();
this.setFirst(customRange);
}; };
/** /**
@ -76,7 +77,7 @@ DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight,
DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) { DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
// round to floor // round to floor
var size = this._end - this._start; var size = this._end - this._start;
var safeSize = size * 1.1;
var safeSize = size * 1.2;
var minimumStepValue = minimumStep * (safeSize / containerHeight); var minimumStepValue = minimumStep * (safeSize / containerHeight);
var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10); var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
@ -109,23 +110,21 @@ DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
}; };
/**
* Set the range iterator to the start date.
*/
DataStep.prototype.first = function() {
this.setFirst();
};
/** /**
* Round the current date to the first minor date value * Round the current date to the first minor date value
* This must be executed once when the current date is set to start Date * This must be executed once when the current date is set to start Date
*/ */
DataStep.prototype.setFirst = function() {
var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
DataStep.prototype.setFirst = function(customRange) {
if (customRange === undefined) {
customRange = {};
}
var niceStart = customRange.min === undefined ? this._start - (this.scale * 2 * this.minorSteps[this.stepIndex]) : customRange.min;
var niceEnd = customRange.max === undefined ? this._end + (this.scale * this.minorSteps[this.stepIndex]) : customRange.max;
this.marginEnd = this.roundToMinor(niceEnd);
this.marginStart = this.roundToMinor(niceStart);
this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
this.marginRange = this.marginEnd - this.marginStart; this.marginRange = this.marginEnd - this.marginStart;
this.current = this.marginEnd; this.current = this.marginEnd;

+ 29
- 15
lib/timeline/component/DataAxis.js View File

@ -26,7 +26,11 @@ function DataAxis (body, options, svg) {
labelOffsetY: 2, labelOffsetY: 2,
iconWidth: 20, iconWidth: 20,
width: '40px', width: '40px',
visible: true
visible: true,
customRange: {
left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined}
}
}; };
this.linegraphSVG = svg; this.linegraphSVG = svg;
@ -102,7 +106,9 @@ DataAxis.prototype.setOptions = function (options) {
'labelOffsetY', 'labelOffsetY',
'iconWidth', 'iconWidth',
'width', 'width',
'visible'];
'visible',
'customRange'
];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
this.minWidth = Number(('' + this.options.width).replace("px","")); this.minWidth = Number(('' + this.options.width).replace("px",""));
@ -289,11 +295,11 @@ DataAxis.prototype._redrawLabels = function () {
// calculate range and step (step such that we have space for 7 characters per label) // calculate range and step (step such that we have space for 7 characters per label)
var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced; var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight);
var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight, this.options.customRange[this.options.orientation]);
this.step = step; this.step = step;
step.first();
// get the distance in pixels for a step // get the distance in pixels for a step
var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
// dead space is space that is "left over" after a step
var stepPixels = (this.dom.frame.offsetHeight - (step.deadSpace * (this.dom.frame.offsetHeight / step.marginRange))) / (((step.marginRange - step.deadSpace) / step.step));
this.stepPixels = stepPixels; this.stepPixels = stepPixels;
var amountOfSteps = this.height / stepPixels; var amountOfSteps = this.height / stepPixels;
@ -301,12 +307,15 @@ DataAxis.prototype._redrawLabels = function () {
if (this.master == false) { if (this.master == false) {
stepPixels = this.stepPixelsForced; stepPixels = this.stepPixelsForced;
stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
stepDifference = Math.round((this.dom.frame.offsetHeight / stepPixels) - amountOfSteps);
for (var i = 0; i < 0.5 * stepDifference; i++) { for (var i = 0; i < 0.5 * stepDifference; i++) {
step.previous(); step.previous();
} }
amountOfSteps = this.height / stepPixels; amountOfSteps = this.height / stepPixels;
} }
else {
amountOfSteps += 0.25;
}
this.valueAtZero = step.marginEnd; this.valueAtZero = step.marginEnd;
@ -314,12 +323,11 @@ DataAxis.prototype._redrawLabels = function () {
// do not draw the first label // do not draw the first label
var max = 1; var max = 1;
step.next();
this.maxLabelSize = 0; this.maxLabelSize = 0;
var y = 0; var y = 0;
while (max < Math.round(amountOfSteps)) { while (max < Math.round(amountOfSteps)) {
step.next();
y = Math.round(max * stepPixels); y = Math.round(max * stepPixels);
marginStartPos = max * stepPixels; marginStartPos = max * stepPixels;
var isMajor = step.isMajor(); var isMajor = step.isMajor();
@ -339,11 +347,15 @@ DataAxis.prototype._redrawLabels = function () {
this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth); this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
} }
step.next();
max++; max++;
} }
this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
if (this.master == false) {
this.conversionFactor = y / (this.valueAtZero - step.current);
}
else {
this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
}
var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15; var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
// this will resize the yAxis to accomodate the labels. // this will resize the yAxis to accomodate the labels.
@ -371,6 +383,12 @@ DataAxis.prototype._redrawLabels = function () {
} }
}; };
DataAxis.prototype.convertValue = function (value) {
var invertedValue = this.valueAtZero - value;
var convertedValue = invertedValue * this.conversionFactor;
return convertedValue;
};
/** /**
* Create a label for the axis at position x * Create a label for the axis at position x
* @private * @private
@ -431,11 +449,7 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi
}; };
DataAxis.prototype.convertValue = function (value) {
var invertedValue = this.valueAtZero - value;
var convertedValue = invertedValue * this.conversionFactor;
return convertedValue; // the -2 is to compensate for the borders
};
/** /**

+ 5
- 1
lib/timeline/component/LineGraph.js View File

@ -51,7 +51,11 @@ function LineGraph(body, options) {
showMajorLabels: true, showMajorLabels: true,
icons: false, icons: false,
width: '40px', width: '40px',
visible: true
visible: true,
customRange: {
left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined}
}
}, },
legend: { legend: {
enabled: false, enabled: false,

Write Preview
Loading…
Cancel
Save