doevisualizations/doeVisualization/js/doetrendline/doetrendline.js

Data Visualization Library based on RequireJS and D3.js (v4+)

define(['jquery',
        'underscore', 
        'jqueryuiwidget',
        'handlebars',
        'd3'
    ],
    function($, _, ui, Handlebars, d3) {

        $.widget("doe.doetrendline", {

            // Options to be used as defaults
            options: {},
            _template: function() {
                var arrHTML = [];
                arrHTML.push('<div class="trendlineChart">');
                arrHTML.push('</div>');
                return arrHTML.join('');
            },
            _create: function() {
                this._fetchAndRender();
            },
            _fetchAndRender: function() {
                this._compileTemplate();
            },
            _compileTemplate: function() {
                var compiled = Handlebars.compile(this._template());
                this.element.html(compiled({}));
                this.element.addClass('doedtrendline');
                this._bindEvents();
            },
            _bindEvents: function() {

                var data = this.options["test"];
                console.log("###", data);

                var margin = { top: 20, right: 20, bottom: 30, left: 50 },
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;

                // parse the date / time
                var parseTime = d3.timeParse("%Y");

                // set the ranges
                var x = d3.scaleTime().range([0, width]);
                var y = d3.scaleLinear().range([height, 0]);

                // define the line
                var valueline = d3.line()
                    .x(function(d) { return x(d.Date); })
                    .y(function(d) { return y(d.Imports); });
                // define the line
                var valueline2 = d3.line()
                    .x(function(d) { return x(d.Date); })
                    .y(function(d) { return y(d.Exports); });

                // append the svg obgect to the body of the page
                // appends a 'group' element to 'svg'
                // moves the 'group' element to the top left margin
                var svg = d3.select(".trendlineChart").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform",
                        "translate(" + margin.left + "," + margin.top + ")");


                // format the data
                data.forEach(function(d) {
                    d.Date = parseTime(d.Date);
                    d.Imports = +d.Imports;
                    d.Exports = +d.Exports;
                });

                // sort years ascending
                data.sort(function(a, b) {
                    return a["Date"] - b["Date"];
                })

                // Scale the range of the data
                x.domain(d3.extent(data, function(d) { return d.Date; }));
                y.domain([0, d3.max(data, function(d) {
                    return Math.max(d.Imports, d.Exports);
                })]);


                // Add the valueline path.
                svg.append("path")
                    .data([data])
                    .attr("class", "trendline")
                    .attr("d", valueline);
                // Add the valueline path.
                svg.append("path")
                    .data([data])
                    .attr("class", "trendline")
                    .attr("d", valueline2);
                // Add the X Axis
                svg.append("g")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(x));

                // Add the Y Axis
                svg.append("g")
                    .call(d3.axisLeft(y));

            },
            destroy: function() {

            },
            _setOption: function(key, value) {
                this._super(key, value);
            },
            _setOptions: function(options) {
                this._super(options);
            }
        });
    });