example-2-6.js

function buildLineChart(data, title, graph_metric, width, height, xaxislabel, yaxislabel) {

    var metric = data.slice(0);
    metric.splice(0,1);

    // define graph size parameters
    var margin = {top: 30, right: 20, bottom: 40, left: 60},
        width = width - margin.left - margin.right,
        height = height - margin.top - margin.bottom;

    //color scale for multiple lines
    var colorscale = d3.scale.category10();

    var minDate = getDate(metric[0]),
    maxDate = getDate(metric[metric.length-1]),
    minObjectValue = getMinObjectValue(metric, graph_metric),
    maxObjectValue = getMaxObjectValue(metric, graph_metric);

    //create the graph object
    var vis= d3.select("#metrics").append("svg")
        .data(metric)
        .attr("class", "metrics-container")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var y = d3.scale.linear().
        domain([ minObjectValue - (.1 * minObjectValue) , maxObjectValue + (.1 * maxObjectValue) ]).range([height, 0]),
    x = d3.time.scale().domain([minDate, maxDate]).range([0, width]);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(metric.length-1); //set the number of ticks to the number of elements (days), minus 1

    vis.append("text")
        .attr("style", "font-family: Helvetica, Arial; font-size: 18px; font-weight: bold;")
        .attr("dx", function(d) { return 10; })
        .attr("dy", function(d) { return -10; })
        .text(''+title);

    //append the axes
    vis.append("g")
        .attr("class", "axis")
        .call(yAxis);

    vis.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    //add the axes labels
    vis.append("text")
        .attr("class", "axis-label")
        .attr("text-anchor", "end")
        .attr("x", 20)
        .attr("y", height + 34)
        .text(xaxislabel);

    vis.append("text")
        .attr("class", "axis-label")
        .attr("text-anchor", "end")
        .attr("y", 6)
        .attr("dy", "-3.4em")
        .attr("transform", "rotate(-90)")
        .text(yaxislabel);

    var lines = [];
    var circles = [];

    //loop through graph objects, if it's a single graph there will only be one object
    for (var z = 0; z < graph_metric.length; z++) {

        lines[z] = d3.svg.line()
        .x(function(d) { return x(getDate(d)); })
        .y(function(d) { return (isNaN( y(d[''+graph_metric[z]])) ? 0 : y(d[''+graph_metric[z]])); })

        vis.append("svg:path")
        .attr("d", lines[z](metric))
        .style("stroke", function() {
            return colorscale(""+z);
        })
        .style("fill", "none")
        .style("stroke-width", "2.5");

        var dataCirclesGroup = vis.append('svg:g');

        var circles = dataCirclesGroup.selectAll('.data-point')
            .data(metric);

        circles
            .enter()
            .append('svg:circle')
            .attr('class', 'dot')
            .attr('fill', function() { return colorscale(""+z); })
            .attr('cx', function(d) { return x(getDate(d)); })
            .attr('cy', function(d) { return (isNaN( y(d[''+graph_metric[z]])) ? 0 : y(d[''+graph_metric[z]])); })
            .attr('r', function() { return 3; })
            .on("mouseover", function(d) {
                d3.select(this)
                .attr("r", 8)
                .attr("class", "dot-selected")
                .transition()
                .duration(750);
            })
            .on("mouseout", function(d) {
                d3.select(this)
                .attr("r", 3)
                .attr("class", "dot")
                .transition()
                .duration(750);
            })
            .append("svg:title")
            .text(function(d) {
            var return_text = "";
            if (graph_metric.length > 1) {
                return_text += graph_metric[z] + "n";
            }
            return_text += $.datepicker.formatDate('yy-mm-dd', new Date(d.date)) + ": ";
            return_text += Math.round(d[''+graph_metric[z]] * 100) / 100;
            return return_text;
        });
    }
}