Jingga/jsOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/jsOMS.git synced 2026-01-26 00:18:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Creating grouped/stacked column chart

Browse Source
This commit is contained in:
Dennis Eichhorn 2016-05-15 14:42:44 +02:00
parent deb19715de
commit 9fb06b225a
4 changed files with 406 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
Chart/BarChart.js
View File

@ -1,283 +0,0 @@
(function (jsOMS, undefined)
{
jsOMS.Chart.BarChart = function (id)
{
this.chart = new jsOMS.Chart(id);
// Setting default chart values
this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0};
this.chart.color = d3.scale.ordinal().
range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
this.chart.axis = {
x1: {
visible: true,
label: {
visible: true,
text: 'X-Axis',
position: "center",
anchor: 'middle'
},
tick: {
prefix: '',
orientation: 'bottom',
size: 7
},
min: 0,
max: 0
},
y1: {
visible: true,
label: {
visible: true,
text: 'Y-Axis',
position: 'center',
anchor: 'middle'
},
tick: {
prefix: '',
orientation: 'bottom',
size: 7
},
min: 0,
max: 0
}
};
this.chart.grid = {
x: {
visible: true
},
y: {
visible: true
}
};
};
jsOMS.Chart.BarChart.prototype.getChart = function ()
{
return this.chart;
};
jsOMS.Chart.BarChart.prototype.draw = function ()
{
var line, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
this.chart.dimension = {
width: box.width,
height: box.height
};
x = d3.scale.linear().range([
0,
this.chart.dimension.width
- this.chart.margin.right
- this.chart.margin.left
]);
y = d3.scale.linear().range([
this.chart.dimension.height
- this.chart.margin.top
- this.chart.margin.bottom,
10
]);
// axis
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
{
return self.chart.axis.x1.tick.prefix + d;
}).orient("bottom").outerTickSize(this.chart.axis.x1.tick.size).innerTickSize(this.chart.axis.x1.tick.size).tickPadding(7);
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
{
return self.chart.axis.y1.tick.prefix + d;
}).orient("left").outerTickSize(this.chart.axis.y1.tick.size).innerTickSize(this.chart.axis.y1.tick.size).tickPadding(7);
xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
//.ticks(0)
.tickSize(
-(this.chart.dimension.height
- this.chart.margin.top - 10
- this.chart.margin.bottom), 0, 0)
.tickFormat("");
yGrid = d3.svg.axis()
.scale(y)
.orient("left")
//.ticks(0)
.tickSize(
-this.chart.dimension.width
+ this.chart.margin.right
+ this.chart.margin.left, 0, 0)
.tickFormat("");
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]);
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 ()
{
var tx, ty;
tx = d3.event.translate[0];
ty = d3.event.translate[1];
tx = Math.min(1,
Math.max(tx,
self.chart.dimension.width
- self.chart.margin.right
- self.chart.margin.left
- Math.round(x(self.chart.axis.y1.max) - x(1)),
self.chart.dimension.width
- self.chart.margin.right
- self.chart.margin.left
- Math.round(x(self.chart.axis.y1.max) - x(1)) * d3.event.scale));
zoom.translate([tx, ty]);
svg.select('.x.axis').call(xAxis1);
svg.select('.x.grid').call(xGrid);
svg.selectAll('.line').attr("d", function (d)
{
return line(d.points);
}).style("stroke", function (d)
{
return self.chart.color(d.name);
});
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")
.attr("width", this.chart.dimension.width)
.attr("height", this.chart.dimension.height)
.append("g").attr("transform", "translate("
+ (this.chart.margin.left) + ","
+ (this.chart.margin.top) + ")");
this.chart.drawGrid(svg, xGrid, yGrid);
this.drawZoomPanel(svg, zoom);
zoom.scaleExtent([1, Number.MAX_VALUE]);
//svg.selectAll('.x.grid').transition().duration(500).call(xGrid);
//svg.selectAll('.x.axis').transition().duration(500).call(xAxis1);
//svg.selectAll('.y.axis').transition().duration(500).call(yAxis1);
var dataPoint, dataPointEnter;
var temp = this.drawData(svg, line, dataPointEnter, dataPoint);
dataPointEnter = temp[0];
dataPoint = temp[1];
this.chart.drawMarker(svg, x, y, dataPointEnter, dataPoint);
this.chart.drawLegend(svg, dataPointEnter, dataPoint);
this.chart.drawText(svg);
this.chart.drawAxis(svg, xAxis1, yAxis1);
if (this.chart.shouldRedraw) {
this.redraw();
}
return zoom.x(x);
};
jsOMS.Chart.BarChart.prototype.redraw = function ()
{
this.chart.shouldRedraw = false;
this.chart.chartSelect.select("*").remove();
this.draw();
};
jsOMS.Chart.BarChart.prototype.drawData = function (svg, bar, dataPointEnter, dataPoint)
{
var self = this;
dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c)
{
return c.id;
});
dataPointEnter = dataPoint.enter().append("g").attr("class", "dataPoint");
dataPointEnter.append("path").attr('clip-path', 'url(#clipper1)').attr("class", "line");
dataPoint.select('path').style("stroke-width", this.chart.dataSettings.style.strokewidth).transition().duration(500).attr("d", function (d)
{
return bar(d.points);
}).style("stroke", function (d)
{
return self.chart.color(d.name);
});
return [dataPointEnter, dataPoint];
};
jsOMS.Chart.BarChart.prototype.drawZoomPanel = function (svg, zoom)
{
this.chart.position.zoompanel.top = 10;
svg.append("rect")
.attr('class', 'zoom-panel')
.attr('y', this.chart.position.zoompanel.top)
.attr("width",
this.chart.dimension.width
- this.chart.margin.right
- this.chart.margin.left
)
.attr("height",
this.chart.dimension.height
- this.chart.margin.top
- this.chart.margin.bottom - this.chart.position.zoompanel.top
).call(zoom);
}
}(window.jsOMS = window.jsOMS || {}));
var c, chart, data, dataGen, i, k;
dataGen = (function ()
{
return (function (id)
{
return function ()
{
var data, j, nums, y1Seed;
nums = Math.ceil(Math.random() * 50) + 4;
y1Seed = Math.round(Math.random() * 20);
data = {
id: id,
name: "Dataset " + id,
points: (function ()
{
var k, ref, results;
results = [];
for (j = k = 1, ref = nums; 1 <= ref ? k <= ref : k >= ref; j = 1 <= ref ? ++k : --k) {
results.push({
x1: j,
y1: y1Seed + Math.round(Math.random() * 5)
});
}
return results;
})()
};
id = id + 1;
return data;
};
})(1);
})();
data = [];
for (i = k = 1; k <= 10; i = ++k) {
data.push(dataGen());
}
var mychart = new jsOMS.Chart.BarChart('chart');
mychart.getChart().setData(data);
mychart.draw();

