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

Merge branch 'cdjackson-graph2d_styling' into develop 

Conflicts:
	lib/timeline/component/DataAxis.js
	lib/timeline/component/LineGraph.js
v3_develop
Alex de Mulder 10 years ago
parent
3e3d0f083b 7f9ec52c3f
commit
5aa4312132
9 changed files with 714 additions and 26 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +56
    -1
      docs/graph2d.html
  2. +215
    -0
      examples/graph2d/16_bothAxis_titles.html
  3. +256
    -0
      examples/graph2d/17_dynamicStyling.html
  4. +5
    -2
      lib/DOMutil.js
  5. +50
    -10
      lib/timeline/DataStep.js
  6. +76
    -9
      lib/timeline/component/DataAxis.js
  7. +5
    -0
      lib/timeline/component/GraphGroup.js
  8. +9
    -4
      lib/timeline/component/LineGraph.js
  9. +42
    -0
      lib/timeline/component/css/dataaxis.css

+ 56
- 1
docs/graph2d.html View File

@ -238,6 +238,15 @@ groups.add({
an individual css style. an individual css style.
</td> </td>
</tr> </tr>
<tr>
<td>style</td>
<td>String</td>
<td>no</td>
<td>This field is optional. A style can be used to give groups
an individual css style, and any style tags specified in style will
override the definition in the className style defined in css.
</td>
</tr>
<tr> <tr>
<td>options</td> <td>options</td>
<td>JSON object</td> <td>JSON object</td>
@ -330,6 +339,12 @@ The options colored in green can also be used as options for the groups. All opt
<td>'bottom'</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>This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.</td>
</tr> </tr>
<tr>
<td class="greenField">shaded.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the style for the shading. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr> <tr>
<td class="greenField">style</td> <td class="greenField">style</td>
<td>String</td> <td>String</td>
@ -455,13 +470,53 @@ 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>dataAxis.title.left.text</td>
<td>String</td>
<td>undefined</td>
<td>Set the title for the left axis.</td>
</tr>
<tr>
<td>dataAxis.title.left.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the title style for the left axis. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr>
<td>dataAxis.title.right.text</td>
<td>String</td>
<td>undefined</td>
<td>Set the title for the right axis.</td>
</tr>
<tr>
<td>dataAxis.title.right.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the title style for the right axis. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr>
<td>dataAxis.format.left.decimals</td>
<td>Number</td>
<td>undefined</td>
<td>Set the number of decimal points used on the the left axis. If set, this will fix the number of decimal places
displayed after the decimal point.
If undefined, trailing zeros will be removed.</td>
</tr>
<tr>
<td>dataAxis.format.right.decimals</td>
<td>Number</td>
<td>undefined</td>
<td>Set the number of decimal points used on the the right axis. If set, this will fix the number of decimal places
displayed after the decimal point.
If undefined, trailing zeros will be removed.</td>
</tr>
<tr> <tr>
<td>groups.visibility</td> <td>groups.visibility</td>
<td>Object</td> <td>Object</td>
<td></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 <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> 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.
for more explanation.
</td> </td>
</tr> </tr>
<tr> <tr>

+ 215
- 0
examples/graph2d/16_bothAxis_titles.html View File

@ -0,0 +1,215 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Axis Titles and Styling</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Axis Titles and Styling</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
<table>
<tr>
<td>
This example shows setting a title for the left and right axes. Optionally the example allows the user
to show icons and labels on the left and right axis.
</td>
<td>
<table>
<tr>
<td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
<td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
<td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
<td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
<td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
</tr>
<tr>
<td>Left decimals</td>
<td><select id="decimals" onchange="styleDecimals()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<br />
<div id="visualization"></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],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , 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: 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: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
showMinorLabels: false,
title: {
right: {
text: 'Right (right axis)'
}
}
},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
function showIcons(show) {
graph2d.setOptions({dataAxis: {icons: show}});
}
function showTitle(axes, show) {
var title;
if(show == true) {
title = {text: "Title (" + axes + " axes)", style: "color: green;"};
}
else {
title = undefined;
}
if(axes == 'left') {
graph2d.setOptions({dataAxis: {title: {left: title}}});
}
else {
graph2d.setOptions({dataAxis: {title: {right: title}}});
}
}
var colors=['red','green','blue','black','yellow','purple','pink'];
function styleTitle(axes) {
var title;
title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
if(axes == 'left') {
graph2d.setOptions({dataAxis: {title: {left: title}}});
}
else {
graph2d.setOptions({dataAxis: {title: {right: title}}});
}
}
function styleDecimals() {
var x = document.getElementById("decimals");
graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
}
</script>
</body>
</html>

+ 256
- 0
examples/graph2d/17_dynamicStyling.html View File

