LineChart = { init: function(svg, dataset, valueline){ svg.append("path") .data([dataset]) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", "2px") .attr("d", valueline); } }; // //LineChart = { // margin: {top: 20, right: 0, bottom: 40, left: 80}, // // init: function(svg, html_tag_attr, dataset, xTimeParse, xAxisFormat, xTicks, yTicks){ // this.html_tag_attr = html_tag_attr; // // //var div = d3.select(this.html_tag_attr).append("div") // d3.select(this.html_tag_attr).append("div") // .attr("class", "tooltip") // .style("opacity", 0); // // // set the dimensions and margins of the graph // var width = $(this.html_tag_attr).width() - this.margin.left - this.margin.right, // height = $(this.html_tag_attr).height() - this.margin.top - this.margin.bottom; // // // parse the date / time // var parseTime = d3.timeParse(xTimeParse); // // // set the ranges // var x = d3.scaleTime().range([0, width]); // var y = d3.scaleLinear().range([(height), this.margin.top]); // // // define the line // var valueline = d3.line() // .x(function(d) { return x(d.x); }) // .y(function(d) { return y(+d.y); }); // //.y(function(d) { return y(d.y); }); // // // format the dataset // dataset.forEach(function(d) { // d.x = parseTime(d.x); // d.y = +d.y; // }); // // // Scale the range of the dataset // x.domain(d3.extent(dataset, function(d) { return d.x; })); // y.domain([0, d3.max(dataset, function(d) { return +d.y + 10; })]).ticks(2); // //var max = d3.max(dataset, function(d) { return +d.y + 10; }); // // // Add the valueline path. // svg.append("path") // .data([dataset]) // .attr("fill", "none") // .attr("stroke", "green") // .attr("stroke-width", "2px") // .attr("d", valueline); // // // Add the X Axis // svg.append("g") // .attr("class", "axis") // .attr("transform", "translate(0," + height + ")") // .call(d3.axisBottom(x).tickFormat(d3.timeFormat(xAxisFormat)).ticks(xTicks)) // .selectAll("text") // .attr("dx", "-.8em") // .attr("dy", ".95em"); // // // Add the Y Axis // svg.append("g") // .attr("class", "axis") // .call(d3.axisLeft(y).ticks(yTicks)) // .selectAll("text") // .style("text-anchor", "end") // ; // // }, //ENDOF init: function() // // addLine: function(svg, html_tag_attr, dataset, xTimeParse, color){ // // set the dimensions and margins of the graph // var width = $(this.html_tag_attr).width() - this.margin.left - this.margin.right, // height = $(this.html_tag_attr).height() - this.margin.top - this.margin.bottom; // // // parse the date / time // var parseTime = d3.timeParse(xTimeParse); // // // 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.x); }) // .y(function(d) { return y(+d.y); }); // //.y(function(d) { return y(d.y); }); // // //var svg = this.svg(html_tag_attr, width, height, this.margin); // // // format the dataset // dataset.forEach(function(d) { // d.x = parseTime(d.x); // d.y = +d.y; // }); // // // Scale the range of the dataset // x.domain(d3.extent(dataset, function(d) { return d.x; })); // y.domain([0, d3.max(dataset, function(d) { return +d.y + 10; })]).ticks(2); // // // Add the valueline path. // svg.append("path") // .data([dataset]) // .attr("fill", "none") // .attr("stroke", color) // .attr("stroke-width", "2px") // .attr("d", valueline) // ; // // }, //ENDOG addLine: function() // //}; //ENDOF LineChart