69
Chart/Chart.js vendored
View File

@ -58,7 +58,7 @@
jsOMS.Chart.prototype.calculateHorizontalPosition = function (position)
{
var x = 0;
let x = 0;
if (position === 'center') {
x = (
this.dimension.width
@ -76,7 +76,7 @@
jsOMS.Chart.prototype.calculateVerticalPosition = function (position)
{
var y = 0;
let y = 0;
if (position === 'center') {
y = -(this.dimension.height
- this.margin.top
@ -170,6 +170,16 @@
return this.footer;
};
jsOMS.Chart.prototype.setSubtype = function (subtype)
{
this.subtype = subtype;
};
jsOMS.Chart.prototype.getSubtype = function ()
{
return this.subtype;
};
jsOMS.Chart.prototype.setLegend = function (legend)
{
this.legend = legend;
@ -200,7 +210,7 @@
jsOMS.Chart.prototype.findAxisDomain = function ()
{
for (var id in this.axis) {
for (let id in this.axis) {
this.axis[id].max = d3.max(this.dataset, function (m)
{
return d3.max(m.points, function (d)
@ -226,7 +236,7 @@
jsOMS.Chart.prototype.drawLegend = function (svg, dataPointEnter, dataPoint)
{
var self = this;
let self = this;
if (this.legend !== undefined && this.legend.visible) {
dataPointEnter.append("text").attr('class', 'dataPoint-name');
@ -255,7 +265,7 @@
});
dataPoint.exit().remove();
var tlength = this.chartSelect.select('.dataPoint-name').node().getComputedTextLength();
let tlength = this.chartSelect.select('.dataPoint-name').node().getComputedTextLength();
// Adding margin for legend
if (this.margin.right < tlength) {
@ -270,7 +280,7 @@
jsOMS.Chart.prototype.drawMarker = function (svg, x, y, dataPointEnter, dataPoint)
{
var self = this, temp;
let self = this, temp;
if (this.dataSettings.marker.visible) {
temp = dataPointEnter.append('g').attr('class', 'dots').attr('clip-path', 'url(#clipper1)').selectAll('circle').data(function (d)
@ -282,16 +292,16 @@
return self.color(d.name);
}).selectAll('circle').transition().duration(500).attr('cy', function (d)
{
return y(d.y1);
return y(d.y);
}).attr('cx', function (d)
{
return x(d.x1);
return x(d.x);
}).attr('r', 4);
}
if (this.dataSettings.info.visible && this.dataSettings.marker.visible) {
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);
div.html(self.axis.x.label.text + ': ' + 100 + "<br/>" + self.axis.y.label.text + ': ' + 100);
/* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */
temp.on("mouseover", function (d)
@ -303,9 +313,9 @@
.duration(200)
.style("opacity", .9);
div.html(self.axis.x1.label.text + ': ' + d.x1 + "<br/>" + self.axis.y1.label.text + ': ' + d.y1)
.style("left", (x(d.x1) + dim.width / 2) + "px")
.style("top", (y(d.y1) + dim.height) + "px");
div.html(self.axis.x.label.text + ': ' + d.x + "<br/>" + self.axis.y.label.text + ': ' + d.y)
.style("left", (x(d.x) + dim.width / 2) + "px")
.style("top", (y(d.y) + dim.height) + "px");
})
.on("mouseout", function (d)
{
@ -382,8 +392,9 @@
jsOMS.Chart.prototype.drawAxis = function (svg, xAxis1, yAxis1)
{
// draw clipper
var defs = svg.append('svg').attr('width', 0).attr('height', 0).append('defs'), pos = 0, temp;
let defs = svg.append('svg').attr('width', 0).attr('height', 0).append('defs'), pos = 0, temp;
defs.append('clipPath').attr('id', 'clipper1').append('rect').attr('x', 0).attr('y', 0)
.attr('width',
this.dimension.width
@ -396,7 +407,7 @@
- this.margin.bottom
);
if (this.axis.x1 !== undefined && this.axis.x1.visible) {
if (this.axis.x !== undefined && this.axis.x.visible) {
temp = svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (
@ -406,43 +417,43 @@
) + ")")
.call(xAxis1);
if (this.axis.x1.label.visible) {
pos = this.calculateHorizontalPosition(this.axis.x1.label.position);
if (this.axis.x.label.visible) {
pos = this.calculateHorizontalPosition(this.axis.x.label.position);
temp.append("text")
.attr('y', 45)
.attr('x', pos)
.style("text-anchor", this.axis.x1.label.anchor)
.text(this.axis.x1.label.text);
.style("text-anchor", this.axis.x.label.anchor)
.text(this.axis.x.label.text);
}
if (!this.defined.axis.x1) {
if (!this.defined.axis.x) {
this.margin.bottom += 50;
this.defined.axis.x1 = true;
this.defined.axis.x = true;
this.shouldRedraw = true;
}
}
if (this.axis.y1 !== undefined && this.axis.y1.visible) {
if (this.axis.y !== undefined && this.axis.y.visible) {
temp = svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis1);
if (this.axis.y1.label.visible) {
pos = this.calculateVerticalPosition(this.axis.y1.label.position);
if (this.axis.y.label.visible) {
pos = this.calculateVerticalPosition(this.axis.y.label.position);
temp.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -this.margin.left + 10)
.attr('x', pos)
.style("text-anchor", this.axis.y1.label.anchor)
.text(this.axis.y1.label.text);
.style("text-anchor", this.axis.y.label.anchor)
.text(this.axis.y.label.text);
}
if (!this.defined.axis.y1) {
if (!this.defined.axis.y) {
this.margin.left += svg.select('.y.axis .tick').node().getBoundingClientRect().width + 25;
this.defined.axis.y1 = true;
this.defined.axis.y = true;
this.shouldRedraw = true;
}
}
@ -498,8 +509,8 @@
this.shouldRedraw = false;
this.defined = {
axis: {
x1: false,
y1: false
x: false,
y: false
},
text: {
title: false,

333
Chart/ColumnChart.js Normal file
View File

@ -0,0 +1,333 @@
(function (jsOMS, undefined)
{
jsOMS.Chart.ColumnChart = function (id)
{
this.chart = new jsOMS.Chart(id);
// Setting default chart values
this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0};
this.chart.color = d3.scale.category10();
this.chart.axis = {
x: {
visible: true,
label: {
visible: true,
text: 'X-Axis',
position: "center",
anchor: 'middle'
},
tick: {
prefix: '',
orientation: 'bottom',
size: 7
},
min: 0,
max: 0
},
y: {
visible: true,
label: {
visible: true,
text: 'Y-Axis',
position: 'center',
anchor: 'middle'
},
tick: {
prefix: '',
orientation: 'bottom',
size: 7
},
min: 0,
max: 0
}
};
this.chart.grid = {
x: {
visible: false
},
y: {
visible: true
}
};
this.chart.dataSettings.marker.visible = false;
this.chart.subtype = 'stacked';
};
jsOMS.Chart.ColumnChart.prototype.getChart = function ()
{
return this.chart;
};
jsOMS.Chart.ColumnChart.prototype.draw = function ()
{
let rect, svg, x, xAxis1, xAxis2, y, yAxis1, yAxis2, xGrid, yGrid, zoom, self = this, box = this.chart.chartSelect.node().getBoundingClientRect();
if (this.chart.subtype === 'grouped') {
this.chart.axis.y.max = d3.max(this.chart.dataset, function (layer)
{
return d3.max(layer.points, function (d)
{
return d.y;
});
});
} else {
this.chart.axis.y.max = d3.max(this.chart.dataset, function (layer)
{
return d3.max(layer.points, function (d)
{
return d.y0 + d.y;
});
});
}
this.chart.dimension = {
width: box.width,
height: box.height
};
x = d3.scale.ordinal().range([
0,
this.chart.dimension.width
- this.chart.margin.right
- this.chart.margin.left
]);
y = d3.scale.linear().range([
this.chart.dimension.height
- this.chart.margin.top
- this.chart.margin.bottom,
10
]);
// axis
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
{
return self.chart.axis.x.tick.prefix + d;
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size).innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
{
return self.chart.axis.y.tick.prefix + d;
}).orient("left").outerTickSize(this.chart.axis.y.tick.size).innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
xGrid = d3.svg.axis()
.scale(x)
.orient("bottom")
//.ticks(0)
.tickSize(
-(this.chart.dimension.height
- this.chart.margin.top - 10
- this.chart.margin.bottom), 0, 0)
.tickFormat("");
yGrid = d3.svg.axis()
.scale(y)
.orient("left")
//.ticks(0)
.tickSize(
-this.chart.dimension.width
+ this.chart.margin.right
+ this.chart.margin.left, 0, 0)
.tickFormat("");
x.domain(d3.range(this.chart.dataset[0].points.length)).rangeRoundBands([0, this.chart.dimension.width - this.chart.margin.right - this.chart.margin.left], .1);
y.domain([0, this.chart.axis.y.max + 1]);
svg = this.chart.chartSelect.append("svg")
.attr("width", this.chart.dimension.width)
.attr("height", this.chart.dimension.height)
.append("g").attr("transform", "translate("
+ (this.chart.margin.left) + ","
+ (this.chart.margin.top) + ")");
this.chart.drawGrid(svg, xGrid, yGrid);
let dataPoint, dataPointEnter,
temp = this.drawData(svg, x, y, dataPointEnter, dataPoint);
dataPointEnter = temp[0];
dataPoint = temp[1];
this.chart.drawMarker(svg, x, y, dataPointEnter, dataPoint);
this.chart.drawLegend(svg, dataPointEnter, dataPoint);
this.chart.drawText(svg);
this.chart.drawAxis(svg, xAxis1, yAxis1);
if (this.chart.shouldRedraw) {
this.redraw();
}
};
jsOMS.Chart.ColumnChart.prototype.redraw = function ()
{
this.chart.shouldRedraw = false;
this.chart.chartSelect.select("*").remove();
this.draw();
};
jsOMS.Chart.ColumnChart.prototype.drawData = function (svg, x, y, dataPointEnter, dataPoint)
{
let self = this, rect;
dataPoint = svg.selectAll(".dataPoint").data(this.chart.dataset, function (c)
{
return c.id;
});
dataPointEnter = dataPoint.enter().append("g").attr("class", "dataPoint")
.style("fill", function (d)
{
return self.chart.color(d.name);
});
rect = dataPointEnter.selectAll("rect")
.data(function (d)
{
return d.points;
})
.enter().append("rect")
.attr("x", function (d)
{
return x(d.x);
})
.attr("y", this.chart.dimension.height - this.chart.margin.top - this.chart.margin.bottom)
.attr("width", x.rangeBand())
.attr("height", 0);
if(this.chart.subtype === 'stacked') {
rect.transition()
.delay(function (d, i)
{
return i * 10;
})
.attr("y", function (d)
{
return y(d.y0 + d.y);
})
.attr("height", function (d)
{
return y(d.y0) - y(d.y0 + d.y);
});
} else {
rect.transition()
.duration(500)
.delay(function (d, i)
{
return i * 10;
})
.attr("x", function (d, i, j)
{
return x(d.x) + x.rangeBand() / self.chart.dataset.length * j;
})
.attr("width", x.rangeBand() /self.chart.dataset.length)
.transition()
.attr("y", function (d)
{
return y(d.y);
})
.attr("height", function (d)
{
return self.chart.dimension.height - self.chart.margin.top - self.chart.margin.bottom - y(d.y);
});
}
return [dataPointEnter, dataPoint];
};
jsOMS.Chart.ColumnChart.prototype.transitionGrouped = function (x, y, rect, yMin, yMax)
{
y.domain([yMin, yMax]);
rect.transition()
.duration(500)
.delay(function (d, i)
{
return i * 10;
})
.attr("x", function (d, i, j)
{
return x(d.x) + x.rangeBand() / n * j;
})
.attr("width", x.rangeBand() / n)
.transition()
.attr("y", function (d)
{
return y(d.y);
})
.attr("height", function (d)
{
return self.chart.dimension.height - self.chart.margin.top - self.chart.margin.bottom - y(d.y);
});
};
jsOMS.Chart.ColumnChart.prototype.transitionStacked = function (x, y, rect, yMin, yMax)
{
y.domain([yMin, yMax]);
rect.transition()
.duration(500)
.delay(function (d, i)
{
return i * 10;
})
.attr("y", function (d)
{
return y(d.y0 + d.y);
})
.attr("height", function (d)
{
return y(d.y0) - y(d.y0 + d.y);
})
.transition()
.attr("x", function (d)
{
return x(d.x);
})
.attr("width", x.rangeBand());
};
}(window.jsOMS = window.jsOMS || {}));
var chart;
var n = 3, // number of layers
m = 30, // number of samples per layer
stack = d3.layout.stack(),
layers = stack(d3.range(n).map(function ()
{
return bumpLayer(m, .1);
}));
function bumpLayer(n, o)
{
function bump(a)
{
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < n; i++) {
var w = (i / n - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
var a = [], i;
for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
for (i = 0; i < 5; ++i) bump(a);
return a.map(function (d, i)
{
return {x: i, y: Math.max(0, d)};
});
}
for (let i = 0; i < layers.length; i++) {
layers[i] = {
id: i,
name: 'Dataset ' + i,
points: layers[i]
};
}
var mychart = new jsOMS.Chart.ColumnChart('chart');
mychart.getChart().setData(layers);
mychart.draw();

66
Chart/LineChart.js
View File

@ -8,7 +8,7 @@
this.chart.margin = {top: 5, right: 0, bottom: 0, left: 0};
this.chart.color = d3.scale.category10();
this.chart.axis = {
x1: {
x: {
visible: true,
label: {
visible: true,
@ -24,7 +24,7 @@
min: 0,
max: 0
},
y1: {
y: {
visible: true,
label: {
visible: true,
@ -51,7 +51,7 @@
}
};
this.chart.subtype = 'area';
this.chart.subtype = 'line';
};
jsOMS.Chart.LineChart.prototype.getChart = function ()
@ -85,13 +85,13 @@
// axis
xAxis1 = d3.svg.axis().scale(x).tickFormat(function (d)
{
return self.chart.axis.x1.tick.prefix + d;
}).orient("bottom").outerTickSize(this.chart.axis.x1.tick.size).innerTickSize(this.chart.axis.x1.tick.size).tickPadding(7);
return self.chart.axis.x.tick.prefix + d;
}).orient("bottom").outerTickSize(this.chart.axis.x.tick.size).innerTickSize(this.chart.axis.x.tick.size).tickPadding(7);
yAxis1 = d3.svg.axis().scale(y).tickFormat(function (d)
{
return self.chart.axis.y1.tick.prefix + d;
}).orient("left").outerTickSize(this.chart.axis.y1.tick.size).innerTickSize(this.chart.axis.y1.tick.size).tickPadding(7);
return self.chart.axis.y.tick.prefix + d;
}).orient("left").outerTickSize(this.chart.axis.y.tick.size).innerTickSize(this.chart.axis.y.tick.size).tickPadding(7);
xGrid = d3.svg.axis()
.scale(x)
@ -113,35 +113,35 @@
+ this.chart.margin.left, 0, 0)
.tickFormat("");
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]);
x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
y.domain([this.chart.axis.y.min - 1, this.chart.axis.y.max + 1]);
if (this.chart.subtype === 'area') {
line = d3.svg.area().interpolate(this.chart.dataSettings.interpolate).x(function (d)
{
return x(d.x1);
return x(d.x);
}).y0(this.chart.getDimension().height).y1(function (d)
{
return y(d.y1);
return y(d.y);
});
} else if (this.chart.subtype === 'stacked') {
line = d3.svg.area().interpolate(this.chart.dataSettings.interpolate).x(function (d)
{
return x(d.x1);
return x(d.x);
}).y0(function (d)
{
return y(d.y0);
}).y1(function (d)
{
return y(d.y1 + d.y0);
return y(d.y + d.y0);
});
} else if (this.chart.subtype === 'line') {
line = d3.svg.line().interpolate(this.chart.dataSettings.interpolate).x(function (d)
{
return x(d.x1);
return x(d.x);
}).y(function (d)
{
return y(d.y1);
return y(d.y);
});
}
@ -155,11 +155,11 @@
self.chart.dimension.width
- self.chart.margin.right
- self.chart.margin.left
- Math.round(x(self.chart.axis.y1.max) - x(1)),
- Math.round(x(self.chart.axis.y.max) - x(1)),
self.chart.dimension.width
- self.chart.margin.right
- self.chart.margin.left
- Math.round(x(self.chart.axis.y1.max) - x(1)) * d3.event.scale));
- Math.round(x(self.chart.axis.y.max) - x(1)) * d3.event.scale));
zoom.translate([tx, ty]);
svg.select('.x.axis').call(xAxis1);
@ -175,18 +175,18 @@
if (self.chart.subtype === 'stacked') {
return svg.selectAll('circle.dot').attr('cy', function (d)
{
return y(d.y1 + d.y0);
return y(d.y + d.y0);
}).attr('cx', function (d)
{
return x(d.x1);
return x(d.x);
}).attr('r', 4);
} else {
return svg.selectAll('circle.dot').attr('cy', function (d)
{
return y(d.y1);
return y(d.y);
}).attr('cx', function (d)
{
return x(d.x1);
return x(d.x);
}).attr('r', 4);
}
});
@ -273,7 +273,7 @@
- this.chart.margin.top
- this.chart.margin.bottom - this.chart.position.zoompanel.top
).call(zoom);
}
};
}(window.jsOMS = window.jsOMS || {}));
var c, chart, data, dataGen, i, k, count;
@ -285,31 +285,31 @@ dataGen = (function ()
return function ()
{
var tempData, j, nums, y1Seed;
nums = Math.ceil(Math.random() * 50) + 4;
y1Seed = Math.round(Math.random() * 20);
tempData = {
nums = Math.ceil(Math.random() * 50) + 4;
y1Seed = Math.round(Math.random() * 20);
tempData = {
id: id,
name: "Dataset " + id,
points: (function ()
{
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) {
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;
if (data.length > 0) {
if (typeof data[count - 2].points !== 'undefined' && data[count - 2].points.length > counter && typeof data[count - 2].points[counter].y !== 'undefined') {
prev = data[count - 2].points[counter].y;
} else {
prev = 0;
}
} else {
} else {
prev = 0;
}
counter++;
results.push({
x1: j,
y1: y1Seed + Math.round(Math.random() * 5),
x: j,
y: y1Seed + Math.round(Math.random() * 5),
y0: prev
});
}
@ -317,7 +317,7 @@ dataGen = (function ()
return results;
})()
};
id = id + 1;
id = id + 1;
return tempData;
};
})(1);