working chart with chartjs
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
(function (root, factory) {
|
||||
// if (typeof define === 'function' && define.amd) {
|
||||
// // AMD. Register as an anonymous module.
|
||||
// define([], function () {
|
||||
// return (root.returnExportsGlobal = factory());
|
||||
// });
|
||||
// } else if (typeof exports === 'object') {
|
||||
// // Node. Does not work with strict CommonJS, but
|
||||
// // only CommonJS-like enviroments that support module.exports,
|
||||
// // like Node.
|
||||
// module.exports = factory();
|
||||
// } else {
|
||||
root['Chartist.plugins.ctAxisTitle'] = factory();
|
||||
// }
|
||||
}(this, function () {
|
||||
|
||||
/**
|
||||
* Chartist.js plugin to display a title for 1 or 2 axises.
|
||||
*
|
||||
*/
|
||||
/* global Chartist */
|
||||
(function (window, document, Chartist) {
|
||||
'use strict';
|
||||
|
||||
var axisDefaults = {
|
||||
axisTitle: '',
|
||||
axisClass: 'ct-axis-title',
|
||||
offset: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
textAnchor: 'middle',
|
||||
flipText: false
|
||||
};
|
||||
var defaultOptions = {
|
||||
axisX: axisDefaults,
|
||||
axisY: axisDefaults
|
||||
};
|
||||
|
||||
Chartist.plugins = Chartist.plugins || {};
|
||||
Chartist.plugins.ctAxisTitle = function (options) {
|
||||
|
||||
options = Chartist.extend({}, defaultOptions, options);
|
||||
|
||||
console.log(options);
|
||||
|
||||
return function ctAxisTitle(chart) {
|
||||
|
||||
chart.on('created', function (data) {
|
||||
//
|
||||
// if (!options.axisX.axisTitle && !options.axisY.axisTitle) {
|
||||
// throw new Error('ctAxisTitle plugin - You must provide at least one axis title');
|
||||
// } else if (!data.axisX && !data.axisY) {
|
||||
// throw new Error('ctAxisTitle plugin can only be used on charts that have at least one axis');
|
||||
// }
|
||||
|
||||
var xPos;
|
||||
var yPos;
|
||||
var title;
|
||||
|
||||
//position axis X title
|
||||
if (options.axisX.axisTitle && data.axisX) {
|
||||
|
||||
xPos = (data.axisX.axisLength / 2) + data.options.axisY.offset + data.options.chartPadding.left;
|
||||
|
||||
yPos = data.options.chartPadding.top;
|
||||
|
||||
if (data.options.axisY.position === 'end') {
|
||||
xPos -= data.options.axisY.offset;
|
||||
}
|
||||
|
||||
if (data.options.axisX.position === 'end') {
|
||||
yPos += data.axisY.axisLength;
|
||||
}
|
||||
|
||||
title = new Chartist.Svg("text");
|
||||
title.addClass(options.axisX.axisClass);
|
||||
title.text(options.axisX.axisTitle);
|
||||
title.attr({
|
||||
x: xPos + options.axisX.offset.x,
|
||||
y: yPos + options.axisX.offset.y,
|
||||
"text-anchor": options.axisX.textAnchor
|
||||
});
|
||||
|
||||
data.svg.append(title, true);
|
||||
|
||||
}
|
||||
|
||||
//position axis Y title
|
||||
if (options.axisY.axisTitle && data.axisY) {
|
||||
xPos = 0;
|
||||
|
||||
|
||||
yPos = (data.axisY.axisLength / 2) + data.options.chartPadding.top;
|
||||
|
||||
if (data.options.axisX.position === 'start') {
|
||||
yPos += data.options.axisX.offset;
|
||||
}
|
||||
|
||||
if (data.options.axisY.position === 'end') {
|
||||
xPos = data.axisX.axisLength;
|
||||
}
|
||||
|
||||
var transform = 'rotate(' + (options.axisY.flipText ? -90 : 90) + ', ' + xPos + ', ' + yPos + ')';
|
||||
|
||||
title = new Chartist.Svg("text");
|
||||
title.addClass(options.axisY.axisClass);
|
||||
title.text(options.axisY.axisTitle);
|
||||
title.attr({
|
||||
x: xPos + options.axisY.offset.x,
|
||||
y: yPos + options.axisY.offset.y,
|
||||
transform: transform,
|
||||
"text-anchor": options.axisY.textAnchor
|
||||
});
|
||||
|
||||
data.svg.append(title, true);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
}(window, document, Chartist));
|
||||
|
||||
return Chartist.plugins.ctAxisTitle;
|
||||
|
||||
}));
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,272 @@
|
||||
(function (root, factory) {
|
||||
// if (typeof define === 'function' && define.amd) {
|
||||
// // AMD. Register as an anonymous module.
|
||||
// define([], function () {
|
||||
// return (root.returnExportsGlobal = factory());
|
||||
// });
|
||||
// } else if (typeof exports === 'object') {
|
||||
// // Node. Does not work with strict CommonJS, but
|
||||
// // only CommonJS-like enviroments that support module.exports,
|
||||
// // like Node.
|
||||
// module.exports = factory();
|
||||
// } else {
|
||||
root['Chartist.plugins.zoom'] = factory();
|
||||
// }
|
||||
}(this, function () {
|
||||
|
||||
/**
|
||||
* Chartist.js zoom plugin.
|
||||
*
|
||||
*/
|
||||
(function (window, document, Chartist) {
|
||||
'use strict';
|
||||
|
||||
var defaultOptions = {
|
||||
// onZoom
|
||||
// resetOnRightMouseBtn
|
||||
};
|
||||
|
||||
|
||||
Chartist.plugins = Chartist.plugins || {};
|
||||
Chartist.plugins.zoom = function (options) {
|
||||
|
||||
options = Chartist.extend({}, defaultOptions, options);
|
||||
|
||||
return function zoom(chart) {
|
||||
|
||||
if (!(chart instanceof Chartist.Line)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var rect, svg, axisX, axisY, chartRect;
|
||||
var downPosition;
|
||||
var onZoom = options.onZoom;
|
||||
var ongoingTouches = [];
|
||||
|
||||
chart.on('draw', function (data) {
|
||||
var type = data.type;
|
||||
if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
|
||||
data.element.attr({
|
||||
'clip-path': 'url(#zoom-mask)'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
chart.on('created', function (data) {
|
||||
axisX = data.axisX;
|
||||
axisY = data.axisY;
|
||||
chartRect = data.chartRect;
|
||||
svg = data.svg._node;
|
||||
rect = data.svg.elem('rect', {
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 100,
|
||||
height: 100,
|
||||
}, 'ct-zoom-rect');
|
||||
hide(rect);
|
||||
|
||||
var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
|
||||
var width = chartRect.width();
|
||||
var height = chartRect.height();
|
||||
|
||||
defs
|
||||
.elem('clipPath', {
|
||||
id: 'zoom-mask'
|
||||
})
|
||||
.elem('rect', {
|
||||
x: chartRect.x1,
|
||||
y: chartRect.y2,
|
||||
width: width,
|
||||
height: height,
|
||||
fill: 'white'
|
||||
});
|
||||
|
||||
svg.addEventListener('mousedown', onMouseDown);
|
||||
svg.addEventListener('mouseup', onMouseUp);
|
||||
svg.addEventListener('mousemove', onMouseMove);
|
||||
svg.addEventListener('touchstart', onTouchStart);
|
||||
svg.addEventListener('touchmove', onTouchMove);
|
||||
svg.addEventListener('touchend', onTouchEnd);
|
||||
svg.addEventListener('touchcancel', onTouchCancel);
|
||||
});
|
||||
|
||||
function copyTouch(touch) {
|
||||
var p = position(touch, svg);
|
||||
p.id = touch.identifier;
|
||||
return p;
|
||||
}
|
||||
|
||||
function ongoingTouchIndexById(idToFind) {
|
||||
for (var i = 0; i < ongoingTouches.length; i++) {
|
||||
var id = ongoingTouches[i].id;
|
||||
if (id === idToFind) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function onTouchStart(event) {
|
||||
var touches = event.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
ongoingTouches.push(copyTouch(touches[i]));
|
||||
}
|
||||
|
||||
if (ongoingTouches.length > 1) {
|
||||
rect.attr(getRect(ongoingTouches[0], ongoingTouches[1]));
|
||||
show(rect);
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchMove(event) {
|
||||
var touches = event.changedTouches;
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var idx = ongoingTouchIndexById(touches[i].identifier);
|
||||
ongoingTouches.splice(idx, 1, copyTouch(touches[i]));
|
||||
}
|
||||
|
||||
if (ongoingTouches.length > 1) {
|
||||
rect.attr(getRect(ongoingTouches[0], ongoingTouches[1]));
|
||||
show(rect);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchCancel(event) {
|
||||
removeTouches(event.changedTouches);
|
||||
}
|
||||
|
||||
function removeTouches(touches) {
|
||||
for (var i = 0; i < touches.length; i++) {
|
||||
var idx = ongoingTouchIndexById(touches[i].identifier);
|
||||
if (idx >= 0) {
|
||||
ongoingTouches.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchEnd(event) {
|
||||
if (ongoingTouches.length > 1) {
|
||||
zoomIn(getRect(ongoingTouches[0], ongoingTouches[1]));
|
||||
}
|
||||
removeTouches(event.changedTouches);
|
||||
hide(rect);
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
if (event.button === 0) {
|
||||
downPosition = position(event, svg);
|
||||
rect.attr(getRect(downPosition, downPosition));
|
||||
show(rect);
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
var reset = function () {
|
||||
chart.options.axisX.highLow = null;
|
||||
chart.options.axisY.highLow = null;
|
||||
chart.update(chart.data, chart.options);
|
||||
};
|
||||
|
||||
function onMouseUp(event) {
|
||||
if (event.button === 0) {
|
||||
var box = getRect(downPosition, position(event, svg));
|
||||
zoomIn(box);
|
||||
downPosition = null;
|
||||
hide(rect);
|
||||
event.preventDefault();
|
||||
}
|
||||
else if (options.resetOnRightMouseBtn && event.button === 2) {
|
||||
reset();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function zoomIn(rect) {
|
||||
if (rect.width > 5 && rect.height > 5) {
|
||||
var x1 = rect.x - chartRect.x1;
|
||||
var x2 = x1 + rect.width;
|
||||
var y2 = chartRect.y1 - rect.y;
|
||||
var y1 = y2 - rect.height;
|
||||
|
||||
chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
|
||||
chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
|
||||
|
||||
chart.update(chart.data, chart.options);
|
||||
onZoom && onZoom(chart, reset);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
if (downPosition) {
|
||||
var point = position(event, svg);
|
||||
rect.attr(getRect(downPosition, point));
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
function hide(rect) {
|
||||
rect.attr({ style: 'display:none' });
|
||||
}
|
||||
|
||||
function show(rect) {
|
||||
rect.attr({ style: 'display:block' });
|
||||
}
|
||||
|
||||
function getRect(firstPoint, secondPoint) {
|
||||
var x = firstPoint.x;
|
||||
var y = firstPoint.y;
|
||||
var width = secondPoint.x - x;
|
||||
var height = secondPoint.y - y;
|
||||
if (width < 0) {
|
||||
width = -width;
|
||||
x = secondPoint.x;
|
||||
}
|
||||
if (height < 0) {
|
||||
height = -height;
|
||||
y = secondPoint.y;
|
||||
}
|
||||
return {
|
||||
x: x,
|
||||
y: y,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
}
|
||||
|
||||
function position(event, svg) {
|
||||
return transform(event.clientX, event.clientY, svg);
|
||||
}
|
||||
|
||||
function transform(x, y, svgElement) {
|
||||
var svg = svgElement.tagName === 'svg' ? svgElement : svgElement.ownerSVGElement;
|
||||
var matrix = svg.getScreenCTM();
|
||||
var point = svg.createSVGPoint();
|
||||
point.x = x;
|
||||
point.y = y;
|
||||
point = point.matrixTransform(matrix.inverse());
|
||||
return point || { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
function project(value, axis) {
|
||||
var max = axis.bounds.max;
|
||||
var min = axis.bounds.min;
|
||||
if (axis.scale && axis.scale.type === 'log') {
|
||||
var base = axis.scale.base;
|
||||
return Math.pow(base,
|
||||
value * baseLog(max / min, base) / axis.axisLength) * min;
|
||||
}
|
||||
return (value * axis.bounds.range / axis.axisLength) + min;
|
||||
}
|
||||
|
||||
function baseLog(val, base) {
|
||||
return Math.log(val) / Math.log(base);
|
||||
}
|
||||
|
||||
} (window, document, Chartist));
|
||||
return Chartist.plugins.zoom;
|
||||
|
||||
}));
|
||||
Reference in New Issue
Block a user