gistfile1.txt

Montric.ChartView = Ember.View.extend({
    classNames: ['eurekajChart'],
    resizeHandler: null,
    nvd3Chart: null,

    contentObserver: function() {
        console.log('ChartView contentObserver!');
        var elementId = this.get('elementId');
        var series = this.get('chart.series');
        console.log('series: ' + series);

        if (series) {
            var view = this;
            Ember.run.next(function() {
                view.rerender();
            });
        }
    }.observes('chart.series'),

    didInsertElement : function() {
        console.log('ChartView didInsertElement');
        console.log(this.get('chart'));
        if (this.get('chart') != null) {
            var elementId = this.get('elementId');
            var viewElement = document.getElementById(elementId);

            var yAxisElement = document.createElement('div');
            yAxisElement.id = elementId + "_y_axis";
            yAxisElement.className = 'y_axis';
            viewElement.appendChild(yAxisElement);

            var chartElement = document.createElement('div');
            chartElement.id = elementId + "_chart";
            chartElement.className = 'chart';
            viewElement.appendChild(chartElement);

            var legendContainerElement = document.createElement('div');
            legendContainerElement.id = elementId + "_legend_container";
            legendContainerElement.className = 'legend';
            chartElement.appendChild(legendContainerElement);

            var legendHeaderElement = document.createElement('div');
            legendHeaderElement.id = elementId + "_legend_header";
            legendHeaderElement.className = 'legend_header';
            legendHeaderElement.innerHTML = this.get('chart.name');
            legendContainerElement.appendChild(legendHeaderElement);

            var legendElement = document.createElement('div');
            legendElement.id = elementId + "_legend";
            legendContainerElement.appendChild(legendElement);

            var sliderElement = document.createElement('div');
            sliderElement.id = elementId + "_slider";
            viewElement.appendChild(sliderElement);

            var thisView = this;

            var numCharts = this.get('controller').get('content').get('length');
            numCharts = 1;
            var height = (this.$().height() / numCharts) - (numCharts * 6);
            console.log('chart height: ' + numCharts + " : " + height);
            var width = this.$().width();

            var elementId = this.get('elementId');
            var series = this.get('chart.series');

            var graph = new Rickshaw.Graph( {
                element: document.getElementById(elementId + "_chart"),
                width: width,
                height: height,
                renderer: 'line',
                series: series
            } );

            graph.render();

            var legend = new Rickshaw.Graph.Legend( {
                graph: graph,
                element: document.getElementById(elementId + '_legend')

            } );

            var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {

                render: function(args) {

                    var graph = this.graph;

                    var points = args.points;
                    var point = points.filter( function(p) { return p.active } ).shift();

                    if (point.value.y === null) return;

                    var hoverHtml = "";

                    var hoverHtml = '<span class="date">' + new Date(point.value.x * 1000).toUTCString() + '</span><br />';

                    args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
                        hoverHtml += '<span class="detail_swatch" style="background-color: ' + d.series.color + '"></span>';
                        hoverHtml += d.name + ": " + d.formattedYValue + "<br />";
                    });

                    var formattedXValue = point.formattedXValue;
                    var formattedYValue = point.formattedYValue;

                    this.element.innerHTML = '';
                    this.element.style.left = graph.x(point.value.x) + 'px';

                    var xLabel = document.createElement('div');

                    xLabel.className = 'x_label';
                    xLabel.innerHTML = formattedXValue;
                    this.element.appendChild(xLabel);

                    var item = document.createElement('div');

                    item.className = 'item';

                    // invert the scale if this series displays using a scale
                    var series = point.series;
                    var actualY = series.scale ? series.scale.invert(point.value.y) : point.value.y;

                    item.innerHTML = hoverHtml;//this.formatter(series, point.value.x, actualY, formattedXValue, formattedYValue, point);
                    item.style.top = this.graph.y(point.value.y0 + point.value.y) + 'px';

                    this.element.appendChild(item);

                    var dot = document.createElement('div');

                    dot.className = 'dot';
                    dot.style.top = item.style.top;
                    dot.style.borderColor = series.color;

                    this.element.appendChild(dot);

                    if (point.active) {
                        item.className = 'item active';
                        dot.className = 'dot active';
                    }

                    this.show();

                    if (typeof this.onRender == 'function') {
                        this.onRender(args);
                    }
                }
            });

            var hover = new Hover( { graph: graph } );

            var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
                graph: graph,
                legend: legend
            } );

            var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
                graph: graph
            })

            var axes = new Rickshaw.Graph.Axis.Time( {
                graph: graph
            } );

            var y_ticks = new Rickshaw.Graph.Axis.Y( {
                graph: graph,
                orientation: 'left',
                min: 0,
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                element: document.getElementById(elementId + '_y_axis')
            } );
            y_ticks.render();
            axes.render();

        }
        /*if (this.get('chart') != null) {
            console.log(this.get('content.chartValue'));
            var thisView = this;
            var numCharts = this.get('controller').get('content').get('length');
            var height = (this.$().height() / numCharts) - (numCharts * 6);
            var width = this.$().width();

            var elementId = this.get('elementId');
            var data = jQuery.parseJSON(this.get('chart').get('chartValue'));

            console.log('data');
            console.log(data);

            var view = this;

            nv.addGraph(function() {
                console.log('nv.addGraph');
                var chart = nv.models.lineChart()
                    .x(function(d) { return d[0] })
                    .y(function(d) { return d[1] })// //adjusting, 100% is 1.00, not 100 as it is in the data
                    .color(d3.scale.category10().range())
                    .forceY(0);

                chart.xAxis
                    .tickFormat(function(d) {
                        return d3.time.format('%d/%m %H:%M:%S')(new Date(d))
                    });

                chart.yAxis.tickFormat(function(yValue) {
                    var retVal = Math.round(yValue*1000)/1000;
                    if (yValue >= 1000 && yValue < 1000000) {
                        retVal = yValue / 1000;
                        retVal = retVal + "k";
                    }
                    if (yValue >= 1000000 && yValue < 1000000000) {
                        retVal = yValue / 1000000;
                        retVal = retVal + "m";
                    }
                    if (yValue >= 1000000000 && yValue < 1000000000000) {
                        retVal = yValue / 1000000000;
                        retVal = retVal + "g";
                    }
                    if (yValue >= 1000000000000 && yValue < 1000000000000000) {
                        retVal = yValue / 1000000000000;
                        retVal = retVal + "t";
                    }
                    return retVal;
                });

                chart.yAxis.showMaxMin(false);
                chart.xAxis.showMaxMin(false);

                $("#" + elementId).css('height', height + 'px');
                $("#" + elementId).css('width', width + 'px');

                d3.select('#' + elementId).append('svg')
                    .datum(data)
                    .transition().duration(500)
                    .call(chart);

                thisView.set('nvd3Chart', chart);
                //TODO: Figure out a good way to do this automatically
                //nv.utils.windowResize(chart.update);
            });
        }*/
    }
});