@ -0,0 +1,256 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Dynamic Styling</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 | Dynamic Styling Example</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to programmatically change the styling of a group. While this can also
be done in CSS, this must be statically defined, and the programmatic interface allows the
user to define the look of the graph at runtime.
</div>
<br/>
<table>
<col width="600">
<col width="220">
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<col width="150">
<col width="50">
<tr>
<td>Line Color</td>
<td>
<select id="color" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Line Style</td>
<td>
<select id="line" onchange="updateStyle()">
<option value="stroke-dasharray:1 0;" selected="selected">line</option>
<option value="stroke-dasharray:10 10;">dash</option>
<option value="stroke-dasharray:2 2;">dot</option>
<option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
</select>
</td>
</tr>
<tr>
<td>Line thickness</td>
<td>
<select id="thickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr>
<td>Fill Position</td>
<td>
<select id="fill" onchange="updateStyle()">
<option value="">none</option>
<option value="top">top</option>
<option value="bottom" selected="selected">bottom</option>
</select>
</td>
</tr>
<tr>
<td>Fill Color</td>
<td>
<select id="fillcolor" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Fill Opacity</td>
<td>
<select id="fillopacity" onchange="updateStyle()">
<option value="opacity:0.1;">0.1</option>
<option value="opacity:0.2;">0.2</option>
<option value="opacity:0.3;">0.3</option>
<option value="opacity:0.4;">0.4</option>
<option value="opacity:0.5;">0.5</option>
<option value="opacity:0.6;" selected="selected">0.6</option>
<option value="opacity:0.7;">0.7</option>
<option value="opacity:0.8;">0.8</option>
<option value="opacity:0.9;">0.9</option>
<option value="opacity:1;">1</option>
</select>
</td>
</tr>
<tr>
<td>Points Shape</td>
<td>
<select id="points" onchange="updateStyle()">
<option value="">none</option>
<option value="circle">circle</option>
<option value="square" selected="selected">square</option>
</select>
</td>
</tr>
<tr>
<td>Points Size</td>
<td>
<select id="pointsize" onchange="updateStyle()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point Line Thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
<tr>
</tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var container = document.getElementById('visualization');
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}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
dataAxis: {
showMinorLabels: false,
icons: true
}
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
function updateStyle() {
groupData.style = "";
groupData.style += document.getElementById("color").value;
groupData.style += document.getElementById("line").value;
groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false;
}
groupData.options.shaded = {};
groupData.options.shaded.style = "";
groupData.options.shaded.style += document.getElementById("fillcolor").value;
groupData.options.shaded.style += document.getElementById("fillopacity").value;
groupData.options.shaded.orientation = document.getElementById("fill").value;
if (groupData.options.shaded.orientation == "") {
groupData.options.shaded = false;
}
var groups = new vis.DataSet();
groups.add(groupData);
graph2d.setGroups(groups);
}
</script>
</body>
</html>

+ 5
- 2
lib/DOMutil.js View File

@ -139,7 +139,6 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
point.setAttributeNS(null, "cx", x); point.setAttributeNS(null, "cx", x);
point.setAttributeNS(null, "cy", y); point.setAttributeNS(null, "cy", y);
point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size); point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
} }
else { else {
point = exports.getSVGElement('rect',JSONcontainer,svgContainer); point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
@ -147,8 +146,12 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size); point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "width", group.options.drawPoints.size); point.setAttributeNS(null, "width", group.options.drawPoints.size);
point.setAttributeNS(null, "height", group.options.drawPoints.size); point.setAttributeNS(null, "height", group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
} }
if(group.options.drawPoints.styles !== undefined) {
point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
}
point.setAttributeNS(null, "class", group.className + " point");
return point; return point;
}; };

+ 50
- 10
lib/timeline/DataStep.js View File

