Creating grouped/stacked column chart

Chart/BarChart.js

@@ -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();

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 + "<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)
+                    div.html(self.axis.x.label.text + ': ' + d.x + "<br/>" + self.axis.y.label.text + ': ' + d.y)
-                    .style("left", (x(d.x1) + dim.width / 2) + "px")
+                    .style("left", (x(d.x) + dim.width / 2) + "px")
-                    .style("top", (y(d.y1) + dim.height) + "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) {
+            if (this.axis.x.label.visible) {
-                pos = this.calculateHorizontalPosition(this.axis.x1.label.position);
+                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)
+                    .style("text-anchor", this.axis.x.label.anchor)
-                    .text(this.axis.x1.label.text);
+                    .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) {
+            if (this.axis.y.label.visible) {
-                pos = this.calculateVerticalPosition(this.axis.y1.label.position);
+                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)
+                    .style("text-anchor", this.axis.y.label.anchor)
-                    .text(this.axis.y1.label.text);
+                    .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,
+                x: false,
-                y1: false
+                y: false
             },
             text: {
                 title: false,

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();

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;
+            return self.chart.axis.x.tick.prefix + d;
-        }).orient("bottom").outerTickSize(this.chart.axis.x1.tick.size).innerTickSize(this.chart.axis.x1.tick.size).tickPadding(7);
+        }).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;
+            return self.chart.axis.y.tick.prefix + d;
-        }).orient("left").outerTickSize(this.chart.axis.y1.tick.size).innerTickSize(this.chart.axis.y1.tick.size).tickPadding(7);
+        }).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]);
+        x.domain([this.chart.axis.x.min, this.chart.axis.x.max + 1]);
-        y.domain([this.chart.axis.y1.min - 1, this.chart.axis.y1.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;
+            nums     = Math.ceil(Math.random() * 50) + 4;
-            y1Seed = Math.round(Math.random() * 20);
+            y1Seed   = Math.round(Math.random() * 20);
-            tempData   = {
+            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 (data.length > 0) {
-                            if(typeof data[count-2].points !== 'undefined' && data[count-2].points.length > counter &&  typeof data[count-2].points[counter].y1 !== 'undefined') {
+                            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].y1;
+                                prev = data[count - 2].points[counter].y;
                             } else {
                                 prev = 0;
                             }
-                        }  else {
+                        } else {
                             prev = 0;
                         }
 
                         counter++;
 
                         results.push({
-                            x1: j,
+                            x: j,
-                            y1: y1Seed + Math.round(Math.random() * 5),
+                            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);