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 support to supply an end to bar charts to have them scale (#2760) 

* Added support to supply an X2 to bar charts to have them scale

* Fixed graph2d stacking issue.  It no longer takes into account hidden items

* Changed x2 to end per recommendation and added this to the docs
revert-2743-editable-option-2017-02-16
Vx2gas 7 years ago
committed by yotamberk
parent
6b5462ec43
commit
d0f2a63b91
4 changed files with 84 additions and 4 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -1
      docs/graph2d/index.html
  2. +51
    -0
      examples/graph2d/21_barsWithEnd.html
  3. +9
    -2
      lib/timeline/component/LineGraph.js
  4. +17
    -1
      lib/timeline/component/graph2d_types/bar.js

+ 7
- 1
docs/graph2d/index.html View File

@ -297,7 +297,13 @@ var items = [
<td>label</td> <td>label</td>
<td>Object</td> <td>Object</td>
<td>no</td> <td>no</td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations.</td>
</tr>
<tr>
<td>end</td>
<td>Date</td>
<td>no</td>
<td>A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property.</td>
</tr> </tr>
</table> </table>

+ 51
- 0
examples/graph2d/21_barsWithEnd.html View File

@ -0,0 +1,51 @@
<!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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graph With End Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how you can plot a bar chart and supply an end value to have it fill.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
{x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
{x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
{x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
{x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
{x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 9
- 2
lib/timeline/component/LineGraph.js View File

@ -487,6 +487,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) {
//Copy data (because of unmodifiable DataView input. //Copy data (because of unmodifiable DataView input.
var extended = util.bridgeObject(item); var extended = util.bridgeObject(item);
extended.x = util.convert(item.x, 'Date'); extended.x = util.convert(item.x, 'Date');
extended.end = util.convert(item.end, 'Date');
extended.orginalY = item.y; //real Y extended.orginalY = item.y; //real Y
extended.y = Number(item.y); extended.y = Number(item.y);
extended[fieldId] = item[fieldId]; extended[fieldId] = item[fieldId];
@ -908,10 +909,10 @@ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
// if bar graphs are stacked, their range need to be handled differently and accumulated over all groups. // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
if (options.stack === true && options.style === 'bar') { if (options.stack === true && options.style === 'bar') {
if (options.yAxisOrientation === 'left') { if (options.yAxisOrientation === 'left') {
combinedDataLeft = combinedDataLeft.concat(group.getItems());
combinedDataLeft = combinedDataLeft.concat(groupData);
} }
else { else {
combinedDataRight = combinedDataRight.concat(group.getItems());
combinedDataRight = combinedDataRight.concat(groupData);
} }
} }
else { else {
@ -1064,6 +1065,12 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) {
for (var i = 0; i < datapoints.length; i++) { for (var i = 0; i < datapoints.length; i++) {
datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width; datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width;
datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations
if (datapoints[i].end != undefined) {
datapoints[i].screen_end = toScreen(datapoints[i].end) + this.props.width;
}
else {
datapoints[i].screen_end = undefined;
}
} }
}; };

+ 17
- 1
lib/timeline/component/graph2d_types/bar.js View File

@ -62,8 +62,10 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
for (j = 0; j < processedGroupData[groupIds[i]].length; j++) { for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
combinedData.push({ combinedData.push({
screen_x: processedGroupData[groupIds[i]][j].screen_x, screen_x: processedGroupData[groupIds[i]][j].screen_x,
screen_end: processedGroupData[groupIds[i]][j].screen_end,
screen_y: processedGroupData[groupIds[i]][j].screen_y, screen_y: processedGroupData[groupIds[i]][j].screen_y,
x: processedGroupData[groupIds[i]][j].x, x: processedGroupData[groupIds[i]][j].x,
end: processedGroupData[groupIds[i]][j].end,
y: processedGroupData[groupIds[i]][j].y, y: processedGroupData[groupIds[i]][j].y,
groupId: groupIds[i], groupId: groupIds[i],
label: processedGroupData[groupIds[i]][j].label label: processedGroupData[groupIds[i]][j].label
@ -128,7 +130,21 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1)); drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1));
} }
} }
DOMutil.drawBar(combinedData[i].screen_x + drawData.offset, combinedData[i].screen_y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
let dataWidth = drawData.width;
let start = combinedData[i].screen_x;
// are we drawing explicit boxes? (we supplied an end value)
if (combinedData[i].screen_end != undefined){
dataWidth = combinedData[i].screen_end - combinedData[i].screen_x;
start += (dataWidth * 0.5);
}
else {
start += drawData.offset
}
DOMutil.drawBar(start, combinedData[i].screen_y - heightOffset, dataWidth, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
// draw points // draw points
if (group.options.drawPoints.enabled === true) { if (group.options.drawPoints.enabled === true) {
let pointData = { let pointData = {

Write Preview
Loading…
Cancel
Save