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

Add 'title' option to display a title on the left or right axes. 

This is primarily designed for the graph2d line graph.
v3_develop
Chris Jackson 10 years ago
parent
ad3f20bcfd
commit
1636e3717f
3 changed files with 282 additions and 5 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +187
    -0
      examples/graph2d/16_bothAxis_titles.html
  2. +53
    -5
      lib/timeline/component/DataAxis.js
  3. +42
    -0
      lib/timeline/component/css/dataaxis.css

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

@ -0,0 +1,187 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Both Axis Example</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 | Both Axis Example</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.
</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>
</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: {
left: false,
// {
// text: 'Left Axis 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)"};
}
else {
title = false;
}
if(axes == 'left') {
graph2d.setOptions({dataAxis: {title: {left: title}}});
}
else {
graph2d.setOptions({dataAxis: {title: {right: title}}});
}
}
</script>
</body>
</html>

+ 53
- 5
lib/timeline/component/DataAxis.js View File

@ -30,6 +30,10 @@ function DataAxis (body, options, svg, linegraphOptions) {
customRange: {
left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined}
},
title: {
left: {text:undefined},
right: {text:undefined}
}
};
@ -38,7 +42,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
this.props = {};
this.DOMelements = { // dynamic elements
lines: {},
labels: {}
labels: {},
title: {}
};
this.dom = {};
@ -108,7 +113,8 @@ DataAxis.prototype.setOptions = function (options) {
'iconWidth',
'width',
'visible',
'customRange'
'customRange',
'title'
];
util.selectiveExtend(fields, this.options, options);
@ -252,7 +258,7 @@ DataAxis.prototype.redraw = function () {
var showMinorLabels = this.options.showMinorLabels;
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.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
@ -280,6 +286,8 @@ DataAxis.prototype.redraw = function () {
if (this.options.icons == true) {
this._redrawGroupIcons();
}
this._redrawTitle(orientation);
}
return changeCalled;
};
@ -359,8 +367,11 @@ DataAxis.prototype._redrawLabels = function () {
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;
// this will resize the yAxis to accomodate the labels.
// Note that title is rotated, so we're using the height, not width!
var titleWidth = this.options.title[orientation].text === undefined ? 0 : 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 accommodate the labels.
if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
@ -450,6 +461,30 @@ 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] == false || 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;
if (orientation == 'left') {
title.style.left = this.props.titleCharHeight + 'px';
}
else {
title.style.right = this.props.titleCharHeight + 'px';
}
title.style.width = this.height + 'px';
};
@ -486,6 +521,19 @@ DataAxis.prototype._calculateCharSize = function () {
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);
}
};
/**

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

@ -44,6 +44,48 @@
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 {
background-color: rgba(247, 252, 255, 0.65);

Write Preview
Loading…
Cancel
Save