nv.d3 code time formatting issues

Question

window.onload = function() {


    var par = null ;
    var recieved = null;
    var Time = [1,2,3];
    //var Time = ['1:00', '2:00', '2:30'];
    var Sale = [200,150,300];
    var data;
    var ThroughputLine1 = [];

    nv.addGraph(function() {
     var chart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: false
            })


        //.x(function(d) { return d[0] })   //We can modify the data accessor functions...
       // .y(function(d) { return d[1] });   //...in case your data is 

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Time")
            //.tickValues([1,2,3,4,5,6,7,8,9,10])
            .tickFormat(function(d) { return d3.time.format('%x')})
            // .tickFormat(function(d){ d3.format(',.2f')(d)})
            .staggerLabels(true)
        ;

        chart.yAxis
            .axisLabel('Lbs')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',.1f')(d);
            })
        ;

            data = data();

        d3.select('#chart1').append('svg')
            .datum(data)
            .call(chart);
        nv.utils.windowResize(chart.update);

        return chart;
    });


    function data(){
        var temp;
            for(var i=0; i < Time.length;i++){
                    var time = Time[i];
                    var sale = Sale[i];
                    temp={'x':time, 'y':sale};
                    ThroughputLine1.push(temp); 
                }

        //}

        return  [{
                        values: ThroughputLine1,
                        key: "Bagger 1",
                        color: "#2ca02c"
                        }];
    }

}

So I am having lots of trouble to get this working the way i need it to work. As of right now this code produces a single graph with the data that is there. However, as soon as I make the change from Time array to Time2 array I get alof of errors such as Error: Invalid value for attribute transform="translate(NaN,106.66666666666669)" and Uncaught TypeError: Cannot read property 'x' of null

for testing purposes here it my html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
    <meta http-equiv="refresh" content="43200">
    <link rel="stylesheet" type="text/css" href="Styles/Design.css">
    <link href="Styles/nv.d3.css" rel="stylesheet" type="text/css">
    <link href="Styles/lineChart.css" rel="stylesheet" type="text/css">
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/testTime.js" type="text/javascript"></script>
    <!--<script src="Scripts/lineChart.js" type="text/javascript"></script> -->
    <script src="scripts/d3.min.js" charset="utf-8"></script>
    <script src="scripts/nv.d3.js"></script>
</head>
    <body class='with-3d-shadow with-transitions'>
    <div id="wrapperTV2"></div>
        <center>
            <div id="through">Throughput lbs/hr</div>
            <div id="chart1"></div><br><br><br><br>
            <div id="downt">Downtime %</div>
            <div id="chart2"></div><br><br><br><br>
            <div id="other">Other</div>
            <div id="chart3"></div>
        </center>
    </body>
</html>

score 0 · Answer 1 · answered Sep 07 '15 at 06:32

D3 doesn't know what to do with the string values of the human-readable times in times in your second array (hence NaN). You could do something to parse the times into Numbers like the following:

    function timeStringToSeconds(str){
      var minutesSeconds = str.split(':');
      // the + coerces the string to a number
      return (+minutesSeconds[0])*60 + (+minutesSeconds[1]);
    }

    var temp;
    for(var i=0; i < Time.length;i++){
        var time = timeStringToSeconds(Time[i]);
        var sale = Sale[i];
        temp={'x':time, 'y':sale};
        ThroughputLine1.push(temp); 
    }

See this Plunk for a live version: http://plnkr.co/edit/NodYtY9DiUg7mBPViLnq?p=preview

nv.d3 code time formatting issues

1 Answers1