@ -178,19 +178,59 @@ DataStep.prototype.previous = function() {
* Get the current datetime * Get the current datetime
* @return {String} current The current date * @return {String} current The current date
*/ */
DataStep.prototype.getCurrent = function() {
DataStep.prototype.getCurrent = function(decimals) {
var toPrecision = '' + Number(this.current).toPrecision(5); var toPrecision = '' + Number(this.current).toPrecision(5);
if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
for (var i = toPrecision.length-1; i > 0; i--) {
if (toPrecision[i] == "0") {
toPrecision = toPrecision.slice(0,i);
// If decimals is specified, then limit or extend the string as required
if(decimals !== undefined && !isNaN(Number(decimals))) {
// If string includes exponent, then we need to add it to the end
var exp = "";
var index = toPrecision.indexOf("e");
if(index != -1) {
// Get the exponent
exp = toPrecision.slice(index);
// Remove the exponent in case we need to zero-extend
toPrecision = toPrecision.slice(0, index);
}
index = Math.max(toPrecision.indexOf(","), toPrecision.indexOf("."));
if(index === -1) {
// No decimal found - if we want decimals, then we need to add it
if(decimals !== 0) {
toPrecision += '.';
} }
else if (toPrecision[i] == "." || toPrecision[i] == ",") {
toPrecision = toPrecision.slice(0,i);
break;
// Calculate how long the string should be
index = toPrecision.length + decimals;
}
else if(decimals !== 0) {
// Calculate how long the string should be - accounting for the decimal place
index += decimals + 1;
}
if(index > toPrecision.length) {
// We need to add zeros!
for(var cnt = index - toPrecision.length; cnt > 0; cnt--) {
toPrecision += '0';
} }
else{
break;
}
else {
// we need to remove characters
toPrecision = toPrecision.slice(0, index);
}
// Add the exponent if there is one
toPrecision += exp;
}
else {
if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
// If no decimal is specified, and there are decimal places, remove trailing zeros
for (var i = toPrecision.length - 1; i > 0; i--) {
if (toPrecision[i] == "0") {
toPrecision = toPrecision.slice(0, i);
}
else if (toPrecision[i] == "." || toPrecision[i] == ",") {
toPrecision = toPrecision.slice(0, i);
break;
}
else {
break;
}
} }
} }
} }

+ 76
- 9
lib/timeline/component/DataAxis.js View File

@ -30,6 +30,14 @@ function DataAxis (body, options, svg, linegraphOptions) {
customRange: { customRange: {
left: {min:undefined, max:undefined}, left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined} right: {min:undefined, max:undefined}
},
title: {
left: {text:undefined},
right: {text:undefined}
},
format: {
left: {decimals: undefined},
right: {decimals: undefined}
} }
}; };
@ -38,7 +46,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
this.props = {}; this.props = {};
this.DOMelements = { // dynamic elements this.DOMelements = { // dynamic elements
lines: {}, lines: {},
labels: {}
labels: {},
title: {}
}; };
this.dom = {}; this.dom = {};
@ -113,7 +122,9 @@ DataAxis.prototype.setOptions = function (options) {
'iconWidth', 'iconWidth',
'width', 'width',
'visible', 'visible',
'customRange'
'customRange',
'title',
'format'
]; ];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
@ -227,7 +238,8 @@ DataAxis.prototype.setRange = function (start, end) {
DataAxis.prototype.redraw = function () { DataAxis.prototype.redraw = function () {
var changeCalled = false; var changeCalled = false;
var activeGroups = 0; var activeGroups = 0;
// Make sure the line container adheres to the vertical scrolling.
this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px'; this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
for (var groupId in this.groups) { for (var groupId in this.groups) {
@ -261,7 +273,7 @@ DataAxis.prototype.redraw = function () {
var showMinorLabels = this.options.showMinorLabels; var showMinorLabels = this.options.showMinorLabels;
var showMajorLabels = this.options.showMajorLabels; var showMajorLabels = this.options.showMajorLabels;
// determine the width and height of the elemens for the axis
// determine the width and height of the elements for the axis
props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0; props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0; props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
@ -289,6 +301,8 @@ DataAxis.prototype.redraw = function () {
if (this.options.icons == true) { if (this.options.icons == true) {
this._redrawGroupIcons(); this._redrawGroupIcons();
} }
this._redrawTitle(orientation);
} }
return changeCalled; return changeCalled;
}; };
@ -335,23 +349,28 @@ DataAxis.prototype._redrawLabels = function () {
// do not draw the first label // do not draw the first label
var max = 1; var max = 1;
// Get the number of decimal places
var decimals;
if(this.options.format[orientation] !== undefined) {
decimals = this.options.format[orientation].decimals;
}
this.maxLabelSize = 0; this.maxLabelSize = 0;
var y = 0; var y = 0;
while (max < Math.round(amountOfSteps)) { while (max < Math.round(amountOfSteps)) {
step.next(); 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();
if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) { if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
} }
if (isMajor && this.options['showMajorLabels'] && this.master == true || if (isMajor && this.options['showMajorLabels'] && this.master == true ||
this.options['showMinorLabels'] == false && this.master == false && isMajor == true) { this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
if (y >= 0) { if (y >= 0) {
this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
} }
this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth); this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
} }
@ -369,9 +388,14 @@ DataAxis.prototype._redrawLabels = function () {
this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange; 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;
// Note that title is rotated, so we're using the height, not width!
var titleWidth = 0;
if(this.options.title[orientation] !== undefined) {
titleWidth = this.props.titleCharHeight;
}
var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
// this will resize the yAxis to accomodate the labels.
// this will resize the yAxis to accommodate the labels.
if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) { if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
this.width = this.maxLabelSize + offset; this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px"; this.options.width = this.width + "px";
@ -461,6 +485,36 @@ DataAxis.prototype._redrawLine = function (y, orientation, className, offset, wi
} }
}; };
/**
* Create a title for the axis
* @private
* @param orientation
*/
DataAxis.prototype._redrawTitle = function (orientation) {
DOMutil.prepareElements(this.DOMelements.title);
// Check if the title is defined for this axes
if(this.options.title[orientation] == undefined || this.options.title[orientation].text === undefined) {
return;
}
var title = DOMutil.getDOMElement('div',this.DOMelements.title, this.dom.frame);
title.className = 'yAxis title ' + orientation;
title.innerHTML = this.options.title[orientation].text;
// Add style - if provided
if(this.options.title[orientation].style !== undefined) {
util.addCssText(title, this.options.title[orientation].style);
}
if (orientation == 'left') {
title.style.left = this.props.titleCharHeight + 'px';
}
else {
title.style.right = this.props.titleCharHeight + 'px';
}
title.style.width = this.height + 'px';
};
@ -497,6 +551,19 @@ DataAxis.prototype._calculateCharSize = function () {
this.dom.frame.removeChild(measureCharMajor); this.dom.frame.removeChild(measureCharMajor);
} }
if (!('titleCharHeight' in this.props)) {
var textTitle = document.createTextNode('0');
var measureCharTitle = document.createElement('DIV');
measureCharTitle.className = 'yAxis title measure';
measureCharTitle.appendChild(textTitle);
this.dom.frame.appendChild(measureCharTitle);
this.props.titleCharHeight = measureCharTitle.clientHeight;
this.props.titleCharWidth = measureCharTitle.clientWidth;
this.dom.frame.removeChild(measureCharTitle);
}
}; };
/** /**

+ 5
- 0
lib/timeline/component/GraphGroup.js View File

@ -71,6 +71,7 @@ GraphGroup.prototype.update = function(group) {
this.content = group.content || 'graph'; this.content = group.content || 'graph';
this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10; this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
this.visible = group.visible === undefined ? true : group.visible; this.visible = group.visible === undefined ? true : group.visible;
this.style = group.style;
this.setOptions(group.options); this.setOptions(group.options);
}; };
@ -88,6 +89,10 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
if (this.options.style == 'line') { if (this.options.style == 'line') {
path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
path.setAttributeNS(null, "class", this.className); path.setAttributeNS(null, "class", this.className);
if(this.style !== undefined) {
path.setAttributeNS(null, "style", this.style);
}
path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+""); path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
if (this.options.shaded.enabled == true) { if (this.options.shaded.enabled == true) {
fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);

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

@ -74,7 +74,6 @@ function LineGraph(body, options) {
} }
}; };
// options is shared by this ItemSet and all its items // options is shared by this ItemSet and all its items
this.options = util.extend({}, this.defaultOptions); this.options = util.extend({}, this.defaultOptions);
this.dom = {}; this.dom = {};
@ -1067,7 +1066,10 @@ LineGraph.prototype._drawLineGraph = function (dataset, group) {
var path, d; var path, d;
var svgHeight = Number(this.svg.style.height.replace('px','')); var svgHeight = Number(this.svg.style.height.replace('px',''));
path = DOMutil.getSVGElement('path', this.svgElements, this.svg); path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
path.setAttributeNS(null, 'class', group.className);
path.setAttributeNS(null, "class", group.className);
if(group.style !== undefined) {
path.setAttributeNS(null, "style", group.style);
}
// construct path from dataset // construct path from dataset
if (group.options.catmullRom.enabled == true) { if (group.options.catmullRom.enabled == true) {
@ -1087,8 +1089,11 @@ LineGraph.prototype._drawLineGraph = function (dataset, group) {
else { else {
dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight; dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
} }
fillPath.setAttributeNS(null, 'class', group.className + ' fill');
fillPath.setAttributeNS(null, 'd', dFill);
fillPath.setAttributeNS(null, "class", group.className + " fill");
if(group.options.shaded.style !== undefined) {
fillPath.setAttributeNS(null, "style", group.options.shaded.style);
}
fillPath.setAttributeNS(null, "d", dFill);
} }
// copy properties to path for drawing. // copy properties to path for drawing.
path.setAttributeNS(null, 'd', 'M' + d); path.setAttributeNS(null, 'd', 'M' + d);

+ 42
- 0
lib/timeline/component/css/dataaxis.css View File

@ -44,6 +44,48 @@
width: auto; width: auto;
} }
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend { .vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65); background-color: rgba(247, 252, 255, 0.65);

Write Preview
Loading…
Cancel
Save