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 'graph2d_add_title' into development 

* graph2d_add_title:
  Update demo
  Catch case where title is undefined
  Add style option for axis titles.
  Add documentation for axis titles.
  Tidy up example
  Add 'title' option to display a title on the left or right axes. This is primarily designed for the graph2d line graph.

Conflicts:
	lib/timeline/component/DataAxis.js
v3_develop
Chris Jackson 10 years ago
parent
0e05811055 ab76d35203
commit
6712173888
4 changed files with 328 additions and 4 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -0
      docs/graph2d.html
  2. +201
    -0
      examples/graph2d/16_bothAxis_titles.html
  3. +61
    -4
      lib/timeline/component/DataAxis.js
  4. +42
    -0
      lib/timeline/component/css/dataaxis.css

+ 24
- 0
docs/graph2d.html View File

@ -464,6 +464,30 @@ The options colored in green can also be used as options for the groups. All opt
<td>true</td>
<td>Show or hide the data axis.</td>
</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>groups.visibility</td>
<td>Object</td>

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

@ -0,0 +1,201 @@
<!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 | Axis Title 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. 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>
</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}}});
}
}
</script>
</body>
</html>

+ 61
- 4
lib/timeline/component/DataAxis.js View File

@ -31,6 +31,10 @@ function DataAxis (body, options, svg, linegraphOptions) {
left: {min:undefined, max:undefined},
right: {min:undefined, max:undefined}
},
title: {
left: {text:undefined},
right: {text:undefined}
},
format: {
left: {decimals: undefined},
right: {decimals: undefined}
@ -42,7 +46,8 @@ function DataAxis (body, options, svg, linegraphOptions) {
this.props = {};
this.DOMelements = { // dynamic elements
lines: {},
labels: {}
labels: {},
title: {}
};
this.dom = {};
@ -113,6 +118,7 @@ DataAxis.prototype.setOptions = function (options) {
'width',
'visible',
'customRange',
'title',
'format'
];
util.selectiveExtend(fields, this.options, options);
@ -257,7 +263,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;
@ -285,6 +291,8 @@ DataAxis.prototype.redraw = function () {
if (this.options.icons == true) {
this._redrawGroupIcons();
}
this._redrawTitle(orientation);
}
return changeCalled;
};
@ -370,8 +378,14 @@ 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 = 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 accommodate the labels.
if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
@ -461,6 +475,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 +541,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