diff --git a/Chart/BarChart.js b/Chart/BarChart.js
deleted file mode 100644
index a02d9e3..0000000
--- a/Chart/BarChart.js
+++ /dev/null
@@ -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();
diff --git a/Chart/Chart.js b/Chart/Chart.js
index 9fa6101..bd630b8 100644
--- a/Chart/Chart.js
+++ b/Chart/Chart.js
@@ -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 + "
" + self.axis.y1.label.text + ': ' + 100);
+ div.html(self.axis.x.label.text + ': ' + 100 + "
" + 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 + "
" + 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 + "
" + 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,
diff --git a/Chart/ColumnChart.js b/Chart/ColumnChart.js
new file mode 100644
index 0000000..4f6e9b3
--- /dev/null
+++ b/Chart/ColumnChart.js
@@ -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();
diff --git a/Chart/LineChart.js b/Chart/LineChart.js
index 5384f11..48aee3d 100644
--- a/Chart/LineChart.js
+++ b/Chart/LineChart.js
@@ -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);