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

ready for optimalization.

css_transitions
Alex de Mulder 10 years ago
parent
6f9cc716cb
commit
a3c5caa275
3 changed files with 45 additions and 24 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      dist/vis.js
  2. +29
    -24
      examples/graph2d/08_performance.html
  3. +8
    -0
      src/timeline/component/Linegraph.js

+ 8
- 0
dist/vis.js View File

@ -3660,6 +3660,13 @@ Linegraph.prototype.setOptions = function(options) {
this.legendRight.setOptions(this.options.legend); this.legendRight.setOptions(this.options.legend);
} }
} }
if (this.groups.hasOwnProperty(UNGROUPED)) {
this.groups[UNGROUPED].setOptions(options);
}
}
if (this.dom.frame) {
this._updateGraph();
} }
}; };
@ -4197,6 +4204,7 @@ Linegraph.prototype._prepareData = function (datapoints, options) {
if (options.yAxisOrientation == 'right') { if (options.yAxisOrientation == 'right') {
axis = this.yAxisRight; axis = this.yAxisRight;
} }
for (var i = 0; i < datapoints.length; i++) { for (var i = 0; i < datapoints.length; i++) {
xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1); xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1);
yValue = Math.round(axis.convertValue(datapoints[i].y)); yValue = Math.round(axis.convertValue(datapoints[i].y));

+ 29
- 24
examples/graph2d/08_performance.html View File

@ -19,62 +19,65 @@
<body> <body>
<h2>Graph2D | Performance</h2> <h2>Graph2D | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;"> <div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
This example is a test of the performance of the Graph2D. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
</div> </div>
<br /> <br />
<p> <p>
<label for="count">Number of items</label> <label for="count">Number of items</label>
<input id="count" value="100"> <input id="count" value="100">
<input id="draw" type="button" value="draw">
<input id="toggleInterpolation" type="button" value="toggle Interpolation"> <input id="toggleInterpolation" type="button" value="toggle Interpolation">
Interpolation method: <input id="interpolation" value="linear">
<input id="togglePoints" type="button" value="toggle Points"> <input id="togglePoints" type="button" value="toggle Points">
Points style: <input id="points" value="none"> <br/>
<input id="draw" type="button" value="draw" style="width:200px;">
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
var points = '';
var interpolation = '';
var points = 'none';
var interpolation = 'linear';
function togglePoints() { function togglePoints() {
var pointsOptions = {}; var pointsOptions = {};
if (points == "") {
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle'; points = 'circle';
pointsOptions = {drawPoints: {style: 'circle'}};
pointsOptions = {drawPoints: {style: points}};
} }
else if (points == "circle") { else if (points == "circle") {
points = 'square'; points = 'square';
pointsOptions = {drawPoints: {style: 'square'}};
pointsOptions = {drawPoints: {style: points}};
} }
else if (points == "square") { else if (points == "square") {
points = '';
points = 'none';
pointsOptions = {drawPoints: false}; pointsOptions = {drawPoints: false};
} }
pointsField.value = points;
graph2D.setOptions(pointsOptions); graph2D.setOptions(pointsOptions);
} }
function toggleInterpolation() { function toggleInterpolation() {
var interpolationOptions = {}; var interpolationOptions = {};
if (interpolation == "") {
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal'; interpolation = 'centripetal';
interpolationOptions = {drawPoints: {style: 'circle'}};
interpolationOptions = {catmullRom: {parametrization: interpolation}};
} }
else if (interpolation == "circle") {
else if (interpolation == "centripetal") {
interpolation = 'chordal'; interpolation = 'chordal';
interpolationOptions = {drawPoints: {style: 'square'}};
interpolationOptions = {catmullRom: {parametrization: interpolation}};
} }
else if (interpolation == "square") {
else if (interpolation == "chordal") {
interpolation = 'uniform'; interpolation = 'uniform';
interpolationOptions = {drawPoints: false};
interpolationOptions = {catmullRom: {parametrization: interpolation}};
} }
else if (interpolation == "square") {
interpolation = '';
interpolationOptions = {drawPoints: false};
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {catmullRom: false};
} }
interpolationField.value = interpolation;
graph2D.setOptions(interpolationOptions); graph2D.setOptions(interpolationOptions);
} }
@ -101,11 +104,13 @@
createData(); createData();
document.getElementById('draw').onclick = createData; document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = createData;
document.getElementById('togglePoints').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
drawPoints: false,
catmullRom: false,
start: startPoint, start: startPoint,
end: endPoint end: endPoint
}; };

+ 8
- 0
src/timeline/component/Linegraph.js View File

@ -190,6 +190,13 @@ Linegraph.prototype.setOptions = function(options) {
this.legendRight.setOptions(this.options.legend); this.legendRight.setOptions(this.options.legend);
} }
} }
if (this.groups.hasOwnProperty(UNGROUPED)) {
this.groups[UNGROUPED].setOptions(options);
}
}
if (this.dom.frame) {
this._updateGraph();
} }
}; };
@ -727,6 +734,7 @@ Linegraph.prototype._prepareData = function (datapoints, options) {
if (options.yAxisOrientation == 'right') { if (options.yAxisOrientation == 'right') {
axis = this.yAxisRight; axis = this.yAxisRight;
} }
for (var i = 0; i < datapoints.length; i++) { for (var i = 0; i < datapoints.length; i++) {
xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1); xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1);
yValue = Math.round(axis.convertValue(datapoints[i].y)); yValue = Math.round(axis.convertValue(datapoints[i].y));

Write Preview
Loading…
Cancel
Save