123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
|
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
|