title: How do I set the right date from an external JSON file?
body: <p>I'm using nvd3 and I have a question about date formatting and displaying. You can find my example below. </p>
  
  <pre><code>d3.json('jsonData.json', function(data) {
  
  nv.addGraph(function() {    
      var chart = nv.models.lineChart()
          .margin({top: 30, right: 60, bottom: 50, left: 90})
          .color(d3.scale.category10().range());
  
      chart.xAxis.tickFormat(function(d) {
              var dx = data[0].values[d] &amp;&amp; data[0].values[d].x || 0;
              return dx ? d3.time.format('%Y-%m-%e %X')(new Date(dx)) : '';
          });
  
      chart.yAxis
          .tickFormat(d3.format(',.1f')(d));
  
      d3.select('#chart1 svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);
  
      //TODO: Figure out a good way to do this automatically
          nv.utils.windowResize(chart.update);
      //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
  
          chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  
      return chart;
    });
  }); 
  </code></pre>
  
  <p>The JSON file jsonData is built like this :</p>
  
  <pre><code>    [{ 
         "key":"Consumption", 
         "values":[ [2012-06-27 00:00:00 , 153580] , [2012-06-27 02:00:00 , 153590] , [...] , [...] , ... , [...] ]
      }] 
  </code></pre>
  
  <p>with a date format like this: "Year-month-day hour:minutes:seconds"</p>
  
  <p>The problem is that I can't display anyhing... I know something is missing to display that chart with the consumption on the Y axis and the date on the X axis but I can't find what...</p>
  
  <p>I have tried many of ways to do it, inspired from som examples from nvd3.org, but nothing is working :/</p>
  
  <p>Thanks for your answers!</p>
  
  <p>-----------------------------------------------  EDIT  -------------------------------------</p>
  
  <p>Thanks Andrew and George, I solved my problem thanks to the examples given on nvd3.org.</p>
  
  <p>I used a PHP script to correctly format my date in a timestamp (with milliseconds) and re-used the example "linePlusBarChart".</p>
  
  <p>After all, my code and my JSON file look like this :</p>
  
  <pre><code>d3.json('jsonData.json', function(data) {
  
  data.map(function(series) {
  series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
  return series;
  });
  
  nv.addGraph(function() {    
      var chart = nv.models.lineChart()
          .margin({top: 30, right: 60, bottom: 50, left: 90})
          .x(function(d,i) { return i })
          .color(d3.scale.category10().range());
  
          chart.xAxis.tickFormat(function(d) {
              var dx = data[0].values[d] &amp;&amp; data[0].values[d].x || 0;
              return dx ? d3.time.format('%X')(new Date(dx)) : '';
          });
  
      chart.yAxis
          .tickFormat(d3.format(',.1f'));
  
      d3.select('#chart1 svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);
  
          nv.utils.windowResize(chart.update);
  
          chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
  
      return chart;
     });
  });     
  </code></pre>
  
  <p>And the JSON file:</p>
  
  <pre><code>    [{
        "key":"Consommation", 
        "values":[[1340755200000 , 153580] , [1340762400000 , 153590] , 
                  [1340769600000 , 153610] , [1340776800000 , 153650] , 
                  [1340784000000 , 153680] , [1340791200000 , 153720] , 
                  [1340798400000 , 153780] , [1340805600000 , 153830] , 
                  [1340812800000 , 153880] , [1340820000000 , 153900] , 
                  [1340827200000 , 153920] , [1340834400000 , 153930] , 
                  [1343347200000 , 153940] 
                 ]
       }]
  </code></pre>
  
  <p>Thanks!</p>