Jingga/jsOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/jsOMS.git synced 2026-02-16 17:28:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add area charts

Browse Source 
Stack chart idea implemented as well but still buggy.
This commit is contained in:
Dennis Eichhorn 2016-05-14 22:42:33 +02:00
parent 9696363f5e
commit deb19715de
3 changed files with 106 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Chart/Chart.js vendored
View File

@ -46,13 +46,14 @@
visible: false visible: false
}, },
dataset: true, /* show dataset below */ dataset: true, /* show dataset below */
interpolate: "linear", /* splines interpolation? */ interpolate: "linear" /* splines interpolation? */
}; };
this.axis = {}; this.axis = {};
this.grid = {}; this.grid = {};
this.subtype = '';
this.purge(); this.clean();
}; };
jsOMS.Chart.prototype.calculateHorizontalPosition = function (position) jsOMS.Chart.prototype.calculateHorizontalPosition = function (position)
@ -290,6 +291,7 @@
if (this.dataSettings.info.visible && this.dataSettings.marker.visible) { if (this.dataSettings.info.visible && this.dataSettings.marker.visible) {
var div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0); var div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0);
div.html(self.axis.x1.label.text + ': ' + 100 + "<br/>" + self.axis.y1.label.text + ': ' + 100);
/* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */ /* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */
temp.on("mouseover", function (d) temp.on("mouseover", function (d)
@ -300,9 +302,10 @@
div.transition() div.transition()
.duration(200) .duration(200)
.style("opacity", .9); .style("opacity", .9);
div.html(self.axis.x1.label.text + ': ' + d.x1 + "<br/>" + self.axis.y1.label.text + ': ' + d.y1) div.html(self.axis.x1.label.text + ': ' + d.x1 + "<br/>" + self.axis.y1.label.text + ': ' + d.y1)
.style("left", (pos.left + 3 - dim.width / 2) + "px") .style("left", (x(d.x1) + dim.width / 2) + "px")
.style("top", (pos.top - dim.height - 5) + "px"); .style("top", (y(d.y1) + dim.height) + "px");
}) })
.on("mouseout", function (d) .on("mouseout", function (d)
{ {
@ -469,7 +472,7 @@
} }
}; };
jsOMS.Chart.prototype.purge = function () jsOMS.Chart.prototype.clean = function ()
{ {
this.margin = {top: 0, right: 0, bottom: 0, left: 0}; this.margin = {top: 0, right: 0, bottom: 0, left: 0};
this.dimension = {width: 0, height: 0}; this.dimension = {width: 0, height: 0};

118
Chart/LineChart.js
View File

@ -6,8 +6,8 @@
// Setting default chart values // Setting default chart values
this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0}; this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0};
this.chart.color = d3.scale.category10(); this.chart.color = d3.scale.category10();
this.chart.axis = { this.chart.axis = {
x1: { x1: {
visible: true, visible: true,
label: { label: {
@ -50,6 +50,8 @@
visible: true visible: true
} }
}; };
this.chart.subtype = 'area';
}; };
jsOMS.Chart.LineChart.prototype.getChart = function () jsOMS.Chart.LineChart.prototype.getChart = function ()
@ -59,7 +61,7 @@
jsOMS.Chart.LineChart.prototype.draw = function () jsOMS.Chart.LineChart.prototype.draw = function ()
{ {
var line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect(); let line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
this.chart.dimension = { this.chart.dimension = {
width: box.width, width: box.width,
@ -114,17 +116,38 @@
x.domain([this.chart.axis.x1.min, this.chart.axis.x1.max + 1]); x.domain([this.chart.axis.x1.min, this.chart.axis.x1.max + 1]);
y.domain([this.chart.axis.y1.min - 1, this.chart.axis.y1.max + 1]); y.domain([this.chart.axis.y1.min - 1, this.chart.axis.y1.max + 1]);
line = d3.svg.line().interpolate(this.chart.dataSettings.interpolate).x(function (d) if (this.chart.subtype === 'area') {
{ line = d3.svg.area().interpolate(this.chart.dataSettings.interpolate).x(function (d)
return x(d.x1); {
}).y(function (d) return x(d.x1);
{ }).y0(this.chart.getDimension().height).y1(function (d)
return y(d.y1); {
}); return y(d.y1);
});
} else if (this.chart.subtype === 'stacked') {
line = d3.svg.area().interpolate(this.chart.dataSettings.interpolate).x(function (d)
{
return x(d.x1);
}).y0(function (d)
{
return y(d.y0);
}).y1(function (d)
{
return y(d.y1 + d.y0);
});
} else if (this.chart.subtype === 'line') {
line = d3.svg.line().interpolate(this.chart.dataSettings.interpolate).x(function (d)
{
return x(d.x1);
}).y(function (d)
{
return y(d.y1);
});
}
zoom = d3.behavior.zoom().x(x).scaleExtent([1, 2]).on('zoom', function () zoom = d3.behavior.zoom().x(x).scaleExtent([1, 2]).on('zoom', function ()
{ {
var tx, ty; let tx, ty;
tx = d3.event.translate[0]; tx = d3.event.translate[0];
ty = d3.event.translate[1]; ty = d3.event.translate[1];
tx = Math.min(1, tx = Math.min(1,
@ -148,13 +171,24 @@
{ {
return self.chart.color(d.name); return self.chart.color(d.name);
}); });
return svg.selectAll('circle.dot').attr('cy', function (d)
{ if (self.chart.subtype === 'stacked') {
return y(d.y1); return svg.selectAll('circle.dot').attr('cy', function (d)
}).attr('cx', function (d) {
{ return y(d.y1 + d.y0);
return x(d.x1); }).attr('cx', function (d)
}).attr('r', 4); {
return x(d.x1);
}).attr('r', 4);
} else {
return svg.selectAll('circle.dot').attr('cy', function (d)
{
return y(d.y1);
}).attr('cx', function (d)
{
return x(d.x1);
}).attr('r', 4);
}
}); });
svg = this.chart.chartSelect.append("svg") svg = this.chart.chartSelect.append("svg")
@ -172,10 +206,10 @@
//svg.selectAll('.x.axis').transition().duration(500).call(xAxis1); //svg.selectAll('.x.axis').transition().duration(500).call(xAxis1);
//svg.selectAll('.y.axis').transition().duration(500).call(yAxis1); //svg.selectAll('.y.axis').transition().duration(500).call(yAxis1);
var dataPoint, dataPointEnter; let dataPoint, dataPointEnter,
var temp = this.drawData(svg, line, dataPointEnter, dataPoint); temp = this.drawData(svg, line, dataPointEnter, dataPoint);
dataPointEnter = temp[0]; dataPointEnter = temp[0];
dataPoint = temp[1]; dataPoint = temp[1];
this.chart.drawMarker(svg, x, y, dataPointEnter, dataPoint); this.chart.drawMarker(svg, x, y, dataPointEnter, dataPoint);
this.chart.drawLegend(svg, dataPointEnter, dataPoint); this.chart.drawLegend(svg, dataPointEnter, dataPoint);
this.chart.drawText(svg); this.chart.drawText(svg);
@ -197,7 +231,7 @@
jsOMS.Chart.LineChart.prototype.drawData = function (svg, line, dataPointEnter, dataPoint) jsOMS.Chart.LineChart.prototype.drawData = function (svg, line, dataPointEnter, dataPoint)
{ {
var self = this; let self = this;
dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c) dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c)
{ {
@ -205,13 +239,18 @@
}); });
dataPointEnter = dataPoint.enter().append("g").attr("class", "dataPoint"); dataPointEnter = dataPoint.enter().append("g").attr("class", "dataPoint");
dataPointEnter.append("path").attr('clip-path', 'url(#clipper1)').attr("class", "line"); dataPointEnter.append("path").attr('clip-path', 'url(#clipper1)').attr("class", self.chart.subtype);
dataPoint.select('path').style("stroke-width", this.chart.dataSettings.style.strokewidth).transition().duration(500).attr("d", function (d) dataPoint.select('path').style("stroke-width", this.chart.dataSettings.style.strokewidth).transition().duration(500).attr("d", function (d)
{ {
return line(d.points); return line(d.points);
}).style("stroke", function (d) }).style("stroke", function (d)
{ {
return self.chart.color(d.name); return self.chart.color(d.name);
}).style("fill", function (d)
{
if (self.chart.subtype === 'area' || self.chart.subtype === 'stacked') {
return self.chart.color(d.name);
}
}); });
return [dataPointEnter, dataPoint]; return [dataPointEnter, dataPoint];
@ -237,7 +276,7 @@
} }
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));
var c, chart, data, dataGen, i, k; var c, chart, data, dataGen, i, k, count;
dataGen = (function () dataGen = (function ()
{ {
@ -245,34 +284,49 @@ dataGen = (function ()
{ {
return function () return function ()
{ {
var data, j, nums, y1Seed; var tempData, j, nums, y1Seed;
nums = Math.ceil(Math.random() * 50) + 4; nums = Math.ceil(Math.random() * 50) + 4;
y1Seed = Math.round(Math.random() * 20); y1Seed = Math.round(Math.random() * 20);
data = { tempData = {
id: id, id: id,
name: "Dataset " + id, name: "Dataset " + id,
points: (function () points: (function ()
{ {
var k, ref, results; var k, ref, results, prev, counter = 0;
results = []; results = [];
for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) { for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) {
if(data.length > 0) {
if(typeof data[count-2].points !== 'undefined' && data[count-2].points.length > counter && typeof data[count-2].points[counter].y1 !== 'undefined') {
prev = data[count-2].points[counter].y1;
} else {
prev = 0;
}
} else {
prev = 0;
}
counter++;
results.push({ results.push({
x1: j, x1: j,
y1: y1Seed + Math.round(Math.random() * 5) y1: y1Seed + Math.round(Math.random() * 5),
y0: prev
}); });
} }
return results; return results;
})() })()
}; };
id = id + 1; id = id + 1;
return data; return tempData;
}; };
})(1); })(1);
})(); })();
data = []; data = [];
for (i = k = 1; k <= 10; i = ++k) { for (i = k = 1; k <= 3; i = ++k) {
count = i;
data.push(dataGen()); data.push(dataGen());
} }

12
Utils/oLib.js
View File

@ -48,6 +48,18 @@
} }
}; };
jsOMS.hasProperty = function(obj) {
let args = Array.prototype.slice.call(arguments, 1);
for (let i = 0; i < args.length; i++) {
if (!obj || !obj.hasOwnProperty(args[i])) {
return false;
}
obj = obj[args[i]];
}
return true;
};
/** /**
* Remove class * Remove class
* *