marufbd/d3.chart.analog.js

## readme.md

      
    Raw
  

              readme.md
            
          
    ###Shows How we can roll our own charting component with d3 for very specific needs.
Here some utility libraries are used like 'underscore' for data transform, query and 'moment' for datetime operations.
Here the requirement is to compare time series continuous analogue values along with some digital inputs which are coming from different channels with irregular time intervals. Data are assumed to be coming as streams and hence the json format contains DateTime and value property.
Data formats:

Analougue: multi series (i.e. Acceleration data with three series X,Y,Z. See 'accelData' in sample_data.js)
Digital: grouped by Channel field (see diData in sample_data.js)

Look at the data format and how they are bound with d3 for our specific purpose.

Demonstrates how we can use d3's brush for zoom control over the shared x-axis without wasting space for a separate small chart for just zooming which most of chart component provides.
Shows dynamic height adjustment as we add/remove new charts
Shows how we can move charts up/down with smooth transitions with d3. This is one specific requirement that most chart components don't provide.

Thinkin of features..

Realtime data update
Horizon graph as render option for analogue data
Resize based on window size
Matching series colors - line color with legend value (or put colored marker)
up/down button on each chart top-right corner to re-arrange the stack of charts for easy compare

Please comment in gist for suggestions/improvements et al.

  
## d3.chart.analog.js
(function () {
    d3.analog= function() {
            var height = 100, gap=10,
                xValue = function(d) { return d[0]; },
                xScale = null,
                color = d3.scale.category10();

            function chart(selection) {
                selection.each(function(d) {
                    var g = d3.select(this);
                    var chartConfig = this.__chart__;

                    if (chartConfig) {
                        var yDomain = chartConfig.yDomain;
                        var y = chartConfig.y;
                    } else {
                        var minY = _.min(d.data, function(v) {
                            return _.chain(d.yVal).map(function(c) { return v[c]; }).min().value();
                        });
                        var maxY = _.max(d.data, function(v) {
                            return _.chain(d.yVal).map(function(c) { return v[c]; }).max().value();
                        });
                        minY = _.chain(d.yVal).map(function(c) { return minY[c]; }).min().value();
                        maxY = _.chain(d.yVal).map(function(c) { return maxY[c]; }).max().value();
                        yDomain = [minY, maxY];

                        y = d3.scale.linear().domain(yDomain).range([height - gap, 0]);
                        var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
                        g.attr('id', d.id) // add y axis
                            .append('g')
                            .attr("class", "y axis")
                            .attr('transform', 'translate(-1, 0)') // avoid making the vertical line disappear by clip when zoomed with brush
                            .call(yAxis);
                    }

                    //add path for each y-Value dimension
                    _.each(d.yVal, function(c, i) {
                        //setup line function
                        var valueline = d3.svg.line()
                            //.interpolate('basis')
                            //.x(function (a) { return xScale(moment(a.DateTime).toDate()); })
                            .x(X)
                            .y(function (a) { return y(a[c]); });

                        if (chartConfig) {
                            g.select(".path." + c).transition().duration(1000) //update path
                                .attr("d", valueline(d.data));
                        } else {
                            g.append("path") //add path
                                .attr('class', 'path ' + c)
                                .attr("d", valueline(d.data))
                                .attr("clip-path", "url(#clip)")
                                .style('stroke', color(d.id + i));
                            //add legend
                            g.append('text').text(d.name)
                                .attr('class', 'legend')
                                .attr('x', 10).attr('y', 10);
                        }
                    });


                    //stash chart settings for update
                    this.__chart__ = { yDomain: yDomain, y: y };
                });
            }

            // The x-accessor for the path generator; xScale

            function X(d) {
                return xScale(xValue(d));
            }

            chart.timeScale = function(_) {
                if (!arguments.length) return xScale;
                xScale = _;
                return chart;
            };

            chart.x = function(_) {
                if (!arguments.length) return xValue;
                xValue = _;
                return chart;
            };

            chart.height = function(_) {
                if (!arguments.length) return height;
                height = _;
                return chart;
            };
            chart.gap = function (_) {
                if (!arguments.length) return gap;
                gap = _;
                return chart;
            };

            chart.color = function(_) {
                if (!arguments.length) return color;
                color = _;
                return chart;
            };


            return chart;
    };

})();

## d3.chart.digital.js
(function () {
    d3.digital= function() {
            var height = 100,
                xValue = function (d) { return d[0]; },
                yValue = function (d) { return d[1]; },
                xScale = null, //shared time scale
                yScale = d3.scale.linear().domain([0, 1]),
                color = d3.scale.category10(),
                line = d3.svg.line().interpolate('step-after').x(X).y(Y);

            function chart(selection) {
                selection.each(function (d) {
                    var g = d3.select(this);

                    var chartConfig = this.__chart__;

                    var diGroups = _.groupBy(d.data, 'Channel');
                    var gh = height;
                    //var graphHeight = (height / _graphs.length) - gap;
                    var noChannels = _.keys(diGroups).length;
                    var yheight = gh /noChannels  - 5;
                    yScale.range([yheight, 0]);
                    var txHeight = gh / noChannels;

                    //add/update graph for each channel
                    var i = 0;
                    _.each(diGroups, function (data, channel) {
                        if (chartConfig) {// update
                            g.select(".path." + 'di_' + channel) //update path
                                .transition().duration(600)
                                .attr("d", line(data))
                                .attr('transform', 'translate(0,' + (i * txHeight) + ')');
                            g.select(".inputLabel" + channel) //update text
                                .transition().duration(600)
                                .attr('transform', 'translate(0,' + (i++ * txHeight + (yheight / 2)) + ')');
                        } else { // add
                            g.append("path") //add path
                                .attr('class', 'path ' + 'di_' + channel)
                                .attr("d", line(data))
                                .attr("clip-path", "url(#clip)")
                                .style('stroke', color(d.id + channel))
                                .attr('transform', 'translate(0,' + (i * txHeight) + ')');
                            g.append("svg:text")
                                .text(channel)
                                .attr('class', 'inputLabel' + channel)
                                .attr('text-anchor', 'end')
                                .attr('transform', 'translate(0,' + (i++ * txHeight + (yheight / 2)) + ')');
                        }
                    });


                    this.__chart__ = { update: true };
                });
            }

            // The x-accessor for the path generator; xScale

            function X(d) {
                return xScale(xValue(d));
            }
            function Y(d) {
                return yScale(yValue(d));
            }

            chart.timeScale = function(_) {
                if (!arguments.length) return xScale;
                xScale = _;
                return chart;
            };

            chart.x = function(_) {
                if (!arguments.length) return xValue;
                xValue = _;
                return chart;
            };
            chart.y = function (_) { // provide a function which would return 0 or 1
                if (!arguments.length) return yValue;
                yValue = _;
                return chart;
            };

            chart.height = function(_) {
                if (!arguments.length) return height;
                height = _;
                return chart;
            };
            chart.color = function(_) {
                if (!arguments.length) return color;
                color = _;
                return chart;
            };


            return chart;
    };

})();

## d3.chart.horizon.js
(function () {
    d3.horizon = function () {
        var bands = 1, // between 1 and 5, typically
            mode = "offset", // or mirror
            interpolate = "linear", // or basis, monotone, step-before, etc.
            xScale=null,
            x = d3_horizonX,
            y = d3_horizonY,
            w = 960,
            h = 40,
            gap=10,
            duration = 0;

        var color = d3.scale.linear()
            .domain([-1, 0, 0, 1])
            .range(["#08519c", "#bdd7e7", "#bae4b3", "#006d2c"]);

        // For each small multiple…
        function horizon(g) {
            g.each(function (d, i) {
                var g = d3.select(this),
                    n = 2 * bands + 1,
                    xMin = Infinity,
                    xMax = -Infinity,
                    yMax = -Infinity,
                    x0, // old x-scale
                    y0, // old y-scale
                    id; // unique id for paths

                // Compute x- and y-values along with extents.
                var data = d.data.map(function (d, i) {
                    var xv = x.call(this, d, i),
                        yv = y.call(this, d, i);
                    if (xv < xMin) xMin = xv;
                    if (xv > xMax) xMax = xv;
                    if (-yv > yMax) yMax = -yv;
                    if (yv > yMax) yMax = yv;
                    return [xv, yv];
                });

                // Compute the new x- and y-scales, and transform.
                //var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]);
                var x1 = xScale,
                    y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]),
                    t1 = d3_horizonTransform(bands, h, mode);

                // Retrieve the old scales, if this is an update.
                if (this.__chart__) {
                    x0 = this.__chart__.x;
                    y0 = this.__chart__.y;
                    t0 = this.__chart__.t;
                    id = this.__chart__.id;
                } else {
                    x0 = x1.copy();
                    y0 = y1.copy();
                    t0 = t1;
                    id = ++d3_horizonId;
                }

                // We'll use a defs to store the area path and the clip path.
                var defs = g.selectAll("defs")
                    .data([null]);

                // The clip path is a simple rect.
                defs.enter().append("defs").append("clipPath")
                    .attr("id", "d3_horizon_clip" + id)
                  .append("rect")
                    .attr("width", w)
                    .attr("height", h);

                defs.select("rect").transition()
                    .duration(duration)
                    .attr("width", w)
                    .attr("height", h);

                // We'll use a container to clip all horizon layers at once.
                g.selectAll("g")
                    .data([null])
                  .enter().append("g")
                    .attr("clip-path", "url(#d3_horizon_clip" + id + ")");

                // Instantiate each copy of the path with different transforms.
                var path = g.select("g").selectAll("path")
                    .data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);

                var d0 = d3_horizonArea
                    .interpolate(interpolate)
                    .x(function (d) { return x0(d[0]); })
                    .y0(h * bands)
                    .y1(function (d) { return h * bands - y0(d[1]); })
                    (data);

                var d1 = d3_horizonArea
                    .x(function (d) { return x1(d[0]); })
                    .y1(function (d) { return h * bands - y1(d[1]); })
                    (data);

                path.enter().append("path")
                    .style("fill", color)
                    .attr("transform", t0)
                    .attr("d", d0);

                path.transition()
                    .duration(duration)
                    .style("fill", color)
                    .attr("transform", t1)
                    .attr("d", d1);

                path.exit().transition()
                    .duration(duration)
                    .attr("transform", t1)
                    .attr("d", d1)
                    .remove();

                //add legend
                g.append('text').text(d.name)
                    .attr('class', 'legend')
                    .attr('x', 10)
                    .attr('y', 10);

                // Stash the new scales.
                this.__chart__ = { x: x1, y: y1, t: t1, id: id };
            });
            d3.timer.flush();
        }

        horizon.duration = function (x) {
            if (!arguments.length) return duration;
            duration = +x;
            return horizon;
        };

        horizon.bands = function (x) {
            if (!arguments.length) return bands;
            bands = +x;
            color.domain([-bands, 0, 0, bands]);
            return horizon;
        };

        horizon.mode = function (x) {
            if (!arguments.length) return mode;
            mode = x + "";
            return horizon;
        };

        horizon.colors = function (x) {
            if (!arguments.length) return color.range();
            color.range(x);
            return horizon;
        };

        horizon.interpolate = function (x) {
            if (!arguments.length) return interpolate;
            interpolate = x + "";
            return horizon;
        };

        horizon.x = function (z) {
            if (!arguments.length) return x;
            x = z;
            return horizon;
        };

        horizon.y = function (z) {
            if (!arguments.length) return y;
            y = z;
            return horizon;
        };

        horizon.width = function (x) {
            if (!arguments.length) return w;
            w = +x;
            return horizon;
        };

        horizon.height = function (x) {
            if (!arguments.length) return h;
            h = +x;
            return horizon;
        };

        //additional methods from original plugin
        horizon.timeScale = function (_) {
            if (!arguments.length) return xScale;
            xScale = _;
            return horizon;
        };
        horizon.gap = function (_) {
            if (!arguments.length) return gap;
            gap = _;
            h = h - _;
            return horizon;
        };

        return horizon;
    };

    var d3_horizonArea = d3.svg.area(),
        d3_horizonId = 0;

    function d3_horizonX(d) {
        return d[0];
    }

    function d3_horizonY(d) {
        return d[1];
    }

    function d3_horizonTransform(bands, h, mode) {
        return mode == "offset"
            ? function (d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
            : function (d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
    }
})();

