Script function on running once in Chrome but works fine in Firefox

Question

I am using NVD3 to make several graphs. I put a console.log in the addGraph function which adds a particular graph.

I am wondering whether there is something wrong in my code? Am I using the library correctly? I do not know where to begin to resolve this issue.

FIREFOX (All the graphs are displayed properly)

total 444 Add graph is called here

total 518 Add graph is called here

total 572 Add graph is called here

total 553 Add graph is called here

total 617 Add graph is called here

total 595 Add graph is called here

GOOGLE CHROME

total NaN

total NaN

total NaN

total NaN

total NaN

Add graph is called here total 108

total 138

total 145

total 146

CODE

Calling the scripts

<script src="../../../data/novus/lib/d3.v2.js"></script>
<script src="../../../data/novus/nv.d3.js"></script>
<script src="../../../data/novus/src/tooltip.js"></script>
<script src="../../../data/novus/src/models/legend.js"></script>
<script src="../../../data/novus/src/models/axis.js"></script>
<script src="../../../data/novus/src/models/scatter.js"></script>
<script src="../../../data/novus/src/models/line.js"></script>
<script src="../../../data/novus/src/models/multiChart.js"></script>

In the loop

<script src="../../../data/novus/nv.d3.js"></script>
<script>
    var impressions = [];
    var clickrate = [];
    var trial_impressions = [];
    var trial_clickrate = [];
    var testdata = [{
        "key" : "Impressions",
        "type" : "line",
        "values" : impressions,
        "yAxis" : 1
    }, {
        "key" : "Clicks",
        "type" : "line",
        "values" : clickrate,
        "yAxis" : 2
    }, {
        "key" : "T Impressions",
        "type" : "line",
        "values" : trial_impressions,
        "yAxis" : 1
    }, {
        "key" : "T Clicks",
        "type" : "line",
        "values" : trial_clickrate,
        "yAxis" : 2
    }].map(function(series) {
        series.values = series.values.map(function(d) {
            return {
                x : d[0],
                y : d[1]
            }
        });
        return series;
    });
    var chart;

    nv.addGraph(function() {
        console.log("Add");
        chart = nv.models.multiChart().margin({
            top : 30,
            right : 60,
            bottom : 50,
            left : 70
        }).x(function(d, i) {
            return i
        }).color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
            if ( typeof (dx) == undefined || d > 1000) {
                dx = new Date(d);
            } else {
                dx = new Date(dx);
            }
            return dx ? d3.time.format('%x')(dx) : '';
        });

        chart.yAxis1.tickFormat(d3.format(',.1f'));
        v

        chart.yAxis2.tickFormat(d3.format(',.4f'));

        d3.select('#chart1<?= $chartID?> svg').datum(testdata).transition().duration(500).call(chart);
        return chart;
    });

</script>

The div where the graph is called

<div id='chart1<?= $chartID?>' style="width:1110px;height:300px;font-size:11px;margin-top:5px">
    <svg></svg>
</div>

Answer 1

My best guess is that there is mathematical calculations on those numbers. In witch case using the function parseFloat() can convert the string to a number so that mathematical calculations will be done correctly.