Split

Chart/Chart.js

@@ -1,67 +1,508 @@
-(function (jsOMS, undefined) {
-    jsOMS.Chart = function() {
-        this.title = null;
-        this.subtitle = null;
-        this.footer = null;
-        this.legend = null;
-        this.dataset = null;
-        this.dimension = {width: 100, height: 100, position: jsOMS.Chart.PositionEnum.RELATIVE};
-        this.margin = {top: 0, right: 0, bottom: 0, left: 0, position: jsOMS.Chart.PositionEnum.ABSOLUTE};
+(function (jsOMS, undefined)
+{
+    jsOMS.Chart = function (id)
+    {
+        this.chartId = id;
+        this.chartSelect = d3.select('#' + this.chartId);
+
+        this.title = {
+            visible: true,
+            text: "Title",
+            anchor: "middle",
+            position: "center"
+        };
+        this.subtitle = {
+            visible: true,
+            text: "This is a short subtitle",
+            anchor: "middle",
+            position: "center"
+        };
+        this.footer = {
+            visible: true,
+            text: "(c) Orange Management Solutions",
+            anchor: "end",
+            position: "right"
+        };
+        this.legend = {
+            visible: true
+        };
+        this.color = d3.scale.category10();
+        this.dataset = [];
+        this.dataSettings = {
+            style: {
+                strokewidth: 3
+            },
+            marker: {
+                visible: true
+            },
+            info: {
+                visible: true
+            },
+            extremum: {
+                visible: false
+            },
+            values: {
+                visible: false
+            },
+            dataset: true, /* show dataset below */
+            interpolate: "linear", /* splines interpolation? */
         };
 
-    jsOMS.Chart.prototype.setDimension = function(dimension) {
-        this.dimension = dimension;
+        this.axis = {};
+        this.grid = {};
+
+        this.purge();
     };
 
-    jsOMS.Chart.prototype.getDimension = function() {
+    jsOMS.Chart.prototype.calculateHorizontalPosition = function (position)
+    {
+        var x = 0;
+        if (position === 'center') {
+            x = (
+                    this.dimension.width
+                    - this.margin.right
+                    - this.margin.left
+                ) / 2;
+        } else if (position === 'left') {
+            x = 0;
+        } else if (position === 'right') {
+            x = this.dimension.width - this.margin.right - this.margin.left;
+        }
+
+        return x;
+    }
+
+    jsOMS.Chart.prototype.calculateVerticalPosition = function (position)
+    {
+        var y = 0;
+        if (position === 'center') {
+            y = -(this.dimension.height
+                    - this.margin.top
+                    - this.margin.bottom
+                ) / 2;
+        } else if (position === 'bottom') {
+            y = -(this.dimension.height
+                - this.margin.top
+                - this.margin.bottom
+            );
+        } else if (position === 'top') {
+            y = -this.margin.top;
+        }
+
+        return y;
+    }
+
+    jsOMS.Chart.prototype.setColor = function (color)
+    {
+        this.color = color;
+    }
+
+    jsOMS.Chart.prototype.getColor = function ()
+    {
+        return this.color;
+    }
+
+    jsOMS.Chart.prototype.setAxis = function (id, axis)
+    {
+        this.axis[id] = axis;
+
+        // Setting axis dimensions in case dataset existss
+        if (Object.keys(this.dataset).length > 0) {
+            this.axis[id].max = d3.max(this.dataset, function (m)
+            {
+                return d3.max(m.points, function (d)
+                {
+                    return d[id];
+                });
+            });
+        }
+    };
+
+    jsOMS.Chart.prototype.setMargin = function (top, right, bottom, left)
+    {
+        this.margin = {top: top, right: right, bottom: bottom, left: left};
+    };
+
+    jsOMS.Chart.prototype.setDimension = function (width, height)
+    {
+        this.dimension = {width: width, height: height};
+    };
+
+    jsOMS.Chart.prototype.getDimension = function ()
+    {
         return this.dimension;
     };
 
-    jsOMS.Chart.prototype.setDimensionRelative = function(relative) {
+    jsOMS.Chart.prototype.setDimensionRelative = function (relative)
+    {
         this.relative = relative;
     };
 
-    jsOMS.Chart.prototype.setTitle = function(title) {
+    jsOMS.Chart.prototype.setTitle = function (title)
+    {
         this.title = title;
     };
 
-    jsOMS.Chart.prototype.getTitle = function() {
+    jsOMS.Chart.prototype.getTitle = function ()
+    {
         return this.title;
     };
 
-    jsOMS.Chart.prototype.setSubtitle = function(subtitle) {
+    jsOMS.Chart.prototype.setSubtitle = function (subtitle)
+    {
         this.subtitle = subtitle;
     };
 
-    jsOMS.Chart.prototype.getSubtitle = function() {
+    jsOMS.Chart.prototype.getSubtitle = function ()
+    {
         return this.subtitle;
     };
 
-    jsOMS.Chart.prototype.setFooter = function(footer) {
+    jsOMS.Chart.prototype.setFooter = function (footer)
+    {
         this.footer = footer;
     };
 
-    jsOMS.Chart.prototype.getFooter = function() {
+    jsOMS.Chart.prototype.getFooter = function ()
+    {
         return this.footer;
     };
 
-    jsOMS.Chart.prototype.setLegend = function(legend) {
+    jsOMS.Chart.prototype.setLegend = function (legend)
+    {
         this.legend = legend;
     };
 
-    jsOMS.Chart.prototype.getLegend = function() {
-        if(!this.legend) {
+    jsOMS.Chart.prototype.getLegend = function ()
+    {
+        if (!this.legend) {
             this.legend = new jsOMS.ChartLegend();
         }
 
         return this.legend;
     };
 
-    jsOMS.Chart.prototype.setDataset = function(dataset) {
-        this.dataset = dataset;
+    jsOMS.Chart.prototype.addDataset = function (dataset)
+    {
+        this.dataset.push(dataset);
+
+        this.findAxisDomain();
     };
 
-    jsOMS.Chart.prototype.getDataset = function() {
+    jsOMS.Chart.prototype.setData = function (data)
+    {
+        this.dataset = data;
+
+        this.findAxisDomain();
+    }
+
+    jsOMS.Chart.prototype.findAxisDomain = function ()
+    {
+        for (var id in this.axis) {
+            this.axis[id].max = d3.max(this.dataset, function (m)
+            {
+                return d3.max(m.points, function (d)
+                {
+                    return d[id];
+                });
+            });
+
+            this.axis[id].min = d3.min(this.dataset, function (d)
+            {
+                return d3.min(d.points, function (t)
+                {
+                    return t[id];
+                });
+            })
+        }
+    }
+
+    jsOMS.Chart.prototype.getData = function ()
+    {
         return this.dataset;
+    }
+
+    jsOMS.Chart.prototype.drawLegend = function (svg, dataPointEnter, dataPoint)
+    {
+        var self = this;
+
+        if (this.legend !== undefined && this.legend.visible) {
+            dataPointEnter.append("text").attr('class', 'dataPoint-name');
+            dataPoint.select("text.dataPoint-name").attr("x",
+                this.dimension.width
+                - this.margin.right
+                - this.margin.left + 20
+            ).attr("y", function (d, i)
+            {
+                return i * 20 + 10 - 1;
+            }).attr("dy", ".35em").text(function (d)
+            {
+                return d.name;
+            });
+            dataPointEnter.append('circle').attr('class', 'dataPoint-dot');
+            dataPoint.select('circle.dataPoint-dot').attr('cx',
+                this.dimension.width
+                - this.margin.right
+                - this.margin.left + 10
+            ).attr('cy', function (d, i)
+            {
+                return i * 20 + 10;
+            }).attr('r', 4).style('stroke', function (d)
+            {
+                return self.color(d.name);
+            });
+            dataPoint.exit().remove();
+
+            // Adding margin for legend
+            if (this.margin.right < (tlength = this.chartSelect.select('.dataPoint-name').node().getComputedTextLength())) {
+                this.margin.right = tlength + 30;
+                this.shouldRedraw = true;
+            }
+        } else if (this.margin.right > 10) {
+            this.margin.right = 10;
+            this.shouldRedraw = true;
+        }
+    }
+
+    jsOMS.Chart.prototype.drawMarker = function (svg, x, y, dataPointEnter, dataPoint)
+    {
+        var 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)
+            {
+                return d.points;
+            }).enter().append('circle').attr('class', 'dot');
+            dataPoint.select('.dots').style('stroke', function (d)
+            {
+                return self.color(d.name);
+            }).selectAll('circle').transition().duration(500).attr('cy', function (d)
+            {
+                return y(d.y1);
+            }).attr('cx', function (d)
+            {
+                return x(d.x1);
+            }).attr('r', 4);
+        }
+
+        if (this.dataSettings.info.visible && this.dataSettings.marker.visible) {
+            var div = this.chartSelect.append("div").attr("class", "charttooltip").style("opacity", 0);
+
+            /* todo: allow also hover on charts without marker... not possible since hover only on marker and not on point? */
+            temp.on("mouseover", function (d)
+                {
+                    var dim = div.node().getBoundingClientRect();
+                    var pos = this.getBoundingClientRect();
+
+                    div.transition()
+                        .duration(200)
+                        .style("opacity", .9);
+                    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("top", (pos.top - dim.height - 5) + "px");
+                })
+                .on("mouseout", function (d)
+                {
+                    div.transition()
+                        .duration(500)
+                        .style("opacity", 0);
+                });
+        }
+    }
+
+    jsOMS.Chart.prototype.drawText = function (svg)
+    {
+        var temp, pos = 0, topmargin = 0;
+
+        /* No subtitle without title */
+        if (this.subtitle !== undefined && this.subtitle.visible && this.title !== undefined && this.title.visible) {
+            pos = this.calculateHorizontalPosition(this.subtitle.position);
+
+            temp = svg.append("text")
+                .attr("class", "subtitle")
+                .attr('y', this.position.title.top)
+                .attr('x', pos)
+                .style("text-anchor", this.subtitle.anchor)
+                .text(this.subtitle.text);
+
+            topmargin = 10;
+            /* only add margin if subtitle exists */
+
+            if (!this.defined.text.subtitle) {
+                this.position.subtitle.top = temp.node().getBoundingClientRect().height / 2;
+                this.margin.top += temp.node().getBoundingClientRect().height / 2 + topmargin;
+                this.defined.text.subtitle = true;
+                this.shouldRedraw = true;
+            }
+        }
+
+        if (this.title !== undefined && this.title.visible) {
+            pos = this.calculateHorizontalPosition(this.title.position);
+
+            temp = svg.append("text")
+                .attr("class", "title")
+                .attr('y', -this.position.subtitle.top - topmargin)
+                .attr('x', pos)
+                .style("text-anchor", this.title.anchor)
+                .text(this.title.text);
+
+            if (!this.defined.text.title) {
+                this.position.title.top = 0;
+                this.margin.top += (temp.node().getBoundingClientRect().height) / 2 + this.position.subtitle.top / 2;
+                this.defined.text.title = true;
+                this.shouldRedraw = true;
+            }
+        }
+
+        if (this.footer !== undefined && this.footer.visible) {
+            pos = this.calculateHorizontalPosition(this.footer.position);
+
+            temp = svg.append("text")
+                .attr("class", "footer")
+                .attr('y', this.dimension.height
+                    - this.margin.bottom + this.position.footer.top + 10)
+                .attr('x', pos)
+                .style("text-anchor", this.footer.anchor)
+                .text(this.footer.text);
+
+            if (!this.defined.text.footer) {
+                this.position.footer.top = temp.node().getBoundingClientRect().height;
+                this.margin.bottom += temp.node().getBoundingClientRect().height + 10;
+                this.defined.text.footer = true;
+                this.shouldRedraw = true;
+            }
+        }
+    }
+
+    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;
+        defs.append('clipPath').attr('id', 'clipper1').append('rect').attr('x', 0).attr('y', 0)
+            .attr('width',
+                this.dimension.width
+                - this.margin.right
+                - this.margin.left
+            )
+            .attr('height',
+                this.dimension.height
+                - this.margin.top
+                - this.margin.bottom
+            );
+
+        if (this.axis.x1 !== undefined && this.axis.x1.visible) {
+            temp = svg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + (
+                        this.dimension.height
+                        - this.margin.top
+                        - this.margin.bottom
+                    ) + ")")
+                .call(xAxis1);
+
+            if (this.axis.x1.label.visible) {
+                pos = this.calculateHorizontalPosition(this.axis.x1.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);
+            }
+
+            if (!this.defined.axis.x1) {
+                this.margin.bottom += 50;
+                this.defined.axis.x1 = true;
+                this.shouldRedraw = true;
+            }
+        }
+
+        if (this.axis.y1 !== undefined && this.axis.y1.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);
+
+                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);
+            }
+
+            if (!this.defined.axis.y1) {
+                this.margin.left += svg.select('.y.axis .tick').node().getBoundingClientRect().width + 25;
+                this.defined.axis.y1 = true;
+                this.shouldRedraw = true;
+            }
+        }
+
+        if (this.axis.x2 !== undefined) {
+
+        }
+
+        if (this.axis.y2 !== undefined) {
+
+        }
+    }
+
+    jsOMS.Chart.prototype.drawGrid = function (svg, xGrid, yGrid)
+    {
+        if (this.grid.x !== undefined && this.grid.x.visible) {
+            svg.append("g")
+                .attr("class", "x grid")
+                .attr("transform", "translate(0," + (this.dimension.height - this.margin.top - this.margin.bottom) + ")")
+                .call(xGrid);
+        }
+
+        if (this.grid.y !== undefined && this.grid.y.visible) {
+            svg.append("g")
+                .attr("class", "y grid")
+                .call(yGrid);
+        }
+    };
+
+    jsOMS.Chart.prototype.purge = function ()
+    {
+        this.margin = {top: 0, right: 0, bottom: 0, left: 0};
+        this.dimension = {width: 0, height: 0};
+        this.position = {
+            title: {
+                top: 0,
+                left: 0
+            },
+            subtitle: {
+                top: 0,
+                left: 0
+            },
+            footer: {
+                top: 0,
+                left: 0
+            },
+            zoompanel: {
+                top: 0,
+                left: 0
+            }
+        };
+
+        this.shouldRedraw = false;
+        this.defined = {
+            axis: {
+                x1: false,
+                y1: false
+            },
+            text: {
+                title: false,
+                subtitle: false,
+                footer: false,
+            },
+            legend: false
+        };
+
+        this.chartSelect.select("*").remove();
     };
 }(window.jsOMS = window.jsOMS || {}));

Chart/ChartLegend.js

@@ -1,5 +1,5 @@
 (function (jsOMS, undefined) {
-    jsOMS.ChartLegend = function () {
+    jsOMS.Chart.Legend = function () {
         this.position = {x: 0, y: 0};
         this.relative = true;
         this.horizontal = false;
@@ -7,39 +7,39 @@
         this.labels = []; // {title, color, marker}
     };
 
-    jsOMS.ChartLegend.prototype.addLabel = function(label) {
+    jsOMS.Chart.Legend.prototype.addLabel = function(label) {
         this.labels.push(label);
     };
 
-    jsOMS.ChartLegend.prototype.setVisibility = function(visibility) {
+    jsOMS.Chart.Legend.prototype.setVisibility = function(visibility) {
         this.visible = visibility;
     };
 
-    jsOMS.ChartLegend.prototype.getVisibility = function() {
+    jsOMS.Chart.Legend.prototype.getVisibility = function() {
         return this.visible;
     };
 
-    jsOMS.ChartLegend.prototype.setPosition = function(position) {
+    jsOMS.Chart.Legend.prototype.setPosition = function(position) {
         this.position = position;
     };
 
-    jsOMS.ChartLegend.prototype.getPosition = function() {
+    jsOMS.Chart.Legend.prototype.getPosition = function() {
         return this.position;
     };
 
-    jsOMS.ChartLegend.prototype.setRelative = function(relative) {
+    jsOMS.Chart.Legend.prototype.setRelative = function(relative) {
         this.relative = relative;
     };
 
-    jsOMS.ChartLegend.prototype.isRelative = function() {
+    jsOMS.Chart.Legend.prototype.isRelative = function() {
         return this.relative;
     };
 
-    jsOMS.ChartLegend.prototype.setHorizontal = function(horizontal) {
+    jsOMS.Chart.Legend.prototype.setHorizontal = function(horizontal) {
         this.horizontal = horizontal;
     };
 
-    jsOMS.ChartLegend.prototype.isHorizontal = function() {
+    jsOMS.Chart.Legend.prototype.isHorizontal = function() {
         return this.horizontal;
     };
 

Chart/LineChart.js

@@ -1,31 +1,281 @@
-(function (jsOMS, undefined) {
-    jsOMS.LineChart = function () {
-        this.chart = new jsOMS.Chart();
-        this.xIsDate = false;
-        this.yIsDate = false;
+(function (jsOMS, undefined)
+{
+    jsOMS.Chart.LineChart = 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 = {
+            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
+            }
         };
 
-    jsOMS.LineChart.prototype.setXDate = function(date) {
-        this.xIsDate = date;
+        this.chart.grid = {
+            x: {
+                visible: true
+            },
+            y: {
+                visible: true
+            }
+        };
     };
 
-    jsOMS.LineChart.prototype.setYDate = function(date) {
-        this.yIsDate = date;
-    };
-
-    jsOMS.LineChart.prototype.draw = function() {
-        var x, y;
-
-        if(this.xIsDate) {
-            x = d3.time.scale().range([0, this.chart.getDimension().width]);
-        } else {
-            x = d3.scale.linear().range([0, this.chart.getDimension().width]);
+    jsOMS.Chart.LineChart.prototype.getChart = function ()
+    {
+        return this.chart;
     }
 
-        if(this.yIsDate) {
-            y = d3.time.scale().range([this.chart.getDimension().height, 0]);
-        } else {
-            y = d3.scale.linear().range([this.chart.getDimension().height, 0]);
+    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();
+
+        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.LineChart.prototype.redraw = function ()
+    {
+        this.chart.shouldRedraw = false;
+        this.chart.chartSelect.select("*").remove();
+        this.draw();
+    }
+
+    jsOMS.Chart.LineChart.prototype.drawData = function (svg, line, 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 line(d.points);
+        }).style("stroke", function (d)
+        {
+            return self.chart.color(d.name);
+        });
+
+        return [dataPointEnter, dataPoint];
+    }
+
+    jsOMS.Chart.LineChart.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.LineChart('chart');
+mychart.getChart().setData(data);
+mychart.draw();

Chart/TextElement.js

@@ -0,0 +1,4 @@
+(function (jsOMS, undefined) {
+    jsOMS.Chart.TextElement = function() {
+    };
+}(window.jsOMS = window.jsOMS || {}));

README.md

@@ -0,0 +1 @@
+# Framework #

UI/FormManager.js

@@ -22,6 +22,7 @@
         this.ignore = [];
         this.success = [];
         this.injectSelector = [];
+        this.forms = [];
     };
 
     /**
@@ -95,13 +96,19 @@
      */
     jsOMS.FormManager.prototype.bind = function (id)
     {
+        this.forms = [];
+
         if (typeof id !== 'undefined' && this.ignore.indexOf(id) === -1) {
-            this.bindElement(document.getElementById(id));
+            var form = document.getElementById(id);
+
+            this.forms.push(form);
+            this.bindElement(form);
         } else {
             var forms = document.getElementsByTagName('form');
 
             for (var i = 0; i < forms.length; i++) {
                 if (this.ignore.indexOf(forms[i].id) === -1) {
+                    this.forms.push(forms[i])
                     this.bindElement(forms[i]);
                 }
             }
@@ -405,4 +412,14 @@
             }
         }
     };
+
+    jsOMS.FormManager.prototype.getElements = function ()
+    {
+        return this.forms;
+    }
+
+    jsOMS.FormManager.prototype.count = function ()
+    {
+        return this.forms.length;
+    }
 }(window.jsOMS = window.jsOMS || {}));