## d3.chart.js
/**
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

define(['moment', 'underscore', 'd3.chart.analog', 'd3.chart.digital', 'd3.chart.horizon'], function (moment) {

    var _container, _graphs = [];

    //chart d3 config
    var _svgContainer, _chartCanvas, _xScale, _xDomain = [Infinity, -Infinity];

    //static config
    var containerWidth = 800, containerHeight = 400;
    var margin = { top: 40, right: 50, bottom: 30, left: 60 },
    width = containerWidth - margin.left - margin.right,
    height = containerHeight - margin.top - margin.bottom;
    var logChartHeight = 100, diChartHeight = 20;
    var gap = 30;
    var color = d3.scale.category10();

    this.init = function (options) {
        _container = options.container;
        containerWidth = $(_container).width();
        width = containerWidth - margin.left - margin.right;

        _svgContainer = d3.select(_container)
            .append("svg")
            .attr("width", containerWidth)
            .attr("height", containerHeight);

        _svgContainer.append("defs").append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr("width", width)
            .attr("height", height);

        _chartCanvas = _svgContainer
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // set up the X Axis scale
        _xScale = d3.time.scale().range([0, width]);

        var hoverLine = _chartCanvas.append('svg:line')
            .attr('class', 'hover-line')
            .attr('x1', 20).attr('x2', 20)
            .attr('y1', 2)// prevent touching x-axis line
            .attr('y2', height + 20)
            .attr('transform', 'translate(0, -20)')
            .attr('stroke-width', 1)
            .attr('stroke', 'grey')
            .attr('opacity', 1e-6);

        _chartCanvas.append("g")
            .attr('id', 'xAxis')
            .attr('transform', 'translate(0, -20)') // putting x-Axis into the margin area
            .attr("class", "brush");
        _chartCanvas.select('#xAxis').append('g')// where x-axis will be rendered
            .attr("class", "x axis");


        var timeLegend = _chartCanvas.append('text')
            .attr('class', 'legend-time')
            .attr('x', width)
            .attr('y', -5) // push to the margin area below x-axis
            .attr('text-anchor', 'end')
            .text('time:');


        _svgContainer// mouse event not working on _chartCanvas
            .on('mouseover', function () {
                var mouse = d3.mouse(this);
                var mX = mouse[0] - margin.left, mY = mouse[1] - margin.top;
                if (mX > 0 && mY > 0 && mX < width)
                    hoverLine.style('opacity', 1);
                else
                    hoverLine.style("opacity", 1e-6);
            })
            .on('mouseout', function () {
                hoverLine.style("opacity", 1e-6);
            })
            .on('mousemove', function () {
                var mouse = d3.mouse(this);
                var mX = mouse[0] - margin.left, mY = mouse[1] - margin.top;
                hoverLine.attr('x1', mX).attr('x2', mX);
                if (mX > 0 && mY > 0 && mX < width) {
                    var dt = _xScale.invert(mX);
                    var nearestDateVal = minDistanceDate(_.map(_graphs, function (d) { return d.map[mX] ? d.map[mX].date : null; }), dt);
                    var graphIdswithDataAtNearestDate = _.chain(_graphs).filter(function(d) { return d.map[mX] && d.map[mX].date == nearestDateVal; }).pluck('id').value();
                    if (nearestDateVal!=null) {
                        var xMoment = moment(nearestDateVal);
                        //update legend values
                        d3.selectAll('.graph').data(_graphs, function (d) { return d.id; }).each(function (d) {
                            var g = d3.select(this);
                            var str = '';
                            //var v = _.findWhere(d.data, { DateTime: nearestDateVal });
                            if (graphIdswithDataAtNearestDate.indexOf(d.id) >= 0) {
                                var v = d.data[d.map[mX].idx];
                                _.each(d.yVal, function (yDim, i) {
                                    str += d.yVal.length == 1 ? v[yDim] : ((i > 0 ? ', ' : ' ') + yDim + ':' + v[yDim]);
                                });
                            }
                            g.select('.legend').text(d.id + ' : ' + str);
                        });
                        //move plot line to stick to nearest time where any value found , then update time and value legends
                        timeLegend.text(xMoment.format('DD MMM'));
                        var moveX = _xScale(xMoment);
                        hoverLine.attr('x1', moveX).attr('x2', moveX);
                    }
                }
            });

    };

    //select and generate a chart plugin to render
    function selectChart(d) {
        if (d.type == 'analog') {
            var chart = d3.analog().height(logChartHeight).gap(gap).color(color);
        }
        else if (d.type == 'digital') {
            chart = d3.digital().height(graphHeight(d)).color(color)
                .y(function (t) { return t.State ? 1 : 0; });// 0/1 generator as y function
        }
        if (d.type == 'horizon') {
            var mean = d.data.map(function (t) { return t.Value; }).reduce(function (p, v) { return p + v; }, 0) / d.data.length;
            chart = d3.horizon()
                .width(width)
                .height(logChartHeight)
                .gap(gap)
                .y(function (t) { return t.Value - mean; })
                .bands(3)
                .mode("offset");
        }

        if(chart) {
            //config common features
            chart.timeScale(_xScale).x(function (t) { return moment(t.DateTime).toDate(); });
        }

        return chart;
    }

    function graphHeight(d) {
        if (d.type == 'analog')
            return logChartHeight;
        else if (d.type == 'digital') {
            //calculate height
            var cnt = _.uniq(d.data, false, function (t) { return t.Channel; }).length;
            return diChartHeight * cnt;
        } else {
            return 100;
        }
    }

    function adjustChartHeight() {
        height = 0;
        _.each(_graphs, function (t) { height += graphHeight(t); });
        containerHeight = height + margin.top + margin.bottom;
        _svgContainer.attr('height', containerHeight);
        $('.loader').height(containerHeight);
        _svgContainer.select('#clip').select('rect').attr('height', height);
        _chartCanvas.select('.hover-line').attr('y2', height + 20);
    }

    //returns a date from dates array which is nearest from dt
    function minDistanceDate(dates, dt) {
        var result = null, distance = Infinity, dtVal=moment(dt).valueOf();
        _.each(dates, function(d) {
            var m = moment(d).valueOf();
            if (distance > Math.abs(m - dtVal)) {
                distance = Math.abs(m - dtVal);
                result = d;
            }
        });
        return result;
    }


    //long running, should be non-blocking as user zooms
    function zoom(callback) {
        //artificially spawns background task
        setTimeout(function() {
            _.each(_graphs, function (g) {
                g.map = getLookupMap(g, _xScale);
            });
            callback();
        }, 30);
    }

    //generate hashmap for fast lookup from plotline position
    function getLookupMap(graph, xScale) {

        //hashmap for fast lookup with mousemove (plotline)
        var map = [];
        var startIndex = _.sortedIndex(graph.data, xScale.domain()[0], function (v) { return moment(v).valueOf(); });
        var endIndex = _.sortedIndex(graph.data, xScale.domain()[1], function (v) { return moment(v).valueOf(); });
        var data = _.chain(graph.data).rest(startIndex).initial(endIndex - startIndex).value();

        var dates = _.map(data, function (d) { return moment(d.DateTime).valueOf(); });
        var cursorIndex = 0;// for skipping records on subsequent search

        _.each(d3.range(width), function (px) {
            var dt = xScale.invert(px);
            var dataIndex = cursorIndex+_.sortedIndex(_.rest(dates, cursorIndex), dt.valueOf());// assuming data is sorted
            if (dataIndex < data.length) {
                if (dataIndex > 0) {
                    var left = moment(data[dataIndex - 1].DateTime), right = moment(data[dataIndex].DateTime);
                    if (moment(dt).diff(left) < right.diff(dt)) // if left is nearer
                        dataIndex = dataIndex - 1;
                }
                map.push({ date: data[dataIndex].DateTime, idx:dataIndex });
                //map[px] = data[dataIndex].DateTime;
            }
            cursorIndex = dataIndex;
        });


        return map;
    }


    //public methods for clients of this module
    this.addGraph = function (graph) {
        //adjust x-axis domain
        var dates = _.map(graph.data, function (d) { return moment(d.DateTime).valueOf(); });
        var min = dates[0], max = dates[dates.length - 1], streched = false; // assuming data is sorted
        if (min < _xDomain[0]) {
            _xDomain[0] = min;
            streched = true;
        }
        if (max > _xDomain[1]) {
            _xDomain[1] = max;
            streched = true;
        }
        if (streched) {
            _xScale.domain(_xDomain);

            //hashmap for fast lookup with plotline
            //calculate all graphs hashmaps as x-scale changed for new graph data
            _.each(_graphs, function (g) {
                g.map = getLookupMap(g, _xScale);
            });
        }

        //setup graph data
        graph.order = _graphs.length;

        graph.map = getLookupMap(graph, _xScale);
        _graphs.push(graph);


        //zoom scale, this needs to be rendered here as brush event triggers render which cannot change the brush itself
        var zoomScale = d3.time.scale().range([0, width]).domain(_xScale.domain());
        var brush = d3.svg.brush()
            .x(zoomScale)
            .on('brushend', function () {
                _xScale.domain(brush.empty() ? _xDomain : brush.extent());

                //generate lookup maps for graphs
                $('.loader').show();
                zoom(function () { render(); $('.loader').hide(); });
            });
        d3.select('#xAxis')
            .call(brush)
            .selectAll('rect')
            .attr('y', -10)
            .attr('height', 20);

        adjustChartHeight();

        if(graph.render)
            render();
    };

    this.removeGraph = function (graphId) {
        _graphs = _.reject(_graphs, function (g) { return g.id === graphId; });
        _.chain(_graphs).sortBy(function (g) { return g.order; }).each(function (g, i) { g.order = i; });

        adjustChartHeight();

        render();
    };

    this.reorderGraph = function (graphId, updown) {
        var g = _.findWhere(_graphs, { id: graphId });
        if (updown == 'up') {
            var prv = _.findWhere(_graphs, { order: g.order - 1 });
            g.order = g.order > 0 ? (g.order - 1) : 0;
            if (prv)
                prv.order++;
        }
        else if (updown === 'down') {
            var next = _.findWhere(_graphs, { order: g.order + 1 });
            g.order++;
            if (next)
                next.order--;
        }

        render();
    };

    //rendering with d3
    this.render = function () {

        //data-bind
        var graphs = _chartCanvas.selectAll('.graph')
            .data(_graphs, function (d) { return d.id; });

        //x-axis
        var xAxis = d3.svg.axis().scale(_xScale).orient("top").ticks(5);
        d3.select('.x.axis').call(xAxis);

        //remove graph
        graphs.exit().remove();

        //update existing graphs
        graphs.each(function (d) {
            var g = d3.select(this);
            //position graph
            var tx = 0;
            _.chain(_graphs).filter(function (t) { return t.order < d.order; }).each(function (t) { tx += graphHeight(t); });
            g.transition().duration(700).attr('transform', function (d) { return 'translate(0, ' + tx + ')'; });

            g.call(selectChart(d));
        });

        //add new graphs
        var newGraphs = graphs
            .enter()
            //.append('g')
            .insert('g', '.hover-line') //make hover-line on top
            .attr('class', 'graph')
            .attr('transform', function (d) {
                var tx = 0;
                _.chain(_graphs).filter(function (t) { return t.order < d.order; }).each(function (t) { tx += graphHeight(t); });
                return 'translate(0, ' + tx + ')';
            });
        newGraphs.each(function (d) { d3.select(this).call(selectChart(d)); });
    };

    return this;
});

## index.html
<!DOCTYPE HTML>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
		<title>Log Chart</title>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	  <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
	  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>

	    <style>
		    body { font: 12px Arial;}

		    path {
		        stroke: steelblue;
		        stroke-width: 2;
		        fill: none;
		    }

		    .axis path,
		    .axis line {
		        fill: none;
		        stroke: grey;
		        stroke-width: 1;
		        shape-rendering: crispEdges;
		    }

		    .brush .extent {
		        stroke: #fff;
		        fill-opacity: .125;
		        shape-rendering: crispEdges;
		    }
			.loader {
	            position: absolute;
	            top: 0;
	            bottom: 0;
	            left: 0;
	            right: 0;
	            background: rgba(255,255,255,0.8);
	            text-align: center;
	            z-index: 99;
	            display: none;
	        }
            .loader p {
                margin-top: 180px;
            }
		</style>

		<script type="text/javascript">
			'use strict';

		    $(function () {

		        requirejs.config({
		            "baseUrl": "./",
		            "paths": {
		                "app": "./",
		                'moment': 'http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min',
		                'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min'
		            }
		        });


		        require(['d3.chart'], function (d3Chart) {
		            d3Chart.init({ container: '#container', xDim: 'DateTime' });
		          // d3Chart.addGraph({ id: 'Speed', type: 'horizon', name: 'Speed', dataId: 512, yVal: ['Value'], data: speedData });
		            d3Chart.addGraph({ id: 'Imps', type: 'analog', name: 'RPM', dataId: 513, yVal: ['Value'], data: imps1 });
		            d3Chart.addGraph({ id: 'Clicks', type: 'analog', name: 'RPM2', dataId: 513, yVal: ['Value'], data: imps2 });
				d3Chart.addGraph({ id: 'CTR', type: 'analog', name: 'CTR', dataId: 513, yVal: ['Value'], data: CTR });
		         //   d3Chart.addGraph({ id: 'DI', type: 'digital', name: 'Digital Input', dataId: 522, data: diData });

		     //       d3Chart.addGraph({ id: 'Accel', type: 'analog', name: 'Accel', dataId: 522, yVal: ['X', 'Y', 'Z'], data: accelData });
					d3Chart.render();

		            setTimeout(function () {
		                d3Chart.reorderGraph('Accel', 'up');

		                //window.setTimeout(function () {
		                //    d3Chart.removeGraph('RPM');
		                //}, 2000);

		            }, 3000);


		        });

		    });

		</script>
	</head>
	<body>
	    <script src="./sample_data.js"></script>

	    <div id="container" style="min-width: 300px;width:100%">
			<div class="loader"><p>Working...</p></div>
		</div>

	</body>
</html>

## sample_data.js
var speedData=[{"DateTime":"2013-10-05T11:42:50","Value":5},{"DateTime":"2013-10-05T11:42:57","Value":0},{"DateTime":"2013-10-05T11:42:59","Value":5},{"DateTime":"2013-10-05T11:43:03","Value":19},{"DateTime":"2013-10-05T11:43:13","Value":24},{"DateTime":"2013-10-05T11:43:23","Value":20},{"DateTime":"2013-10-05T11:43:32","Value":31},{"DateTime":"2013-10-05T11:43:41","Value":36},{"DateTime":"2013-10-05T11:43:46","Value":23},{"DateTime":"2013-10-05T11:43:51","Value":45},{"DateTime":"2013-10-05T11:44:01","Value":49},{"DateTime":"2013-10-05T11:44:11","Value":47},{"DateTime":"2013-10-05T11:44:19","Value":58},{"DateTime":"2013-10-05T11:44:27","Value":47},{"DateTime":"2013-10-05T11:44:35","Value":36},{"DateTime":"2013-10-05T11:44:40","Value":12},{"DateTime":"2013-10-05T11:44:45","Value":24},{"DateTime":"2013-10-05T11:44:50","Value":39},{"DateTime":"2013-10-05T11:45:00","Value":44},{"DateTime":"2013-10-05T11:45:07","Value":33},{"DateTime":"2013-10-05T11:45:14","Value":22},{"DateTime":"2013-10-05T11:45:18","Value":5},{"DateTime":"2013-10-05T11:45:23","Value":31},{"DateTime":"2013-10-05T11:45:30","Value":42},{"DateTime":"2013-10-05T11:45:39","Value":47},{"DateTime":"2013-10-05T11:45:47","Value":36},{"DateTime":"2013-10-05T11:45:52","Value":23},{"DateTime":"2013-10-05T11:45:57","Value":40},{"DateTime":"2013-10-05T11:46:07","Value":42},{"DateTime":"2013-10-05T11:46:14","Value":31},{"DateTime":"2013-10-05T11:46:19","Value":4},{"DateTime":"2013-10-05T11:46:24","Value":18},{"DateTime":"2013-10-05T11:46:29","Value":37},{"DateTime":"2013-10-05T11:46:36","Value":48},{"DateTime":"2013-10-05T11:46:45","Value":48},{"DateTime":"2013-10-05T11:46:50","Value":36},{"DateTime":"2013-10-05T11:47:00","Value":39},{"DateTime":"2013-10-05T11:47:06","Value":28},{"DateTime":"2013-10-05T11:47:10","Value":12},{"DateTime":"2013-10-05T11:47:15","Value":44},{"DateTime":"2013-10-05T11:47:25","Value":48},{"DateTime":"2013-10-05T11:47:35","Value":54},{"DateTime":"2013-10-05T11:47:44","Value":43},{"DateTime":"2013-10-05T11:47:48","Value":27},{"DateTime":"2013-10-05T11:47:53","Value":38},{"DateTime":"2013-10-05T11:48:03","Value":39},{"DateTime":"2013-10-05T11:48:08","Value":23},{"DateTime":"2013-10-05T11:48:14","Value":34},{"DateTime":"2013-10-05T11:48:18","Value":17},{"DateTime":"2013-10-05T11:48:24","Value":6},{"DateTime":"2013-10-05T11:48:28","Value":20},{"DateTime":"2013-10-05T11:48:34","Value":31},{"DateTime":"2013-10-05T11:48:43","Value":38},{"DateTime":"2013-10-05T11:48:49","Value":26},{"DateTime":"2013-10-05T11:48:58","Value":22},{"DateTime":"2013-10-05T11:49:05","Value":11},{"DateTime":"2013-10-05T11:49:10","Value":0},{"DateTime":"2013-10-05T11:49:24","Value":5},{"DateTime":"2013-10-05T11:49:29","Value":0},{"DateTime":"2013-10-05T11:49:42","Value":null}];
var rpmData=[{"DateTime":"2013-10-05T11:42:32","Value":174.0,"Lat":-33.743919,"Long":151.141174},{"DateTime":"2013-10-05T11:42:41","Value":636.0,"Lat":-33.743916,"Long":151.141178},{"DateTime":"2013-10-05T11:42:51","Value":1013.0,"Lat":-33.743933,"Long":151.141154},{"DateTime":"2013-10-05T11:43:01","Value":1749.0,"Lat":-33.744031,"Long":151.141093},{"DateTime":"2013-10-05T11:43:06","Value":610.0,"Lat":-33.744184,"Long":151.141274},{"DateTime":"2013-10-05T11:43:16","Value":1356.0,"Lat":-33.744396,"Long":151.141811},{"DateTime":"2013-10-05T11:43:26","Value":1483.0,"Lat":-33.744611,"Long":151.142488},{"DateTime":"2013-10-05T11:43:36","Value":1327.0,"Lat":-33.744893,"Long":151.143348},{"DateTime":"2013-10-05T11:43:46","Value":640.0,"Lat":-33.745244,"Long":151.144241},{"DateTime":"2013-10-05T11:43:51","Value":1649.0,"Lat":-33.744896,"Long":151.144423},{"DateTime":"2013-10-05T11:44:01","Value":1329.0,"Lat":-33.743618,"Long":151.144628},{"DateTime":"2013-10-05T11:44:11","Value":1681.0,"Lat":-33.742399,"Long":151.144846},{"DateTime":"2013-10-05T11:44:21","Value":1535.0,"Lat":-33.741084,"Long":151.145101},{"DateTime":"2013-10-05T11:44:31","Value":1647.0,"Lat":-33.739793,"Long":151.145353},{"DateTime":"2013-10-05T11:44:37","Value":642.0,"Lat":-33.739138,"Long":151.145479},{"DateTime":"2013-10-05T11:44:46","Value":1646.0,"Lat":-33.738914,"Long":151.145261},{"DateTime":"2013-10-05T11:44:56","Value":1400.0,"Lat":-33.738066,"Long":151.145154},{"DateTime":"2013-10-05T11:45:06","Value":1276.0,"Lat":-33.737008,"Long":151.145314},{"DateTime":"2013-10-05T11:45:16","Value":603.0,"Lat":-33.736426,"Long":151.144938},{"DateTime":"2013-10-05T11:45:21","Value":1688.0,"Lat":-33.736338,"Long":151.144844},{"DateTime":"2013-10-05T11:45:31","Value":1435.0,"Lat":-33.735574,"Long":151.144301},{"DateTime":"2013-10-05T11:45:41","Value":1532.0,"Lat":-33.734674,"Long":151.143438},{"DateTime":"2013-10-05T11:45:51","Value":1173.0,"Lat":-33.733971,"Long":151.142698},{"DateTime":"2013-10-05T11:46:01","Value":1648.0,"Lat":-33.734026,"Long":151.141734},{"DateTime":"2013-10-05T11:46:11","Value":1334.0,"Lat":-33.733879,"Long":151.140453},{"DateTime":"2013-10-05T11:46:21","Value":627.0,"Lat":-33.733779,"Long":151.139673},{"DateTime":"2013-10-05T11:46:26","Value":1969.0,"Lat":-33.733684,"Long":151.139596},{"DateTime":"2013-10-05T11:46:36","Value":1707.0,"Lat":-33.732742,"Long":151.139691},{"DateTime":"2013-10-05T11:46:46","Value":1245.0,"Lat":-33.731397,"Long":151.139833},{"DateTime":"2013-10-05T11:46:56","Value":1323.0,"Lat":-33.730496,"Long":151.139701},{"DateTime":"2013-10-05T11:47:06","Value":952.0,"Lat":-33.729519,"Long":151.139788},{"DateTime":"2013-10-05T11:47:13","Value":1991.0,"Lat":-33.729217,"Long":151.139721},{"DateTime":"2013-10-05T11:47:22","Value":1368.0,"Lat":-33.728996,"Long":151.138746},{"DateTime":"2013-10-05T11:47:32","Value":1428.0,"Lat":-33.728726,"Long":151.137346},{"DateTime":"2013-10-05T11:47:42","Value":1193.0,"Lat":-33.728557,"Long":151.135781},{"DateTime":"2013-10-05T11:47:52","Value":1538.0,"Lat":-33.728804,"Long":151.134704},{"DateTime":"2013-10-05T11:48:02","Value":1344.0,"Lat":-33.728791,"Long":151.133459},{"DateTime":"2013-10-05T11:48:12","Value":1116.0,"Lat":-33.728656,"Long":151.132536},{"DateTime":"2013-10-05T11:48:22","Value":830.0,"Lat":-33.728561,"Long":151.131842},{"DateTime":"2013-10-05T11:48:32","Value":1624.0,"Lat":-33.728372,"Long":151.131501},{"DateTime":"2013-10-05T11:48:42","Value":1346.0,"Lat":-33.728227,"Long":151.130492},{"DateTime":"2013-10-05T11:48:52","Value":1195.0,"Lat":-33.728102,"Long":151.129529},{"DateTime":"2013-10-05T11:49:02","Value":1550.0,"Lat":-33.727999,"Long":151.128912},{"DateTime":"2013-10-05T11:49:12","Value":623.0,"Lat":-33.727911,"Long":151.128802},{"DateTime":"2013-10-05T11:49:22","Value":625.0,"Lat":-33.727936,"Long":151.128774},{"DateTime":"2013-10-05T11:49:32","Value":633.0,"Lat":-33.727896,"Long":151.128766},{"DateTime":"2013-10-05T11:49:42","Value":0.0,"Lat":-33.727866,"Long":151.128747},{"DateTime":"2013-10-05T11:49:44","Value":null,"Lat":-33.727866,"Long":151.128747}];
var accelData=[{"DateTime":"2013-10-05T11:42:26","X":0.0888,"Y":0.1482,"Z":0.0359},{"DateTime":"2013-10-05T11:42:28","X":0.0926,"Y":0.1482,"Z":0.0399},{"DateTime":"2013-10-05T11:42:30","X":0.0926,"Y":0.1482,"Z":0.0359},{"DateTime":"2013-10-05T11:42:32","X":0.1003,"Y":0.1482,"Z":0.0319},{"DateTime":"2013-10-05T11:42:34","X":0.0965,"Y":0.1368,"Z":0.0279},{"DateTime":"2013-10-05T11:42:36","X":0.0888,"Y":0.152,"Z":0.0558},{"DateTime":"2013-10-05T11:42:38","X":0.0926,"Y":0.1558,"Z":0.0439},{"DateTime":"2013-10-05T11:42:40","X":0.0926,"Y":0.1406,"Z":0.02},{"DateTime":"2013-10-05T11:42:42","X":0.0965,"Y":0.1558,"Z":0.0439},{"DateTime":"2013-10-05T11:42:44","X":0.0926,"Y":0.1596,"Z":0.0399},{"DateTime":"2013-10-05T11:42:46","X":0.1081,"Y":0.1634,"Z":0.0439},{"DateTime":"2013-10-05T11:42:48","X":0.1235,"Y":0.1711,"Z":0.0279},{"DateTime":"2013-10-05T11:42:50","X":0.1698,"Y":0.1596,"Z":0.0518},{"DateTime":"2013-10-05T11:42:52","X":0.1351,"Y":0.0912,"Z":0.0279},{"DateTime":"2013-10-05T11:42:54","X":0.0386,"Y":-0.0038,"Z":0.0877},{"DateTime":"2013-10-05T11:42:56","X":0.0308,"Y":0.0494,"Z":0.0279},{"DateTime":"2013-10-05T11:42:58","X":0.1389,"Y":0.0532,"Z":0.0399},{"DateTime":"2013-10-05T11:43:00","X":0.22,"Y":-0.0912,"Z":-0.0239},{"DateTime":"2013-10-05T11:43:02","X":0.0849,"Y":-0.0456,"Z":0.0439},{"DateTime":"2013-10-05T11:43:04","X":-0.054,"Y":-0.0152,"Z":-0.1713},{"DateTime":"2013-10-05T11:43:06","X":-0.081,"Y":0.0684,"Z":0.0439},{"DateTime":"2013-10-05T11:43:08","X":0.0193,"Y":0.0646,"Z":0.0558},{"DateTime":"2013-10-05T11:43:10","X":0.0656,"Y":0.0722,"Z":0.0678},{"DateTime":"2013-10-05T11:43:12","X":0.0308,"Y":0.0836,"Z":0.02},{"DateTime":"2013-10-05T11:43:14","X":0.027,"Y":0.0266,"Z":0.02},{"DateTime":"2013-10-05T11:43:16","X":-0.0038,"Y":0.0532,"Z":0.008},{"DateTime":"2013-10-05T11:43:18","X":-0.1235,"Y":0.0494,"Z":0.271},{"DateTime":"2013-10-05T11:43:20","X":-0.1196,"Y":0.0874,"Z":0.024},{"DateTime":"2013-10-05T11:43:22","X":0.0193,"Y":0.0798,"Z":0.0797},{"DateTime":"2013-10-05T11:43:24","X":0.0617,"Y":0.0912,"Z":0.0518},{"DateTime":"2013-10-05T11:43:26","X":0.0308,"Y":0.057,"Z":0.0479},{"DateTime":"2013-10-05T11:43:28","X":-0.0038,"Y":0.0646,"Z":0.0319},{"DateTime":"2013-10-05T11:43:30","X":-0.0077,"Y":0.095,"Z":0.012},{"DateTime":"2013-10-05T11:43:32","X":0.0463,"Y":0.0646,"Z":0.008},{"DateTime":"2013-10-05T11:43:34","X":0.0579,"Y":0.1102,"Z":0.0558},{"DateTime":"2013-10-05T11:43:36","X":0.054,"Y":0.1558,"Z":0.0598},{"DateTime":"2013-10-05T11:43:38","X":0.0656,"Y":0.1444,"Z":0.0439},{"DateTime":"2013-10-05T11:43:40","X":0.0849,"Y":0.0912,"Z":0.024},{"DateTime":"2013-10-05T11:43:42","X":-0.0115,"Y":0.1178,"Z":0.0399},{"DateTime":"2013-10-05T11:43:44","X":-0.0733,"Y":-0.114,"Z":0.0638},{"DateTime":"2013-10-05T11:43:46","X":0.0077,"Y":-0.2167,"Z":0.0837},{"DateTime":"2013-10-05T11:43:48","X":0.0386,"Y":-0.095,"Z":0.0319},{"DateTime":"2013-10-05T11:43:50","X":0.0617,"Y":0.0114,"Z":-0.0039},{"DateTime":"2013-10-05T11:43:52","X":0.0579,"Y":0.0152,"Z":-0.0278},{"DateTime":"2013-10-05T11:43:54","X":0.0772,"Y":0.1368,"Z":-0.0438},{"DateTime":"2013-10-05T11:43:56","X":0.0694,"Y":0.0836,"Z":-0.0358},{"DateTime":"2013-10-05T11:43:58","X":0.1467,"Y":0.0798,"Z":0.0359},{"DateTime":"2013-10-05T11:44:00","X":0.1312,"Y":0.095,"Z":0.0319},{"DateTime":"2013-10-05T11:44:02","X":0.1196,"Y":0.1102,"Z":-0.0039},{"DateTime":"2013-10-05T11:44:04","X":0.193,"Y":0.0722,"Z":0.0837},{"DateTime":"2013-10-05T11:44:06","X":0.1235,"Y":0.0608,"Z":-0.0239},{"DateTime":"2013-10-05T11:44:08","X":0.081,"Y":0.0342,"Z":0.1116},{"DateTime":"2013-10-05T11:44:10","X":0.1003,"Y":0.1026,"Z":0.0598},{"DateTime":"2013-10-05T11:44:12","X":0.1003,"Y":0.0684,"Z":0.1116},{"DateTime":"2013-10-05T11:44:14","X":-0.027,"Y":0.0798,"Z":0.0359},{"DateTime":"2013-10-05T11:44:16","X":0.0115,"Y":0.0494,"Z":0.0479},{"DateTime":"2013-10-05T11:44:18","X":0.027,"Y":0.0152,"Z":0.0877},{"DateTime":"2013-10-05T11:44:20","X":0.0965,"Y":0.0608,"Z":-0.1274},{"DateTime":"2013-10-05T11:44:22","X":0.1081,"Y":0.038,"Z":0.0518},{"DateTime":"2013-10-05T11:44:24","X":0.1081,"Y":0.1444,"Z":0.1156},{"DateTime":"2013-10-05T11:44:26","X":0.1158,"Y":0.038,"Z":0.2152},{"DateTime":"2013-10-05T11:44:28","X":0.22,"Y":0.0646,"Z":0.0638},{"DateTime":"2013-10-05T11:44:30","X":0.1505,"Y":0.095,"Z":0.0638},{"DateTime":"2013-10-05T11:44:32","X":0.1583,"Y":-0.0114,"Z":0.1196},{"DateTime":"2013-10-05T11:44:34","X":0.0077,"Y":0.076,"Z":0.0558},{"DateTime":"2013-10-05T11:44:36","X":-0.1274,"Y":-0.0076,"Z":0.0479},{"DateTime":"2013-10-05T11:44:38","X":-0.1081,"Y":-0.0418,"Z":-0.0119},{"DateTime":"2013-10-05T11:44:40","X":0.0849,"Y":-0.0798,"Z":0.0399},{"DateTime":"2013-10-05T11:44:42","X":0.1274,"Y":-0.0228,"Z":-0.0039},{"DateTime":"2013-10-05T11:44:44","X":0.054,"Y":0.3193,"Z":0.1076},{"DateTime":"2013-10-05T11:44:46","X":0.0888,"Y":0.2813,"Z":0.0279},{"DateTime":"2013-10-05T11:44:48","X":0.0849,"Y":0.1825,"Z":-0.0079},{"DateTime":"2013-10-05T11:44:50","X":0.0154,"Y":0.2395,"Z":0.0598},{"DateTime":"2013-10-05T11:44:52","X":-0.0115,"Y":0.0266,"Z":0.0439},{"DateTime":"2013-10-05T11:44:54","X":-0.0038,"Y":0.0228,"Z":0.0359},{"DateTime":"2013-10-05T11:44:56","X":-0.0077,"Y":0.0342,"Z":0.004},{"DateTime":"2013-10-05T11:44:58","X":-0.0038,"Y":0.057,"Z":-0.0039},{"DateTime":"2013-10-05T11:45:00","X":0.0193,"Y":-0.0456,"Z":-0.0159},{"DateTime":"2013-10-05T11:45:02","X":0.0115,"Y":0.1482,"Z":-0.0796},{"DateTime":"2013-10-05T11:45:04","X":0.0386,"Y":0.0532,"Z":0.0439},{"DateTime":"2013-10-05T11:45:06","X":0.0347,"Y":-0.1216,"Z":-0.0079},{"DateTime":"2013-10-05T11:45:08","X":0.1003,"Y":-0.076,"Z":0.016},{"DateTime":"2013-10-05T11:45:10","X":0.0926,"Y":-0.0152,"Z":0.0319},{"DateTime":"2013-10-05T11:45:12","X":0.0656,"Y":0.0304,"Z":0.0439},{"DateTime":"2013-10-05T11:45:14","X":0.0,"Y":0.0798,"Z":0.0439},{"DateTime":"2013-10-05T11:45:16","X":-0.1351,"Y":0.0646,"Z":0.0638},{"DateTime":"2013-10-05T11:45:18","X":0.054,"Y":0.0418,"Z":0.02},{"DateTime":"2013-10-05T11:45:20","X":0.2818,"Y":0.0912,"Z":0.0718},{"DateTime":"2013-10-05T11:45:22","X":0.1389,"Y":0.0152,"Z":0.016},{"DateTime":"2013-10-05T11:45:24","X":0.0424,"Y":0.0228,"Z":0.0598},{"DateTime":"2013-10-05T11:45:26","X":-0.0038,"Y":0.1254,"Z":0.0718},{"DateTime":"2013-10-05T11:45:28","X":-0.0231,"Y":0.2319,"Z":0.0359},{"DateTime":"2013-10-05T11:45:30","X":-0.0077,"Y":0.0304,"Z":0.0598},{"DateTime":"2013-10-05T11:45:32","X":-0.0115,"Y":-0.0114,"Z":0.0917},{"DateTime":"2013-10-05T11:45:34","X":-0.027,"Y":0.0228,"Z":0.0558},{"DateTime":"2013-10-05T11:45:36","X":-0.0501,"Y":0.0532,"Z":0.0359},{"DateTime":"2013-10-05T11:45:38","X":-0.0386,"Y":0.114,"Z":-0.0239},{"DateTime":"2013-10-05T11:45:40","X":-0.0463,"Y":0.095,"Z":0.024},{"DateTime":"2013-10-05T11:45:42","X":-0.0231,"Y":-0.019,"Z":-0.0079},{"DateTime":"2013-10-05T11:45:44","X":-0.0115,"Y":0.0418,"Z":-0.0836},{"DateTime":"2013-10-05T11:45:46","X":0.0501,"Y":0.1216,"Z":0.012},{"DateTime":"2013-10-05T11:45:48","X":0.0077,"Y":0.0152,"Z":0.0479},{"DateTime":"2013-10-05T11:45:50","X":0.0193,"Y":-0.1596,"Z":0.0598},{"DateTime":"2013-10-05T11:45:52","X":0.2007,"Y":-0.0342,"Z":0.0757},{"DateTime":"2013-10-05T11:45:54","X":0.193,"Y":0.0798,"Z":-0.0079},{"DateTime":"2013-10-05T11:45:56","X":0.1698,"Y":0.1368,"Z":0.1196},{"DateTime":"2013-10-05T11:45:58","X":0.1467,"Y":0.1863,"Z":0.0479},{"DateTime":"2013-10-05T11:46:00","X":0.1505,"Y":0.0532,"Z":0.0279},{"DateTime":"2013-10-05T11:46:02","X":0.0424,"Y":0.114,"Z":0.004},{"DateTime":"2013-10-05T11:46:04","X":0.0115,"Y":0.0874,"Z":0.0718},{"DateTime":"2013-10-05T11:46:06","X":0.0308,"Y":0.0456,"Z":0.0837},{"DateTime":"2013-10-05T11:46:08","X":0.0038,"Y":0.0798,"Z":0.0279},{"DateTime":"2013-10-05T11:46:10","X":-0.0231,"Y":0.0684,"Z":0.0518},{"DateTime":"2013-10-05T11:46:12","X":-0.027,"Y":0.0608,"Z":0.0678},{"DateTime":"2013-10-05T11:46:14","X":-0.1891,"Y":0.0266,"Z":0.0319},{"DateTime":"2013-10-05T11:46:16","X":-0.1235,"Y":0.0836,"Z":0.0558},{"DateTime":"2013-10-05T11:46:18","X":-0.1196,"Y":0.0836,"Z":0.02},{"DateTime":"2013-10-05T11:46:20","X":0.0733,"Y":0.0684,"Z":0.0399},{"DateTime":"2013-10-05T11:46:22","X":0.2007,"Y":0.114,"Z":0.0359},{"DateTime":"2013-10-05T11:46:24","X":0.2393,"Y":0.1825,"Z":0.0359},{"DateTime":"2013-10-05T11:46:26","X":0.2432,"Y":0.114,"Z":0.0359},{"DateTime":"2013-10-05T11:46:28","X":0.1891,"Y":0.076,"Z":-0.0318},{"DateTime":"2013-10-05T11:46:30","X":0.1312,"Y":0.0646,"Z":0.0319},{"DateTime":"2013-10-05T11:46:32","X":0.1389,"Y":0.0152,"Z":0.0757},{"DateTime":"2013-10-05T11:46:34","X":0.2123,"Y":0.1026,"Z":0.0399},{"DateTime":"2013-10-05T11:46:36","X":0.2625,"Y":0.0646,"Z":0.008},{"DateTime":"2013-10-05T11:46:38","X":0.2393,"Y":0.0456,"Z":0.0837},{"DateTime":"2013-10-05T11:46:40","X":-0.0038,"Y":0.0988,"Z":0.0439},{"DateTime":"2013-10-05T11:46:42","X":0.0656,"Y":0.0684,"Z":-0.0079},{"DateTime":"2013-10-05T11:46:44","X":0.0501,"Y":0.0798,"Z":0.008},{"DateTime":"2013-10-05T11:46:46","X":0.0617,"Y":0.133,"Z":0.0359},{"DateTime":"2013-10-05T11:46:48","X":0.1042,"Y":0.0304,"Z":0.0359},{"DateTime":"2013-10-05T11:46:50","X":0.1428,"Y":-0.1254,"Z":0.0279},{"DateTime":"2013-10-05T11:46:52","X":0.1042,"Y":-0.0798,"Z":-0.0039},{"DateTime":"2013-10-05T11:46:54","X":0.0733,"Y":0.1825,"Z":0.0837},{"DateTime":"2013-10-05T11:46:56","X":0.0772,"Y":0.3346,"Z":0.016},{"DateTime":"2013-10-05T11:46:58","X":0.1119,"Y":0.076,"Z":0.0638},{"DateTime":"2013-10-05T11:47:00","X":0.1042,"Y":-0.019,"Z":0.0757},{"DateTime":"2013-10-05T11:47:02","X":0.054,"Y":0.0342,"Z":0.0479},{"DateTime":"2013-10-05T11:47:04","X":-0.0849,"Y":0.0228,"Z":0.0558},{"DateTime":"2013-10-05T11:47:06","X":-0.1853,"Y":-0.0266,"Z":0.1514},{"DateTime":"2013-10-05T11:47:08","X":-0.2702,"Y":-0.0836,"Z":0.0518},{"DateTime":"2013-10-05T11:47:10","X":0.1042,"Y":-0.133,"Z":0.0399},{"DateTime":"2013-10-05T11:47:12","X":0.2857,"Y":-0.0494,"Z":0.0359},{"DateTime":"2013-10-05T11:47:14","X":0.2586,"Y":0.1102,"Z":0.016},{"DateTime":"2013-10-05T11:47:16","X":-0.0347,"Y":0.0,"Z":-0.0159},{"DateTime":"2013-10-05T11:47:18","X":0.0077,"Y":0.152,"Z":0.1395},{"DateTime":"2013-10-05T11:47:20","X":0.0193,"Y":0.2053,"Z":-0.0557},{"DateTime":"2013-10-05T11:47:22","X":0.1312,"Y":-0.2053,"Z":-0.0756},{"DateTime":"2013-10-05T11:47:24","X":0.2123,"Y":0.0228,"Z":0.0837},{"DateTime":"2013-10-05T11:47:26","X":0.1081,"Y":0.0722,"Z":0.0479},{"DateTime":"2013-10-05T11:47:28","X":0.0965,"Y":0.1368,"Z":0.0359},{"DateTime":"2013-10-05T11:47:30","X":0.1003,"Y":0.114,"Z":0.1036},{"DateTime":"2013-10-05T11:47:32","X":0.0965,"Y":0.095,"Z":0.0399},{"DateTime":"2013-10-05T11:47:34","X":0.0965,"Y":0.0684,"Z":0.0558},{"DateTime":"2013-10-05T11:47:36","X":0.0347,"Y":0.1102,"Z":0.016},{"DateTime":"2013-10-05T11:47:38","X":0.0463,"Y":0.038,"Z":0.0598},{"DateTime":"2013-10-05T11:47:40","X":0.027,"Y":-0.1787,"Z":0.0797},{"DateTime":"2013-10-05T11:47:42","X":0.0,"Y":0.0038,"Z":0.0399},{"DateTime":"2013-10-05T11:47:44","X":0.0115,"Y":0.095,"Z":0.0797},{"DateTime":"2013-10-05T11:47:46","X":-0.2007,"Y":0.0874,"Z":0.0399},{"DateTime":"2013-10-05T11:47:48","X":0.0193,"Y":0.1292,"Z":-0.1115},{"DateTime":"2013-10-05T11:47:50","X":0.1274,"Y":0.0798,"Z":0.0319},{"DateTime":"2013-10-05T11:47:52","X":0.1196,"Y":0.0722,"Z":0.0479},{"DateTime":"2013-10-05T11:47:54","X":0.0617,"Y":0.2053,"Z":0.0279},{"DateTime":"2013-10-05T11:47:56","X":0.0347,"Y":0.2395,"Z":0.0957},{"DateTime":"2013-10-05T11:47:58","X":-0.0115,"Y":0.1026,"Z":0.0718},{"DateTime":"2013-10-05T11:48:00","X":-0.1698,"Y":0.1178,"Z":0.0439},{"DateTime":"2013-10-05T11:48:02","X":-0.081,"Y":0.019,"Z":-0.0159},{"DateTime":"2013-10-05T11:48:04","X":-0.0965,"Y":0.1216,"Z":0.0439},{"DateTime":"2013-10-05T11:48:06","X":-0.1737,"Y":0.0798,"Z":0.0558},{"DateTime":"2013-10-05T11:48:08","X":-0.1042,"Y":0.0304,"Z":0.0359},{"DateTime":"2013-10-05T11:48:10","X":0.0193,"Y":0.1064,"Z":0.0718},{"DateTime":"2013-10-05T11:48:12","X":0.0424,"Y":0.0722,"Z":-0.0079},{"DateTime":"2013-10-05T11:48:14","X":0.0,"Y":0.0836,"Z":0.0638},{"DateTime":"2013-10-05T11:48:16","X":-0.1274,"Y":0.0798,"Z":0.0279},{"DateTime":"2013-10-05T11:48:18","X":-0.3166,"Y":0.0798,"Z":0.0279},{"DateTime":"2013-10-05T11:48:20","X":-0.1081,"Y":0.0874,"Z":0.0359},{"DateTime":"2013-10-05T11:48:22","X":0.081,"Y":0.0988,"Z":0.0359},{"DateTime":"2013-10-05T11:48:24","X":-0.1467,"Y":0.0798,"Z":0.0359},{"DateTime":"2013-10-05T11:48:26","X":0.1621,"Y":0.1596,"Z":0.0837},{"DateTime":"2013-10-05T11:48:28","X":0.0347,"Y":0.0304,"Z":0.0837},{"DateTime":"2013-10-05T11:48:30","X":0.0154,"Y":-0.0988,"Z":0.0279},{"DateTime":"2013-10-05T11:48:32","X":0.1389,"Y":0.0418,"Z":-0.0039},{"DateTime":"2013-10-05T11:48:34","X":0.1042,"Y":0.0266,"Z":0.024},{"DateTime":"2013-10-05T11:48:36","X":0.1042,"Y":0.0684,"Z":0.0877},{"DateTime":"2013-10-05T11:48:38","X":0.0733,"Y":0.0456,"Z":0.0359},{"DateTime":"2013-10-05T11:48:40","X":0.0926,"Y":0.0456,"Z":0.0877},{"DateTime":"2013-10-05T11:48:42","X":0.054,"Y":0.0,"Z":0.0359},{"DateTime":"2013-10-05T11:48:44","X":0.1081,"Y":-0.057,"Z":0.0319},{"DateTime":"2013-10-05T11:48:46","X":-0.0347,"Y":0.0266,"Z":0.0399},{"DateTime":"2013-10-05T11:48:48","X":-0.0077,"Y":0.0874,"Z":-0.0159},{"DateTime":"2013-10-05T11:48:50","X":0.0038,"Y":0.0494,"Z":-0.0239},{"DateTime":"2013-10-05T11:48:52","X":0.1003,"Y":0.1064,"Z":0.016},{"DateTime":"2013-10-05T11:48:54","X":0.1312,"Y":0.0152,"Z":0.1315},{"DateTime":"2013-10-05T11:48:56","X":0.0926,"Y":0.0266,"Z":0.0479},{"DateTime":"2013-10-05T11:48:58","X":-0.0038,"Y":0.0874,"Z":0.008},{"DateTime":"2013-10-05T11:49:00","X":-0.1081,"Y":0.076,"Z":0.0279},{"DateTime":"2013-10-05T11:49:02","X":0.1814,"Y":0.2737,"Z":0.024},{"DateTime":"2013-10-05T11:49:04","X":-0.0424,"Y":0.3916,"Z":0.012},{"DateTime":"2013-10-05T11:49:06","X":-0.0231,"Y":0.0418,"Z":0.0279},{"DateTime":"2013-10-05T11:49:08","X":-0.0386,"Y":0.0532,"Z":0.024},{"DateTime":"2013-10-05T11:49:10","X":-0.1196,"Y":0.0646,"Z":0.0279},{"DateTime":"2013-10-05T11:49:12","X":-0.0463,"Y":0.0608,"Z":0.0479},{"DateTime":"2013-10-05T11:49:14","X":-0.0501,"Y":0.0646,"Z":0.0518},{"DateTime":"2013-10-05T11:49:16","X":-0.0501,"Y":0.0684,"Z":0.0558},{"DateTime":"2013-10-05T11:49:18","X":-0.0463,"Y":0.0874,"Z":0.0479},{"DateTime":"2013-10-05T11:49:20","X":-0.0501,"Y":0.0532,"Z":0.0479},{"DateTime":"2013-10-05T11:49:22","X":-0.0501,"Y":0.057,"Z":0.0439},{"DateTime":"2013-10-05T11:49:24","X":0.0347,"Y":0.0456,"Z":0.0399},{"DateTime":"2013-10-05T11:49:26","X":0.0424,"Y":0.0684,"Z":0.0319},{"DateTime":"2013-10-05T11:49:28","X":0.0,"Y":0.0266,"Z":0.0279},{"DateTime":"2013-10-05T11:49:30","X":0.0231,"Y":0.0304,"Z":0.0399},{"DateTime":"2013-10-05T11:49:32","X":0.0463,"Y":0.0494,"Z":0.0399},{"DateTime":"2013-10-05T11:49:34","X":0.0501,"Y":0.0418,"Z":0.0319},{"DateTime":"2013-10-05T11:49:36","X":0.0424,"Y":0.0342,"Z":0.0399},{"DateTime":"2013-10-05T11:49:38","X":0.0501,"Y":0.0342,"Z":0.0319},{"DateTime":"2013-10-05T11:49:40","X":0.0424,"Y":0.0342,"Z":0.0279},{"DateTime":"2013-10-05T11:49:42","X":0.0463,"Y":0.0342,"Z":0.0319}];
var diData=[{"DateTime":"2013-10-05T11:42:50.894","State":true,Channel:1},{"DateTime":"2013-10-05T11:43:57.097","State":false,Channel:1},{"DateTime":"2013-10-05T11:44:59.703","State":true,Channel:1},{"DateTime":"2013-10-05T11:47:10.101","State":false,Channel:1},{"DateTime":"2013-10-05T11:48:24.699","State":true,Channel:1},{"DateTime":"2013-10-05T11:49:29.499","State":false,Channel:1},{"DateTime":"2013-10-05T11:45:50.894","State":true,Channel:2},{"DateTime":"2013-10-05T11:47:57.097","State":false,Channel:2},{"DateTime":"2013-10-05T11:48:59.703","State":true,Channel:2},{"DateTime":"2013-10-05T11:49:10.101","State":false,Channel:2},{"DateTime":"2013-10-05T11:49:24.699","State":true,Channel:2},{"DateTime":"2013-10-05T11:49:59.499","State":false,Channel:2},{"DateTime":"2013-10-05T11:47:57.097","State":false,Channel:3},{"DateTime":"2013-10-05T11:48:59.703","State":true,Channel:3},{"DateTime":"2013-10-05T11:48:59.703","State":true,Channel:4},{"DateTime":"2013-10-05T11:49:10.101","State":false,Channel:4},{"DateTime":"2013-10-05T11:48:59.703","State":true,Channel:5},{"DateTime":"2013-10-05T11:49:10.101","State":false,Channel:5},{"DateTime":"2013-10-05T11:48:24.699","State":true,Channel:6},{"DateTime":"2013-10-05T11:49:29.499","State":false,Channel:6},{"DateTime":"2013-10-05T11:47:57.097","State":false,Channel:7},{"DateTime":"2013-10-05T11:48:59.703","State":true,Channel:7},{"DateTime":"2013-10-05T11:49:10.101","State":false,Channel:7},{"DateTime":"2013-10-05T11:49:24.699","State":true,Channel:7},{"DateTime":"2013-10-05T11:49:59.499","State":false,Channel:7}];
var rpmData2=[{"DateTime":"2013-10-05T11:42:32","Value":174.0,"Lat":-33.743919,"Long":151.141174},{"DateTime":"2013-10-05T11:42:41","Value":636.0,"Lat":-33.743916,"Long":151.141178},{"DateTime":"2013-10-05T11:42:51","Value":1013.0,"Lat":-33.743933,"Long":151.141154},{"DateTime":"2013-10-05T11:43:01","Value":1749.0,"Lat":-33.744031,"Long":151.141093},{"DateTime":"2013-10-05T11:43:06","Value":610.0,"Lat":-33.744184,"Long":151.141274},{"DateTime":"2013-10-05T11:43:16","Value":1356.0,"Lat":-33.744396,"Long":151.141811},{"DateTime":"2013-10-05T11:43:26","Value":1483.0,"Lat":-33.744611,"Long":151.142488},{"DateTime":"2013-10-05T11:43:36","Value":1327.0,"Lat":-33.744893,"Long":151.143348},{"DateTime":"2013-10-05T11:43:46","Value":640.0,"Lat":-33.745244,"Long":151.144241},{"DateTime":"2013-10-05T11:43:51","Value":1649.0,"Lat":-33.744896,"Long":151.144423},{"DateTime":"2013-10-05T11:44:01","Value":1329.0,"Lat":-33.743618,"Long":151.144628},{"DateTime":"2013-10-05T11:44:11","Value":1681.0,"Lat":-33.742399,"Long":151.144846},{"DateTime":"2013-10-05T11:44:21","Value":1535.0,"Lat":-33.741084,"Long":151.145101},{"DateTime":"2013-10-05T11:44:31","Value":1647.0,"Lat":-33.739793,"Long":151.145353},{"DateTime":"2013-10-05T11:44:37","Value":642.0,"Lat":-33.739138,"Long":151.145479},{"DateTime":"2013-10-05T11:44:46","Value":1646.0,"Lat":-33.738914,"Long":151.145261},{"DateTime":"2013-10-05T11:44:56","Value":1400.0,"Lat":-33.738066,"Long":151.145154},{"DateTime":"2013-10-05T11:45:06","Value":1276.0,"Lat":-33.737008,"Long":151.145314},{"DateTime":"2013-10-05T11:45:16","Value":603.0,"Lat":-33.736426,"Long":151.144938},{"DateTime":"2013-10-05T11:45:21","Value":1688.0,"Lat":-33.736338,"Long":151.144844},{"DateTime":"2013-10-05T11:45:31","Value":1435.0,"Lat":-33.735574,"Long":151.144301},{"DateTime":"2013-10-05T11:45:41","Value":1532.0,"Lat":-33.734674,"Long":151.143438},{"DateTime":"2013-10-05T11:45:51","Value":1173.0,"Lat":-33.733971,"Long":151.142698},{"DateTime":"2013-10-05T11:46:01","Value":1648.0,"Lat":-33.734026,"Long":151.141734},{"DateTime":"2013-10-05T11:46:11","Value":1334.0,"Lat":-33.733879,"Long":151.140453},{"DateTime":"2013-10-05T11:46:21","Value":627.0,"Lat":-33.733779,"Long":151.139673},{"DateTime":"2013-10-05T11:46:26","Value":1969.0,"Lat":-33.733684,"Long":151.139596},{"DateTime":"2013-10-05T11:46:36","Value":1707.0,"Lat":-33.732742,"Long":151.139691},{"DateTime":"2013-10-05T11:46:46","Value":1245.0,"Lat":-33.731397,"Long":151.139833},{"DateTime":"2013-10-05T11:46:56","Value":1323.0,"Lat":-33.730496,"Long":151.139701},{"DateTime":"2013-10-05T11:47:06","Value":952.0,"Lat":-33.729519,"Long":151.139788},{"DateTime":"2013-10-05T11:47:13","Value":1991.0,"Lat":-33.729217,"Long":151.139721},{"DateTime":"2013-10-05T11:47:22","Value":1368.0,"Lat":-33.728996,"Long":151.138746},{"DateTime":"2013-10-05T11:47:32","Value":1428.0,"Lat":-33.728726,"Long":151.137346},{"DateTime":"2013-10-05T11:47:42","Value":1193.0,"Lat":-33.728557,"Long":151.135781},{"DateTime":"2013-10-05T11:47:52","Value":1538.0,"Lat":-33.728804,"Long":151.134704},{"DateTime":"2013-10-05T11:48:02","Value":1344.0,"Lat":-33.728791,"Long":151.133459},{"DateTime":"2013-10-05T11:48:12","Value":1116.0,"Lat":-33.728656,"Long":151.132536},{"DateTime":"2013-10-05T11:48:22","Value":830.0,"Lat":-33.728561,"Long":151.131842},{"DateTime":"2013-10-05T11:48:32","Value":1624.0,"Lat":-33.728372,"Long":151.131501},{"DateTime":"2013-10-05T11:48:42","Value":1346.0,"Lat":-33.728227,"Long":151.130492},{"DateTime":"2013-10-05T11:48:52","Value":1195.0,"Lat":-33.728102,"Long":151.129529},{"DateTime":"2013-10-05T11:49:02","Value":1550.0,"Lat":-33.727999,"Long":151.128912},{"DateTime":"2013-10-05T11:49:12","Value":623.0,"Lat":-33.727911,"Long":151.128802},{"DateTime":"2013-10-05T11:49:22","Value":625.0,"Lat":-33.727936,"Long":151.128774},{"DateTime":"2013-10-05T11:49:32","Value":633.0,"Lat":-33.727896,"Long":151.128766},{"DateTime":"2013-10-05T11:49:42","Value":0.0,"Lat":-33.727866,"Long":151.128747},{"DateTime":"2013-10-05T11:49:44","Value":null,"Lat":-33.727866,"Long":151.128747}];
var imps1 = [{"DateTime":"2013-01-01","Value":30980},
{"DateTime":"2013-01-02","Value":70863},
{"DateTime":"2013-01-03","Value":97436},
{"DateTime":"2013-01-04","Value":115213},
{"DateTime":"2013-01-05","Value":148866},
{"DateTime":"2013-01-06","Value":171439},
{"DateTime":"2013-01-07","Value":204882},
{"DateTime":"2013-01-08","Value":236596},
{"DateTime":"2013-01-09","Value":271906},
{"DateTime":"2013-01-10","Value":315765},
{"DateTime":"2013-01-11","Value":350624},
{"DateTime":"2013-01-12","Value":388210},
{"DateTime":"2013-01-13","Value":431927},
{"DateTime":"2013-01-14","Value":459666},
{"DateTime":"2013-01-15","Value":501739},
{"DateTime":"2013-01-16","Value":535185},
{"DateTime":"2013-01-17","Value":561015},
{"DateTime":"2013-01-18","Value":594570},
{"DateTime":"2013-01-19","Value":619622},
{"DateTime":"2013-01-20","Value":651657},
{"DateTime":"2013-01-21","Value":678780},
{"DateTime":"2013-01-22","Value":704631},
{"DateTime":"2013-01-23","Value":749684},
{"DateTime":"2013-01-24","Value":788028},
{"DateTime":"2013-01-25","Value":814410},
{"DateTime":"2013-01-26","Value":840612},
{"DateTime":"2013-01-27","Value":858887},
{"DateTime":"2013-01-28","Value":889212},
{"DateTime":"2013-01-29","Value":910631},
{"DateTime":"2013-01-30","Value":934544},
{"DateTime":"2013-01-31","Value":975083}];
var imps2 = [{"DateTime":"2013-01-01","Value":30980},
{"DateTime":"2013-01-02","Value":70863},
{"DateTime":"2013-01-03","Value":97436},
{"DateTime":"2013-01-04","Value":115213},
{"DateTime":"2013-01-05","Value":148866},
{"DateTime":"2013-01-06","Value":171439},
{"DateTime":"2013-01-07","Value":204882},
{"DateTime":"2013-01-08","Value":236596},
{"DateTime":"2013-01-09","Value":271906},
{"DateTime":"2013-01-10","Value":315765},
{"DateTime":"2013-01-11","Value":350624},
{"DateTime":"2013-01-12","Value":388210},
{"DateTime":"2013-01-13","Value":431927},
{"DateTime":"2013-01-14","Value":459666},
{"DateTime":"2013-01-15","Value":501739},
{"DateTime":"2013-01-16","Value":535185},
{"DateTime":"2013-01-17","Value":561015},
{"DateTime":"2013-01-18","Value":594570},
{"DateTime":"2013-01-19","Value":619622},
{"DateTime":"2013-01-20","Value":651657},
{"DateTime":"2013-01-21","Value":678780},
{"DateTime":"2013-01-22","Value":704631},
{"DateTime":"2013-01-23","Value":749684},
{"DateTime":"2013-01-24","Value":788028},
{"DateTime":"2013-01-25","Value":814410},
{"DateTime":"2013-01-26","Value":840612},
{"DateTime":"2013-01-27","Value":858887},
{"DateTime":"2013-01-28","Value":889212},
{"DateTime":"2013-01-29","Value":910631},
{"DateTime":"2013-01-30","Value":934544},
{"DateTime":"2013-01-31","Value":975083}];
var CTR = [{"DateTime":"2013-01-01","Value":0.01},
{"DateTime":"2013-01-02","Value":0.02},
{"DateTime":"2013-01-03","Value":0.01},
{"DateTime":"2013-01-04","Value":0.005},
{"DateTime":"2013-01-05","Value":0.015},
{"DateTime":"2013-01-06","Value":0.01},
{"DateTime":"2013-01-07","Value":0.02},
{"DateTime":"2013-01-08","Value":0.01},
{"DateTime":"2013-01-09","Value":0.005},
{"DateTime":"2013-01-10","Value":0.015},
{"DateTime":"2013-01-11","Value":0.01},
{"DateTime":"2013-01-12","Value":0.02},
{"DateTime":"2013-01-13","Value":0.01},
{"DateTime":"2013-01-14","Value":0.005},
{"DateTime":"2013-01-15","Value":0.015},
{"DateTime":"2013-01-16","Value":0.01},
{"DateTime":"2013-01-17","Value":0.02},
{"DateTime":"2013-01-18","Value":0.01},
{"DateTime":"2013-01-19","Value":0.005},
{"DateTime":"2013-01-20","Value":0.015},
{"DateTime":"2013-01-21","Value":0.01},
{"DateTime":"2013-01-22","Value":0.02},
{"DateTime":"2013-01-23","Value":0.01},
{"DateTime":"2013-01-24","Value":0.005},
{"DateTime":"2013-01-25","Value":0.015},
{"DateTime":"2013-01-26","Value":0.01},
{"DateTime":"2013-01-27","Value":0.02},
{"DateTime":"2013-01-28","Value":0.01},
{"DateTime":"2013-01-29","Value":0.005},
{"DateTime":"2013-01-30","Value":0.015},
{"DateTime":"2013-01-31","Value":0.02}];
	(function () {
	d3.analog= function() {
	var height = 100, gap=10,
	xValue = function(d) { return d[0]; },
	xScale = null,
	color = d3.scale.category10();

	function chart(selection) {
	selection.each(function(d) {
	var g = d3.select(this);
	var chartConfig = this.__chart__;

	if (chartConfig) {
	var yDomain = chartConfig.yDomain;
	var y = chartConfig.y;
	} else {
	var minY = _.min(d.data, function(v) {
	return _.chain(d.yVal).map(function(c) { return v[c]; }).min().value();
	});
	var maxY = _.max(d.data, function(v) {
	return _.chain(d.yVal).map(function(c) { return v[c]; }).max().value();
	});
	minY = _.chain(d.yVal).map(function(c) { return minY[c]; }).min().value();
	maxY = _.chain(d.yVal).map(function(c) { return maxY[c]; }).max().value();
	yDomain = [minY, maxY];

	y = d3.scale.linear().domain(yDomain).range([height - gap, 0]);
	var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
	g.attr('id', d.id) // add y axis
	.append('g')
	.attr("class", "y axis")
	.attr('transform', 'translate(-1, 0)') // avoid making the vertical line disappear by clip when zoomed with brush
	.call(yAxis);
	}

	//add path for each y-Value dimension
	_.each(d.yVal, function(c, i) {
	//setup line function
	var valueline = d3.svg.line()
	//.interpolate('basis')
	//.x(function (a) { return xScale(moment(a.DateTime).toDate()); })
	.x(X)
	.y(function (a) { return y(a[c]); });

	if (chartConfig) {
	g.select(".path." + c).transition().duration(1000) //update path
	.attr("d", valueline(d.data));
	} else {
	g.append("path") //add path
	.attr('class', 'path ' + c)
	.attr("d", valueline(d.data))
	.attr("clip-path", "url(#clip)")
	.style('stroke', color(d.id + i));
	//add legend
	g.append('text').text(d.name)
	.attr('class', 'legend')
	.attr('x', 10).attr('y', 10);
	}
	});


	//stash chart settings for update
	this.__chart__ = { yDomain: yDomain, y: y };
	});
	}

	// The x-accessor for the path generator; xScale

	function X(d) {
	return xScale(xValue(d));
	}

	chart.timeScale = function(_) {
	if (!arguments.length) return xScale;
	xScale = _;
	return chart;
	};

	chart.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};

	chart.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return chart;
	};
	chart.gap = function (_) {
	if (!arguments.length) return gap;
	gap = _;
	return chart;
	};

	chart.color = function(_) {
	if (!arguments.length) return color;
	color = _;
	return chart;
	};


	return chart;
	};

	})();
	(function () {
	d3.digital= function() {
	var height = 100,
	xValue = function (d) { return d[0]; },
	yValue = function (d) { return d[1]; },
	xScale = null, //shared time scale
	yScale = d3.scale.linear().domain([0, 1]),
	color = d3.scale.category10(),
	line = d3.svg.line().interpolate('step-after').x(X).y(Y);

	function chart(selection) {
	selection.each(function (d) {
	var g = d3.select(this);

	var chartConfig = this.__chart__;

	var diGroups = _.groupBy(d.data, 'Channel');
	var gh = height;
	//var graphHeight = (height / _graphs.length) - gap;
	var noChannels = _.keys(diGroups).length;
	var yheight = gh /noChannels - 5;
	yScale.range([yheight, 0]);
	var txHeight = gh / noChannels;

	//add/update graph for each channel
	var i = 0;
	_.each(diGroups, function (data, channel) {
	if (chartConfig) {// update
	g.select(".path." + 'di_' + channel) //update path
	.transition().duration(600)
	.attr("d", line(data))
	.attr('transform', 'translate(0,' + (i * txHeight) + ')');
	g.select(".inputLabel" + channel) //update text
	.transition().duration(600)
	.attr('transform', 'translate(0,' + (i++ * txHeight + (yheight / 2)) + ')');
	} else { // add
	g.append("path") //add path
	.attr('class', 'path ' + 'di_' + channel)
	.attr("d", line(data))
	.attr("clip-path", "url(#clip)")
	.style('stroke', color(d.id + channel))
	.attr('transform', 'translate(0,' + (i * txHeight) + ')');
	g.append("svg:text")
	.text(channel)
	.attr('class', 'inputLabel' + channel)
	.attr('text-anchor', 'end')
	.attr('transform', 'translate(0,' + (i++ * txHeight + (yheight / 2)) + ')');
	}
	});


	this.__chart__ = { update: true };
	});
	}

	// The x-accessor for the path generator; xScale

	function X(d) {
	return xScale(xValue(d));
	}
	function Y(d) {
	return yScale(yValue(d));
	}

	chart.timeScale = function(_) {
	if (!arguments.length) return xScale;
	xScale = _;
	return chart;
	};

	chart.x = function(_) {
	if (!arguments.length) return xValue;
	xValue = _;
	return chart;
	};
	chart.y = function (_) { // provide a function which would return 0 or 1
	if (!arguments.length) return yValue;
	yValue = _;
	return chart;
	};

	chart.height = function(_) {
	if (!arguments.length) return height;
	height = _;
	return chart;
	};
	chart.color = function(_) {
	if (!arguments.length) return color;
	color = _;
	return chart;
	};


	return chart;
	};

	})();
	(function () {
	d3.horizon = function () {
	var bands = 1, // between 1 and 5, typically
	mode = "offset", // or mirror
	interpolate = "linear", // or basis, monotone, step-before, etc.
	xScale=null,
	x = d3_horizonX,
	y = d3_horizonY,
	w = 960,
	h = 40,
	gap=10,
	duration = 0;

	var color = d3.scale.linear()
	.domain([-1, 0, 0, 1])
	.range(["#08519c", "#bdd7e7", "#bae4b3", "#006d2c"]);

	// For each small multiple…
	function horizon(g) {
	g.each(function (d, i) {
	var g = d3.select(this),
	n = 2 * bands + 1,
	xMin = Infinity,
	xMax = -Infinity,
	yMax = -Infinity,
	x0, // old x-scale
	y0, // old y-scale
	id; // unique id for paths

	// Compute x- and y-values along with extents.
	var data = d.data.map(function (d, i) {
	var xv = x.call(this, d, i),
	yv = y.call(this, d, i);
	if (xv < xMin) xMin = xv;
	if (xv > xMax) xMax = xv;
	if (-yv > yMax) yMax = -yv;
	if (yv > yMax) yMax = yv;
	return [xv, yv];
	});

	// Compute the new x- and y-scales, and transform.
	//var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]);
	var x1 = xScale,
	y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]),
	t1 = d3_horizonTransform(bands, h, mode);

	// Retrieve the old scales, if this is an update.
	if (this.__chart__) {
	x0 = this.__chart__.x;
	y0 = this.__chart__.y;
	t0 = this.__chart__.t;
	id = this.__chart__.id;
	} else {
	x0 = x1.copy();
	y0 = y1.copy();
	t0 = t1;
	id = ++d3_horizonId;
	}

	// We'll use a defs to store the area path and the clip path.
	var defs = g.selectAll("defs")
	.data([null]);

	// The clip path is a simple rect.
	defs.enter().append("defs").append("clipPath")
	.attr("id", "d3_horizon_clip" + id)
	.append("rect")
	.attr("width", w)
	.attr("height", h);

	defs.select("rect").transition()
	.duration(duration)
	.attr("width", w)
	.attr("height", h);

	// We'll use a container to clip all horizon layers at once.
	g.selectAll("g")
	.data([null])
	.enter().append("g")
	.attr("clip-path", "url(#d3_horizon_clip" + id + ")");

	// Instantiate each copy of the path with different transforms.
	var path = g.select("g").selectAll("path")
	.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);

	var d0 = d3_horizonArea
	.interpolate(interpolate)
	.x(function (d) { return x0(d[0]); })
	.y0(h * bands)
	.y1(function (d) { return h * bands - y0(d[1]); })
	(data);

	var d1 = d3_horizonArea
	.x(function (d) { return x1(d[0]); })
	.y1(function (d) { return h * bands - y1(d[1]); })
	(data);

	path.enter().append("path")
	.style("fill", color)
	.attr("transform", t0)
	.attr("d", d0);

	path.transition()
	.duration(duration)
	.style("fill", color)
	.attr("transform", t1)
	.attr("d", d1);

	path.exit().transition()
	.duration(duration)
	.attr("transform", t1)
	.attr("d", d1)
	.remove();

	//add legend
	g.append('text').text(d.name)
	.attr('class', 'legend')
	.attr('x', 10)
	.attr('y', 10);

	// Stash the new scales.
	this.__chart__ = { x: x1, y: y1, t: t1, id: id };
	});
	d3.timer.flush();
	}

	horizon.duration = function (x) {
	if (!arguments.length) return duration;
	duration = +x;
	return horizon;
	};

	horizon.bands = function (x) {
	if (!arguments.length) return bands;
	bands = +x;
	color.domain([-bands, 0, 0, bands]);
	return horizon;
	};

	horizon.mode = function (x) {
	if (!arguments.length) return mode;
	mode = x + "";
	return horizon;
	};

	horizon.colors = function (x) {
	if (!arguments.length) return color.range();
	color.range(x);
	return horizon;
	};

	horizon.interpolate = function (x) {
	if (!arguments.length) return interpolate;
	interpolate = x + "";
	return horizon;
	};

	horizon.x = function (z) {
	if (!arguments.length) return x;
	x = z;
	return horizon;
	};

	horizon.y = function (z) {
	if (!arguments.length) return y;
	y = z;
	return horizon;
	};

	horizon.width = function (x) {
	if (!arguments.length) return w;
	w = +x;
	return horizon;
	};

	horizon.height = function (x) {
	if (!arguments.length) return h;
	h = +x;
	return horizon;
	};

	//additional methods from original plugin
	horizon.timeScale = function (_) {
	if (!arguments.length) return xScale;
	xScale = _;
	return horizon;
	};
	horizon.gap = function (_) {
	if (!arguments.length) return gap;
	gap = _;
	h = h - _;
	return horizon;
	};

	return horizon;
	};

	var d3_horizonArea = d3.svg.area(),
	d3_horizonId = 0;

	function d3_horizonX(d) {
	return d[0];
	}

	function d3_horizonY(d) {
	return d[1];
	}

	function d3_horizonTransform(bands, h, mode) {
	return mode == "offset"
	? function (d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
	: function (d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
	}
	})();
	/**
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/

	define(['moment', 'underscore', 'd3.chart.analog', 'd3.chart.digital', 'd3.chart.horizon'], function (moment) {

	var _container, _graphs = [];

	//chart d3 config
	var _svgContainer, _chartCanvas, _xScale, _xDomain = [Infinity, -Infinity];

	//static config
	var containerWidth = 800, containerHeight = 400;
	var margin = { top: 40, right: 50, bottom: 30, left: 60 },
	width = containerWidth - margin.left - margin.right,
	height = containerHeight - margin.top - margin.bottom;
	var logChartHeight = 100, diChartHeight = 20;
	var gap = 30;
	var color = d3.scale.category10();

	this.init = function (options) {
	_container = options.container;
	containerWidth = $(_container).width();
	width = containerWidth - margin.left - margin.right;

	_svgContainer = d3.select(_container)
	.append("svg")
	.attr("width", containerWidth)
	.attr("height", containerHeight);

	_svgContainer.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

	_chartCanvas = _svgContainer
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// set up the X Axis scale
	_xScale = d3.time.scale().range([0, width]);

	var hoverLine = _chartCanvas.append('svg:line')
	.attr('class', 'hover-line')
	.attr('x1', 20).attr('x2', 20)
	.attr('y1', 2)// prevent touching x-axis line
	.attr('y2', height + 20)
	.attr('transform', 'translate(0, -20)')
	.attr('stroke-width', 1)
	.attr('stroke', 'grey')
	.attr('opacity', 1e-6);

	_chartCanvas.append("g")
	.attr('id', 'xAxis')
	.attr('transform', 'translate(0, -20)') // putting x-Axis into the margin area
	.attr("class", "brush");
	_chartCanvas.select('#xAxis').append('g')// where x-axis will be rendered
	.attr("class", "x axis");


	var timeLegend = _chartCanvas.append('text')
	.attr('class', 'legend-time')
	.attr('x', width)
	.attr('y', -5) // push to the margin area below x-axis
	.attr('text-anchor', 'end')
	.text('time:');


	_svgContainer// mouse event not working on _chartCanvas
	.on('mouseover', function () {
	var mouse = d3.mouse(this);
	var mX = mouse[0] - margin.left, mY = mouse[1] - margin.top;
	if (mX > 0 && mY > 0 && mX < width)
	hoverLine.style('opacity', 1);
	else
	hoverLine.style("opacity", 1e-6);
	})
	.on('mouseout', function () {
	hoverLine.style("opacity", 1e-6);
	})
	.on('mousemove', function () {
	var mouse = d3.mouse(this);
	var mX = mouse[0] - margin.left, mY = mouse[1] - margin.top;
	hoverLine.attr('x1', mX).attr('x2', mX);
	if (mX > 0 && mY > 0 && mX < width) {
	var dt = _xScale.invert(mX);
	var nearestDateVal = minDistanceDate(_.map(_graphs, function (d) { return d.map[mX] ? d.map[mX].date : null; }), dt);
	var graphIdswithDataAtNearestDate = _.chain(_graphs).filter(function(d) { return d.map[mX] && d.map[mX].date == nearestDateVal; }).pluck('id').value();
	if (nearestDateVal!=null) {
	var xMoment = moment(nearestDateVal);
	//update legend values
	d3.selectAll('.graph').data(_graphs, function (d) { return d.id; }).each(function (d) {
	var g = d3.select(this);
	var str = '';
	//var v = _.findWhere(d.data, { DateTime: nearestDateVal });
	if (graphIdswithDataAtNearestDate.indexOf(d.id) >= 0) {
	var v = d.data[d.map[mX].idx];
	_.each(d.yVal, function (yDim, i) {
	str += d.yVal.length == 1 ? v[yDim] : ((i > 0 ? ', ' : ' ') + yDim + ':' + v[yDim]);
	});
	}
	g.select('.legend').text(d.id + ' : ' + str);
	});
	//move plot line to stick to nearest time where any value found , then update time and value legends
	timeLegend.text(xMoment.format('DD MMM'));
	var moveX = _xScale(xMoment);
	hoverLine.attr('x1', moveX).attr('x2', moveX);
	}
	}
	});

	};

	//select and generate a chart plugin to render
	function selectChart(d) {
	if (d.type == 'analog') {
	var chart = d3.analog().height(logChartHeight).gap(gap).color(color);
	}
	else if (d.type == 'digital') {
	chart = d3.digital().height(graphHeight(d)).color(color)
	.y(function (t) { return t.State ? 1 : 0; });// 0/1 generator as y function
	}
	if (d.type == 'horizon') {
	var mean = d.data.map(function (t) { return t.Value; }).reduce(function (p, v) { return p + v; }, 0) / d.data.length;
	chart = d3.horizon()
	.width(width)
	.height(logChartHeight)
	.gap(gap)
	.y(function (t) { return t.Value - mean; })
	.bands(3)
	.mode("offset");
	}

	if(chart) {
	//config common features
	chart.timeScale(_xScale).x(function (t) { return moment(t.DateTime).toDate(); });
	}

	return chart;
	}

	function graphHeight(d) {
	if (d.type == 'analog')
	return logChartHeight;
	else if (d.type == 'digital') {
	//calculate height
	var cnt = _.uniq(d.data, false, function (t) { return t.Channel; }).length;
	return diChartHeight * cnt;
	} else {
	return 100;
	}
	}

	function adjustChartHeight() {
	height = 0;
	_.each(_graphs, function (t) { height += graphHeight(t); });
	containerHeight = height + margin.top + margin.bottom;
	_svgContainer.attr('height', containerHeight);
	$('.loader').height(containerHeight);
	_svgContainer.select('#clip').select('rect').attr('height', height);
	_chartCanvas.select('.hover-line').attr('y2', height + 20);
	}

	//returns a date from dates array which is nearest from dt
	function minDistanceDate(dates, dt) {
	var result = null, distance = Infinity, dtVal=moment(dt).valueOf();
	_.each(dates, function(d) {
	var m = moment(d).valueOf();
	if (distance > Math.abs(m - dtVal)) {
	distance = Math.abs(m - dtVal);
	result = d;
	}
	});
	return result;
	}


	//long running, should be non-blocking as user zooms
	function zoom(callback) {
	//artificially spawns background task
	setTimeout(function() {
	_.each(_graphs, function (g) {
	g.map = getLookupMap(g, _xScale);
	});
	callback();
	}, 30);
	}

	//generate hashmap for fast lookup from plotline position
	function getLookupMap(graph, xScale) {

	//hashmap for fast lookup with mousemove (plotline)
	var map = [];
	var startIndex = _.sortedIndex(graph.data, xScale.domain()[0], function (v) { return moment(v).valueOf(); });
	var endIndex = _.sortedIndex(graph.data, xScale.domain()[1], function (v) { return moment(v).valueOf(); });
	var data = _.chain(graph.data).rest(startIndex).initial(endIndex - startIndex).value();

	var dates = _.map(data, function (d) { return moment(d.DateTime).valueOf(); });
	var cursorIndex = 0;// for skipping records on subsequent search

	_.each(d3.range(width), function (px) {
	var dt = xScale.invert(px);
	var dataIndex = cursorIndex+_.sortedIndex(_.rest(dates, cursorIndex), dt.valueOf());// assuming data is sorted
	if (dataIndex < data.length) {
	if (dataIndex > 0) {
	var left = moment(data[dataIndex - 1].DateTime), right = moment(data[dataIndex].DateTime);
	if (moment(dt).diff(left) < right.diff(dt)) // if left is nearer
	dataIndex = dataIndex - 1;
	}
	map.push({ date: data[dataIndex].DateTime, idx:dataIndex });
	//map[px] = data[dataIndex].DateTime;
	}
	cursorIndex = dataIndex;
	});


	return map;
	}



	//public methods for clients of this module
	this.addGraph = function (graph) {
	//adjust x-axis domain
	var dates = _.map(graph.data, function (d) { return moment(d.DateTime).valueOf(); });
	var min = dates[0], max = dates[dates.length - 1], streched = false; // assuming data is sorted
	if (min < _xDomain[0]) {
	_xDomain[0] = min;
	streched = true;
	}
	if (max > _xDomain[1]) {
	_xDomain[1] = max;
	streched = true;
	}
	if (streched) {
	_xScale.domain(_xDomain);

	//hashmap for fast lookup with plotline
	//calculate all graphs hashmaps as x-scale changed for new graph data
	_.each(_graphs, function (g) {
	g.map = getLookupMap(g, _xScale);
	});
	}

	//setup graph data
	graph.order = _graphs.length;

	graph.map = getLookupMap(graph, _xScale);
	_graphs.push(graph);


	//zoom scale, this needs to be rendered here as brush event triggers render which cannot change the brush itself
	var zoomScale = d3.time.scale().range([0, width]).domain(_xScale.domain());
	var brush = d3.svg.brush()
	.x(zoomScale)
	.on('brushend', function () {
	_xScale.domain(brush.empty() ? _xDomain : brush.extent());

	//generate lookup maps for graphs
	$('.loader').show();
	zoom(function () { render(); $('.loader').hide(); });
	});
	d3.select('#xAxis')
	.call(brush)
	.selectAll('rect')
	.attr('y', -10)
	.attr('height', 20);

	adjustChartHeight();

	if(graph.render)
	render();
	};

	this.removeGraph = function (graphId) {
	_graphs = _.reject(_graphs, function (g) { return g.id === graphId; });
	_.chain(_graphs).sortBy(function (g) { return g.order; }).each(function (g, i) { g.order = i; });

	adjustChartHeight();

	render();
	};

	this.reorderGraph = function (graphId, updown) {
	var g = _.findWhere(_graphs, { id: graphId });
	if (updown == 'up') {
	var prv = _.findWhere(_graphs, { order: g.order - 1 });
	g.order = g.order > 0 ? (g.order - 1) : 0;
	if (prv)
	prv.order++;
	}
	else if (updown === 'down') {
	var next = _.findWhere(_graphs, { order: g.order + 1 });
	g.order++;
	if (next)
	next.order--;
	}

	render();
	};

	//rendering with d3
	this.render = function () {

	//data-bind
	var graphs = _chartCanvas.selectAll('.graph')
	.data(_graphs, function (d) { return d.id; });

	//x-axis
	var xAxis = d3.svg.axis().scale(_xScale).orient("top").ticks(5);
	d3.select('.x.axis').call(xAxis);

	//remove graph
	graphs.exit().remove();

	//update existing graphs
	graphs.each(function (d) {
	var g = d3.select(this);
	//position graph
	var tx = 0;
	_.chain(_graphs).filter(function (t) { return t.order < d.order; }).each(function (t) { tx += graphHeight(t); });
	g.transition().duration(700).attr('transform', function (d) { return 'translate(0, ' + tx + ')'; });

	g.call(selectChart(d));
	});

	//add new graphs
	var newGraphs = graphs
	.enter()
	//.append('g')
	.insert('g', '.hover-line') //make hover-line on top
	.attr('class', 'graph')
	.attr('transform', function (d) {
	var tx = 0;
	_.chain(_graphs).filter(function (t) { return t.order < d.order; }).each(function (t) { tx += graphHeight(t); });
	return 'translate(0, ' + tx + ')';
	});
	newGraphs.each(function (d) { d3.select(this).call(selectChart(d)); });
	};

	return this;
	});
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=10" />
	<title>Log Chart</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>

	<style>
	body { font: 12px Arial;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}
	.loader {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255,255,255,0.8);
	text-align: center;
	z-index: 99;
	display: none;
	}
	.loader p {
	margin-top: 180px;
	}
	</style>

	<script type="text/javascript">
	'use strict';

	$(function () {

	requirejs.config({
	"baseUrl": "./",
	"paths": {
	"app": "./",
	'moment': 'http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min',
	'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min'
	}
	});


	require(['d3.chart'], function (d3Chart) {
	d3Chart.init({ container: '#container', xDim: 'DateTime' });
	// d3Chart.addGraph({ id: 'Speed', type: 'horizon', name: 'Speed', dataId: 512, yVal: ['Value'], data: speedData });
	d3Chart.addGraph({ id: 'Imps', type: 'analog', name: 'RPM', dataId: 513, yVal: ['Value'], data: imps1 });
	d3Chart.addGraph({ id: 'Clicks', type: 'analog', name: 'RPM2', dataId: 513, yVal: ['Value'], data: imps2 });
	d3Chart.addGraph({ id: 'CTR', type: 'analog', name: 'CTR', dataId: 513, yVal: ['Value'], data: CTR });
	// d3Chart.addGraph({ id: 'DI', type: 'digital', name: 'Digital Input', dataId: 522, data: diData });

	// d3Chart.addGraph({ id: 'Accel', type: 'analog', name: 'Accel', dataId: 522, yVal: ['X', 'Y', 'Z'], data: accelData });
	d3Chart.render();

	setTimeout(function () {
	d3Chart.reorderGraph('Accel', 'up');

	//window.setTimeout(function () {
	// d3Chart.removeGraph('RPM');
	//}, 2000);

	}, 3000);


	});

	});

	</script>
	</head>
	<body>
	<script src="./sample_data.js"></script>

	<div id="container" style="min-width: 300px;width:100%">
	<div class="loader"><p>Working...</p></div>
	</div>

	</body>
	</html>