I'm trying to implement an NVD3 line chart using AJAX to load JSON data for 3 series.
I am using .NET MVC to expose my formatted JSON at /Home/GetJsonMovingAverages.
If I copy and paste this data, it all loads correctly on the graph, but by loading it via Ajax causes it to break without apparent error.
I've tried alerting the datato prove its loaded, using callbacks to enforce waiting, disabling async in the .ajax method, and a plethora of other checks, none of which have helped me identify or expose the problem.
It's simply beyond me.
The below code grabs the JSON using d3, and then tries to render it on the graph. This is as close to the demo code as I can possibly make it. I also render the JSON data to the page to indicate when it's loaded and that it's correct. (it takes ~5-10 seconds)
When the JSON appears on the page it's properly formatted and correct, but no chart appears.
EDIT : JSFIDDLE
NOTE: Now found it gives error: TypeError: data.map is not a function on nv.d3.js (line 5476, col 23) but only when using ajax. (m.map in nv.d3.min.js)
(function ($) {
'use strict';
$(document).ready(function () {
// Load chart data
d3.json('/Home/GetJsonMovingAverages', function (data) {
// Renders a line chart
(function () {
nv.addGraph(function () { //This adds the chart to a global rendering queue.
var chart = nv.models.lineChart(); //Create instance of nvd3 lineChart
$("p.jsonData").html(data); // What's going on here?!
chart.xAxis
.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) { return d3.time.format('%d/%m/%Y')(new Date(d)); });;
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
//.tickFormat(d3.format("d")); //Set Y-Axis label formatting.
d3.select("svg") //Select the document's <svg> element
.datum(data) //Attach data to the <svg> element.
.transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.
nv.utils.windowResize( //Updates the window resize event callback.
function () {
chart.update(); //Renders the chart when window is resized.
}
);
return chart; //Must return the enclosed chart variable so the global rendering queue can store it.
});
})();
});
});
})(window.jQuery);
However if I copy the data returned on the page, and paste it identically into the method as such, then it works completely fine:
d3.select("svg") //Select the document's <svg> element
.datum([{ key: "30 Day", color: "#ffaa00", values: [{ x: 1419984000000, y: 30.0 }, { x: 1418342400000, y: 30.0 }, { x: 1417737600000, y: 30.0 }, { x: 1417132800000, y: 30.0 }, { x: 1416873600000, y: 30.0 }, { x: 1416787200000, y: 30.0 }, { x: 1416528000000, y: 30.0 }, { x: 1416441600000, y: 30.0 }, { x: 1416355200000, y: 30.0 }, { x: 1416268800000, y: 30.0 }, { x: 1416182400000, y: 30.0 }, { x: 1415923200000, y: 30.0 }, { x: 1415836800000, y: 30.0 }, { x: 1415750400000, y: 30.0 }, { x: 1415664000000, y: 30.0 }, { x: 1415577600000, y: 30.0 }, { x: 1415318400000, y: 30.0 }, { x: 1415232000000, y: 30.0 }, { x: 1415145600000, y: 30.0 }, { x: 1415059200000, y: 30.0 }, { x: 1414972800000, y: 30.0 }, { x: 1414713600000, y: 30.0 }, { x: 1414627200000, y: 30.0 }, { x: 1414540800000, y: 30.0 }, { x: 1414454400000, y: 30.0 }, { x: 1414368000000, y: 30.0 }, { x: 1414105200000, y: 30.0 }, { x: 1414018800000, y: 30.0 }, { x: 1413932400000, y: 30.0 }, { x: 1413846000000, y: 30.0 }, { x: 1413759600000, y: 30.0 }, { x: 1413500400000, y: 30.0 }, { x: 1413414000000, y: 30.0 }, { x: 1413327600000, y: 30.0 }, { x: 1413241200000, y: 30.0 }, { x: 1413154800000, y: 30.0 }, { x: 1412895600000, y: 30.0 }, { x: 1412809200000, y: 30.0 }, { x: 1412722800000, y: 30.0 }, { x: 1412636400000, y: 30.0 }, { x: 1412550000000, y: 30.0 }, { x: 1412290800000, y: 30.0 }, { x: 1412204400000, y: 30.0 }, { x: 1412118000000, y: 30.0 }, { x: 1412031600000, y: 30.0 }, { x: 1411945200000, y: 30.0 }, { x: 1411686000000, y: 30.0 }, { x: 1411599600000, y: 30.0 }, { x: 1411513200000, y: 30.0 }, { x: 1411426800000, y: 30.0 }, { x: 1411340400000, y: 30.0 }, { x: 1411081200000, y: 30.0 }, { x: 1410994800000, y: 30.0 }, { x: 1410908400000, y: 30.0 }, { x: 1410822000000, y: 30.0 }, { x: 1410735600000, y: 30.0 }, { x: 1410476400000, y: 30.0 }, { x: 1410390000000, y: 30.0 }, { x: 1410303600000, y: 30.0 }, { x: 1410217200000, y: 30.0 }, { x: 1410130800000, y: 30.0 }, { x: 1409871600000, y: 30.0 }, { x: 1409785200000, y: 30.0 }, { x: 1409698800000, y: 30.0 }, { x: 1409612400000, y: 30.0 }, { x: 1409526000000, y: 30.0 }, { x: 1409266800000, y: 30.0 }, { x: 1409180400000, y: 30.0 }, { x: 1409094000000, y: 30.0 }, { x: 1409007600000, y: 30.0 }, { x: 1408662000000, y: 30.0 }, { x: 1408575600000, y: 30.0 }, { x: 1408489200000, y: 30.0 }, { x: 1408402800000, y: 30.0 }, { x: 1408316400000, y: 30.0 }, { x: 1408057200000, y: 30.0 }, { x: 1407970800000, y: 30.0 }, { x: 1407884400000, y: 30.0 }, { x: 1407798000000, y: 30.0 }, { x: 1407711600000, y: 30.0 }, { x: 1407452400000, y: 30.0 }, { x: 1407366000000, y: 30.0 }, { x: 1407279600000, y: 30.0 }, { x: 1407193200000, y: 30.0 }, { x: 1407106800000, y: 30.0 }, { x: 1406847600000, y: 30.0 }, { x: 1406761200000, y: 30.0 }, { x: 1406674800000, y: 30.0 }, { x: 1406588400000, y: 30.0 }, { x: 1406502000000, y: 30.0 }, { x: 1406242800000, y: 30.0 }, { x: 1406156400000, y: 30.0 }, { x: 1406070000000, y: 30.0 }, { x: 1405983600000, y: 30.0 }, { x: 1405897200000, y: 30.0 }, { x: 1405638000000, y: 30.0 }, { x: 1405551600000, y: 30.0 }, { x: 1405465200000, y: 30.0 }, { x: 1405378800000, y: 30.0 }, { x: 1405292400000, y: 30.0 }, { x: 1405033200000, y: 30.0 }, { x: 1404946800000, y: 30.0 }, { x: 1404860400000, y: 30.0 }, { x: 1404774000000, y: 30.0 }, { x: 1404687600000, y: 30.0 }, { x: 1404428400000, y: 30.0 }, { x: 1404342000000, y: 30.0 }, { x: 1404255600000, y: 30.0 }, { x: 1404169200000, y: 30.0 }, { x: 1404082800000, y: 30.0 }, { x: 1403823600000, y: 30.0 }, { x: 1403737200000, y: 30.0 }, { x: 1403650800000, y: 30.0 }, { x: 1403564400000, y: 30.0 }, { x: 1403478000000, y: 30.0 }, { x: 1403218800000, y: 30.0 }, { x: 1403132400000, y: 30.0 }, { x: 1403046000000, y: 30.0 }, { x: 1402959600000, y: 30.0 }, { x: 1402873200000, y: 30.0 }, { x: 1402614000000, y: 30.0 }, { x: 1402527600000, y: 30.0 }, { x: 1402441200000, y: 30.0 }, { x: 1402354800000, y: 30.0 }, { x: 1402268400000, y: 30.0 }, { x: 1402095600000, y: 30.0 }, { x: 1402009200000, y: 30.0 }, { x: 1401922800000, y: 30.0 }, { x: 1401836400000, y: 30.0 }, { x: 1401750000000, y: 30.0 }, { x: 1401663600000, y: 30.0 }, { x: 1401490800000, y: 30.0 }, { x: 1401404400000, y: 30.0 }, { x: 1401318000000, y: 30.0 }, { x: 1401231600000, y: 30.0 }, { x: 1401145200000, y: 30.0 }, { x: 1400799600000, y: 30.0 }, { x: 1400713200000, y: 30.0 }, { x: 1400626800000, y: 30.0 }, { x: 1400540400000, y: 30.0 }, { x: 1400454000000, y: 30.0 }, { x: 1400194800000, y: 30.0 }, { x: 1400108400000, y: 30.0 }, { x: 1400022000000, y: 30.0 }, { x: 1399935600000, y: 30.0 }, { x: 1399849200000, y: 30.0 }, { x: 1399590000000, y: 30.0 }, { x: 1399503600000, y: 30.0 }, { x: 1399417200000, y: 30.0 }, { x: 1399330800000, y: 30.0 }, { x: 1398985200000, y: 30.0 }, { x: 1398898800000, y: 30.0 }, { x: 1398812400000, y: 30.0 }, { x: 1398726000000, y: 30.0 }, { x: 1398639600000, y: 30.0 }, { x: 1398380400000, y: 30.0 }, { x: 1398294000000, y: 30.0 }, { x: 1398207600000, y: 30.0 }, { x: 1398121200000, y: 30.0 }, { x: 1397948400000, y: 30.0 }, { x: 1397775600000, y: 30.0 }, { x: 1397689200000, y: 30.0 }, { x: 1397602800000, y: 30.0 }, { x: 1397516400000, y: 30.0 }, { x: 1397430000000, y: 30.0 }, { x: 1397170800000, y: 30.0 }, { x: 1397084400000, y: 30.0 }, { x: 1396998000000, y: 30.0 }, { x: 1396911600000, y: 30.0 }, { x: 1396825200000, y: 30.0 }, { x: 1396566000000, y: 30.0 }, { x: 1396479600000, y: 30.0 }, { x: 1396393200000, y: 30.0 }, { x: 1396306800000, y: 30.0 }, { x: 1396220400000, y: 30.0 }, { x: 1395964800000, y: 30.0 }, { x: 1395878400000, y: 30.0 }, { x: 1395792000000, y: 30.0 }, { x: 1395705600000, y: 30.0 }, { x: 1395619200000, y: 30.0 }, { x: 1395360000000, y: 30.0 }, { x: 1395273600000, y: 30.0 }, { x: 1395187200000, y: 30.0 }, { x: 1395100800000, y: 30.0 }, { x: 1395014400000, y: 30.0 }, { x: 1394755200000, y: 30.0 }, { x: 1394668800000, y: 30.0 }, { x: 1394582400000, y: 30.0 }, { x: 1394496000000, y: 30.0 }, { x: 1394323200000, y: 30.0 }, { x: 1394150400000, y: 30.0 }, { x: 1394064000000, y: 30.0 }, { x: 1393977600000, y: 30.0 }, { x: 1393891200000, y: 30.0 }, { x: 1393804800000, y: 30.0 }, { x: 1393718400000, y: 30.0 }, { x: 1393632000000, y: 30.0 }, { x: 1393545600000, y: 30.0 }, { x: 1393459200000, y: 30.0 }, { x: 1393372800000, y: 30.0 }, { x: 1393286400000, y: 30.0 }, { x: 1393200000000, y: 30.0 }, { x: 1392940800000, y: 30.0 }, { x: 1392854400000, y: 30.0 }, { x: 1392768000000, y: 30.0 }, { x: 1392681600000, y: 30.0 }, { x: 1392595200000, y: 30.0 }, { x: 1392336000000, y: 30.0 }, { x: 1392249600000, y: 30.0 }, { x: 1392163200000, y: 30.0 }, { x: 1392076800000, y: 30.0 }, { x: 1391990400000, y: 30.0 }, { x: 1391731200000, y: 30.0 }, { x: 1391644800000, y: 30.0 }, { x: 1391558400000, y: 30.0 }, { x: 1391472000000, y: 30.0 }, { x: 1391385600000, y: 30.0 }, { x: 1391299200000, y: 30.0 }, { x: 1391212800000, y: 30.0 }, { x: 1391126400000, y: 30.0 }, { x: 1391040000000, y: 30.0 }, { x: 1390953600000, y: 30.0 }, { x: 1390867200000, y: 30.0 }, { x: 1390780800000, y: 30.0 }, { x: 1390521600000, y: 30.0 }, { x: 1390435200000, y: 30.0 }, { x: 1390348800000, y: 30.0 }, { x: 1390262400000, y: 30.0 }, { x: 1390176000000, y: 30.0 }, { x: 1389916800000, y: 30.0 }, { x: 1389830400000, y: 30.0 }, { x: 1389744000000, y: 30.0 }, { x: 1389657600000, y: 30.0 }, { x: 1389571200000, y: 30.0 }, { x: 1389312000000, y: 30.0 }, { x: 1389225600000, y: 30.0 }, { x: 1389139200000, y: 30.0 }, { x: 1389052800000, y: 30.0 }, { x: 1388966400000, y: 30.0 }, { x: 1388707200000, y: 30.0 }, { x: 1388534400000, y: 30.0 }] }, { key: "60 Day", color: "#00ffaa", values: [{ x: 1419984000000, y: 60.0 }, { x: 1418342400000, y: 60.0 }, { x: 1417737600000, y: 60.0 }, { x: 1417132800000, y: 60.0 }, { x: 1416873600000, y: 60.0 }, { x: 1416787200000, y: 60.0 }, { x: 1416528000000, y: 60.0 }, { x: 1416441600000, y: 60.0 }, { x: 1416355200000, y: 60.0 }, { x: 1416268800000, y: 60.0 }, { x: 1416182400000, y: 60.0 }, { x: 1415923200000, y: 60.0 }, { x: 1415836800000, y: 60.0 }, { x: 1415750400000, y: 60.0 }, { x: 1415664000000, y: 60.0 }, { x: 1415577600000, y: 60.0 }, { x: 1415318400000, y: 60.0 }, { x: 1415232000000, y: 60.0 }, { x: 1415145600000, y: 60.0 }, { x: 1415059200000, y: 60.0 }, { x: 1414972800000, y: 60.0 }, { x: 1414713600000, y: 60.0 }, { x: 1414627200000, y: 60.0 }, { x: 1414540800000, y: 60.0 }, { x: 1414454400000, y: 60.0 }, { x: 1414368000000, y: 60.0 }, { x: 1414105200000, y: 60.0 }, { x: 1414018800000, y: 60.0 }, { x: 1413932400000, y: 60.0 }, { x: 1413846000000, y: 60.0 }, { x: 1413759600000, y: 60.0 }, { x: 1413500400000, y: 60.0 }, { x: 1413414000000, y: 60.0 }, { x: 1413327600000, y: 60.0 }, { x: 1413241200000, y: 60.0 }, { x: 1413154800000, y: 60.0 }, { x: 1412895600000, y: 60.0 }, { x: 1412809200000, y: 60.0 }, { x: 1412722800000, y: 60.0 }, { x: 1412636400000, y: 60.0 }, { x: 1412550000000, y: 60.0 }, { x: 1412290800000, y: 60.0 }, { x: 1412204400000, y: 60.0 }, { x: 1412118000000, y: 60.0 }, { x: 1412031600000, y: 60.0 }, { x: 1411945200000, y: 60.0 }, { x: 1411686000000, y: 60.0 }, { x: 1411599600000, y: 60.0 }, { x: 1411513200000, y: 60.0 }, { x: 1411426800000, y: 60.0 }, { x: 1411340400000, y: 60.0 }, { x: 1411081200000, y: 60.0 }, { x: 1410994800000, y: 60.0 }, { x: 1410908400000, y: 60.0 }, { x: 1410822000000, y: 60.0 }, { x: 1410735600000, y: 60.0 }, { x: 1410476400000, y: 60.0 }, { x: 1410390000000, y: 60.0 }, { x: 1410303600000, y: 60.0 }, { x: 1410217200000, y: 60.0 }, { x: 1410130800000, y: 60.0 }, { x: 1409871600000, y: 60.0 }, { x: 1409785200000, y: 60.0 }, { x: 1409698800000, y: 60.0 }, { x: 1409612400000, y: 60.0 }, { x: 1409526000000, y: 60.0 }, { x: 1409266800000, y: 60.0 }, { x: 1409180400000, y: 60.0 }, { x: 1409094000000, y: 60.0 }, { x: 1409007600000, y: 60.0 }, { x: 1408662000000, y: 60.0 }, { x: 1408575600000, y: 60.0 }, { x: 1408489200000, y: 60.0 }, { x: 1408402800000, y: 60.0 }, { x: 1408316400000, y: 60.0 }, { x: 1408057200000, y: 60.0 }, { x: 1407970800000, y: 60.0 }, { x: 1407884400000, y: 60.0 }, { x: 1407798000000, y: 60.0 }, { x: 1407711600000, y: 60.0 }, { x: 1407452400000, y: 60.0 }, { x: 1407366000000, y: 60.0 }, { x: 1407279600000, y: 60.0 }, { x: 1407193200000, y: 60.0 }, { x: 1407106800000, y: 60.0 }, { x: 1406847600000, y: 60.0 }, { x: 1406761200000, y: 60.0 }, { x: 1406674800000, y: 60.0 }, { x: 1406588400000, y: 60.0 }, { x: 1406502000000, y: 60.0 }, { x: 1406242800000, y: 60.0 }, { x: 1406156400000, y: 60.0 }, { x: 1406070000000, y: 60.0 }, { x: 1405983600000, y: 60.0 }, { x: 1405897200000, y: 60.0 }, { x: 1405638000000, y: 60.0 }, { x: 1405551600000, y: 60.0 }, { x: 1405465200000, y: 60.0 }, { x: 1405378800000, y: 60.0 }, { x: 1405292400000, y: 60.0 }, { x: 1405033200000, y: 60.0 }, { x: 1404946800000, y: 60.0 }, { x: 1404860400000, y: 60.0 }, { x: 1404774000000, y: 60.0 }, { x: 1404687600000, y: 60.0 }, { x: 1404428400000, y: 60.0 }, { x: 1404342000000, y: 60.0 }, { x: 1404255600000, y: 60.0 }, { x: 1404169200000, y: 60.0 }, { x: 1404082800000, y: 60.0 }, { x: 1403823600000, y: 60.0 }, { x: 1403737200000, y: 60.0 }, { x: 1403650800000, y: 60.0 }, { x: 1403564400000, y: 60.0 }, { x: 1403478000000, y: 60.0 }, { x: 1403218800000, y: 60.0 }, { x: 1403132400000, y: 60.0 }, { x: 1403046000000, y: 60.0 }, { x: 1402959600000, y: 60.0 }, { x: 1402873200000, y: 60.0 }, { x: 1402614000000, y: 60.0 }, { x: 1402527600000, y: 60.0 }, { x: 1402441200000, y: 60.0 }, { x: 1402354800000, y: 60.0 }, { x: 1402268400000, y: 60.0 }, { x: 1402095600000, y: 60.0 }, { x: 1402009200000, y: 60.0 }, { x: 1401922800000, y: 60.0 }, { x: 1401836400000, y: 60.0 }, { x: 1401750000000, y: 60.0 }, { x: 1401663600000, y: 60.0 }, { x: 1401490800000, y: 60.0 }, { x: 1401404400000, y: 60.0 }, { x: 1401318000000, y: 60.0 }, { x: 1401231600000, y: 60.0 }, { x: 1401145200000, y: 60.0 }, { x: 1400799600000, y: 60.0 }, { x: 1400713200000, y: 60.0 }, { x: 1400626800000, y: 60.0 }, { x: 1400540400000, y: 60.0 }, { x: 1400454000000, y: 60.0 }, { x: 1400194800000, y: 60.0 }, { x: 1400108400000, y: 60.0 }, { x: 1400022000000, y: 60.0 }, { x: 1399935600000, y: 60.0 }, { x: 1399849200000, y: 60.0 }, { x: 1399590000000, y: 60.0 }, { x: 1399503600000, y: 60.0 }, { x: 1399417200000, y: 60.0 }, { x: 1399330800000, y: 60.0 }, { x: 1398985200000, y: 60.0 }, { x: 1398898800000, y: 60.0 }, { x: 1398812400000, y: 60.0 }, { x: 1398726000000, y: 60.0 }, { x: 1398639600000, y: 60.0 }, { x: 1398380400000, y: 60.0 }, { x: 1398294000000, y: 60.0 }, { x: 1398207600000, y: 60.0 }, { x: 1398121200000, y: 60.0 }, { x: 1397948400000, y: 60.0 }, { x: 1397775600000, y: 60.0 }, { x: 1397689200000, y: 60.0 }, { x: 1397602800000, y: 60.0 }, { x: 1397516400000, y: 60.0 }, { x: 1397430000000, y: 60.0 }, { x: 1397170800000, y: 60.0 }, { x: 1397084400000, y: 60.0 }, { x: 1396998000000, y: 60.0 }, { x: 1396911600000, y: 60.0 }, { x: 1396825200000, y: 60.0 }, { x: 1396566000000, y: 60.0 }, { x: 1396479600000, y: 60.0 }, { x: 1396393200000, y: 60.0 }, { x: 1396306800000, y: 60.0 }, { x: 1396220400000, y: 60.0 }, { x: 1395964800000, y: 60.0 }, { x: 1395878400000, y: 60.0 }, { x: 1395792000000, y: 60.0 }, { x: 1395705600000, y: 60.0 }, { x: 1395619200000, y: 60.0 }, { x: 1395360000000, y: 60.0 }, { x: 1395273600000, y: 60.0 }, { x: 1395187200000, y: 60.0 }, { x: 1395100800000, y: 60.0 }, { x: 1395014400000, y: 60.0 }, { x: 1394755200000, y: 60.0 }, { x: 1394668800000, y: 60.0 }, { x: 1394582400000, y: 60.0 }, { x: 1394496000000, y: 60.0 }, { x: 1394323200000, y: 60.0 }, { x: 1394150400000, y: 60.0 }, { x: 1394064000000, y: 60.0 }, { x: 1393977600000, y: 60.0 }, { x: 1393891200000, y: 60.0 }, { x: 1393804800000, y: 60.0 }, { x: 1393718400000, y: 60.0 }, { x: 1393632000000, y: 60.0 }, { x: 1393545600000, y: 60.0 }, { x: 1393459200000, y: 60.0 }, { x: 1393372800000, y: 60.0 }, { x: 1393286400000, y: 60.0 }, { x: 1393200000000, y: 60.0 }, { x: 1392940800000, y: 60.0 }, { x: 1392854400000, y: 60.0 }, { x: 1392768000000, y: 60.0 }, { x: 1392681600000, y: 60.0 }, { x: 1392595200000, y: 60.0 }, { x: 1392336000000, y: 60.0 }, { x: 1392249600000, y: 60.0 }, { x: 1392163200000, y: 60.0 }, { x: 1392076800000, y: 60.0 }, { x: 1391990400000, y: 60.0 }, { x: 1391731200000, y: 60.0 }, { x: 1391644800000, y: 60.0 }, { x: 1391558400000, y: 60.0 }, { x: 1391472000000, y: 60.0 }, { x: 1391385600000, y: 60.0 }, { x: 1391299200000, y: 60.0 }, { x: 1391212800000, y: 60.0 }, { x: 1391126400000, y: 60.0 }, { x: 1391040000000, y: 60.0 }, { x: 1390953600000, y: 60.0 }, { x: 1390867200000, y: 60.0 }, { x: 1390780800000, y: 60.0 }, { x: 1390521600000, y: 60.0 }, { x: 1390435200000, y: 60.0 }, { x: 1390348800000, y: 60.0 }, { x: 1390262400000, y: 60.0 }, { x: 1390176000000, y: 60.0 }, { x: 1389916800000, y: 60.0 }, { x: 1389830400000, y: 60.0 }, { x: 1389744000000, y: 60.0 }, { x: 1389657600000, y: 60.0 }, { x: 1389571200000, y: 60.0 }, { x: 1389312000000, y: 60.0 }, { x: 1389225600000, y: 60.0 }, { x: 1389139200000, y: 60.0 }, { x: 1389052800000, y: 60.0 }, { x: 1388966400000, y: 60.0 }, { x: 1388707200000, y: 60.0 }, { x: 1388534400000, y: 60.0 }] }, { key: "90 Day", color: "#aa00ff", values: [{ x: 1419984000000, y: 90.0 }, { x: 1418342400000, y: 90.0 }, { x: 1417737600000, y: 90.0 }, { x: 1417132800000, y: 90.0 }, { x: 1416873600000, y: 90.0 }, { x: 1416787200000, y: 90.0 }, { x: 1416528000000, y: 90.0 }, { x: 1416441600000, y: 90.0 }, { x: 1416355200000, y: 90.0 }, { x: 1416268800000, y: 90.0 }, { x: 1416182400000, y: 90.0 }, { x: 1415923200000, y: 90.0 }, { x: 1415836800000, y: 90.0 }, { x: 1415750400000, y: 90.0 }, { x: 1415664000000, y: 90.0 }, { x: 1415577600000, y: 90.0 }, { x: 1415318400000, y: 90.0 }, { x: 1415232000000, y: 90.0 }, { x: 1415145600000, y: 90.0 }, { x: 1415059200000, y: 90.0 }, { x: 1414972800000, y: 90.0 }, { x: 1414713600000, y: 90.0 }, { x: 1414627200000, y: 90.0 }, { x: 1414540800000, y: 90.0 }, { x: 1414454400000, y: 90.0 }, { x: 1414368000000, y: 90.0 }, { x: 1414105200000, y: 90.0 }, { x: 1414018800000, y: 90.0 }, { x: 1413932400000, y: 90.0 }, { x: 1413846000000, y: 90.0 }, { x: 1413759600000, y: 90.0 }, { x: 1413500400000, y: 90.0 }, { x: 1413414000000, y: 90.0 }, { x: 1413327600000, y: 90.0 }, { x: 1413241200000, y: 90.0 }, { x: 1413154800000, y: 90.0 }, { x: 1412895600000, y: 90.0 }, { x: 1412809200000, y: 90.0 }, { x: 1412722800000, y: 90.0 }, { x: 1412636400000, y: 90.0 }, { x: 1412550000000, y: 90.0 }, { x: 1412290800000, y: 90.0 }, { x: 1412204400000, y: 90.0 }, { x: 1412118000000, y: 90.0 }, { x: 1412031600000, y: 90.0 }, { x: 1411945200000, y: 90.0 }, { x: 1411686000000, y: 90.0 }, { x: 1411599600000, y: 90.0 }, { x: 1411513200000, y: 90.0 }, { x: 1411426800000, y: 90.0 }, { x: 1411340400000, y: 90.0 }, { x: 1411081200000, y: 90.0 }, { x: 1410994800000, y: 90.0 }, { x: 1410908400000, y: 90.0 }, { x: 1410822000000, y: 90.0 }, { x: 1410735600000, y: 90.0 }, { x: 1410476400000, y: 90.0 }, { x: 1410390000000, y: 90.0 }, { x: 1410303600000, y: 90.0 }, { x: 1410217200000, y: 90.0 }, { x: 1410130800000, y: 90.0 }, { x: 1409871600000, y: 90.0 }, { x: 1409785200000, y: 90.0 }, { x: 1409698800000, y: 90.0 }, { x: 1409612400000, y: 90.0 }, { x: 1409526000000, y: 90.0 }, { x: 1409266800000, y: 90.0 }, { x: 1409180400000, y: 90.0 }, { x: 1409094000000, y: 90.0 }, { x: 1409007600000, y: 90.0 }, { x: 1408662000000, y: 90.0 }, { x: 1408575600000, y: 90.0 }, { x: 1408489200000, y: 90.0 }, { x: 1408402800000, y: 90.0 }, { x: 1408316400000, y: 90.0 }, { x: 1408057200000, y: 90.0 }, { x: 1407970800000, y: 90.0 }, { x: 1407884400000, y: 90.0 }, { x: 1407798000000, y: 90.0 }, { x: 1407711600000, y: 90.0 }, { x: 1407452400000, y: 90.0 }, { x: 1407366000000, y: 90.0 }, { x: 1407279600000, y: 90.0 }, { x: 1407193200000, y: 90.0 }, { x: 1407106800000, y: 90.0 }, { x: 1406847600000, y: 90.0 }, { x: 1406761200000, y: 90.0 }, { x: 1406674800000, y: 90.0 }, { x: 1406588400000, y: 90.0 }, { x: 1406502000000, y: 90.0 }, { x: 1406242800000, y: 90.0 }, { x: 1406156400000, y: 90.0 }, { x: 1406070000000, y: 90.0 }, { x: 1405983600000, y: 90.0 }, { x: 1405897200000, y: 90.0 }, { x: 1405638000000, y: 90.0 }, { x: 1405551600000, y: 90.0 }, { x: 1405465200000, y: 90.0 }, { x: 1405378800000, y: 90.0 }, { x: 1405292400000, y: 90.0 }, { x: 1405033200000, y: 90.0 }, { x: 1404946800000, y: 90.0 }, { x: 1404860400000, y: 90.0 }, { x: 1404774000000, y: 90.0 }, { x: 1404687600000, y: 90.0 }, { x: 1404428400000, y: 90.0 }, { x: 1404342000000, y: 90.0 }, { x: 1404255600000, y: 90.0 }, { x: 1404169200000, y: 90.0 }, { x: 1404082800000, y: 90.0 }, { x: 1403823600000, y: 90.0 }, { x: 1403737200000, y: 90.0 }, { x: 1403650800000, y: 90.0 }, { x: 1403564400000, y: 90.0 }, { x: 1403478000000, y: 90.0 }, { x: 1403218800000, y: 90.0 }, { x: 1403132400000, y: 90.0 }, { x: 1403046000000, y: 90.0 }, { x: 1402959600000, y: 90.0 }, { x: 1402873200000, y: 90.0 }, { x: 1402614000000, y: 90.0 }, { x: 1402527600000, y: 90.0 }, { x: 1402441200000, y: 90.0 }, { x: 1402354800000, y: 90.0 }, { x: 1402268400000, y: 90.0 }, { x: 1402095600000, y: 90.0 }, { x: 1402009200000, y: 90.0 }, { x: 1401922800000, y: 90.0 }, { x: 1401836400000, y: 90.0 }, { x: 1401750000000, y: 90.0 }, { x: 1401663600000, y: 90.0 }, { x: 1401490800000, y: 90.0 }, { x: 1401404400000, y: 90.0 }, { x: 1401318000000, y: 90.0 }, { x: 1401231600000, y: 90.0 }, { x: 1401145200000, y: 90.0 }, { x: 1400799600000, y: 90.0 }, { x: 1400713200000, y: 90.0 }, { x: 1400626800000, y: 90.0 }, { x: 1400540400000, y: 90.0 }, { x: 1400454000000, y: 90.0 }, { x: 1400194800000, y: 90.0 }, { x: 1400108400000, y: 90.0 }, { x: 1400022000000, y: 90.0 }, { x: 1399935600000, y: 90.0 }, { x: 1399849200000, y: 90.0 }, { x: 1399590000000, y: 90.0 }, { x: 1399503600000, y: 90.0 }, { x: 1399417200000, y: 90.0 }, { x: 1399330800000, y: 90.0 }, { x: 1398985200000, y: 90.0 }, { x: 1398898800000, y: 90.0 }, { x: 1398812400000, y: 90.0 }, { x: 1398726000000, y: 90.0 }, { x: 1398639600000, y: 90.0 }, { x: 1398380400000, y: 90.0 }, { x: 1398294000000, y: 90.0 }, { x: 1398207600000, y: 90.0 }, { x: 1398121200000, y: 90.0 }, { x: 1397948400000, y: 90.0 }, { x: 1397775600000, y: 90.0 }, { x: 1397689200000, y: 90.0 }, { x: 1397602800000, y: 90.0 }, { x: 1397516400000, y: 90.0 }, { x: 1397430000000, y: 90.0 }, { x: 1397170800000, y: 90.0 }, { x: 1397084400000, y: 90.0 }, { x: 1396998000000, y: 90.0 }, { x: 1396911600000, y: 90.0 }, { x: 1396825200000, y: 90.0 }, { x: 1396566000000, y: 90.0 }, { x: 1396479600000, y: 90.0 }, { x: 1396393200000, y: 90.0 }, { x: 1396306800000, y: 90.0 }, { x: 1396220400000, y: 90.0 }, { x: 1395964800000, y: 90.0 }, { x: 1395878400000, y: 90.0 }, { x: 1395792000000, y: 90.0 }, { x: 1395705600000, y: 90.0 }, { x: 1395619200000, y: 90.0 }, { x: 1395360000000, y: 90.0 }, { x: 1395273600000, y: 90.0 }, { x: 1395187200000, y: 90.0 }, { x: 1395100800000, y: 90.0 }, { x: 1395014400000, y: 90.0 }, { x: 1394755200000, y: 90.0 }, { x: 1394668800000, y: 90.0 }, { x: 1394582400000, y: 90.0 }, { x: 1394496000000, y: 90.0 }, { x: 1394323200000, y: 90.0 }, { x: 1394150400000, y: 90.0 }, { x: 1394064000000, y: 90.0 }, { x: 1393977600000, y: 90.0 }, { x: 1393891200000, y: 90.0 }, { x: 1393804800000, y: 90.0 }, { x: 1393718400000, y: 90.0 }, { x: 1393632000000, y: 90.0 }, { x: 1393545600000, y: 90.0 }, { x: 1393459200000, y: 90.0 }, { x: 1393372800000, y: 90.0 }, { x: 1393286400000, y: 90.0 }, { x: 1393200000000, y: 90.0 }, { x: 1392940800000, y: 90.0 }, { x: 1392854400000, y: 90.0 }, { x: 1392768000000, y: 90.0 }, { x: 1392681600000, y: 90.0 }, { x: 1392595200000, y: 90.0 }, { x: 1392336000000, y: 90.0 }, { x: 1392249600000, y: 90.0 }, { x: 1392163200000, y: 90.0 }, { x: 1392076800000, y: 90.0 }, { x: 1391990400000, y: 90.0 }, { x: 1391731200000, y: 90.0 }, { x: 1391644800000, y: 90.0 }, { x: 1391558400000, y: 90.0 }, { x: 1391472000000, y: 90.0 }, { x: 1391385600000, y: 90.0 }, { x: 1391299200000, y: 90.0 }, { x: 1391212800000, y: 90.0 }, { x: 1391126400000, y: 90.0 }, { x: 1391040000000, y: 90.0 }, { x: 1390953600000, y: 90.0 }, { x: 1390867200000, y: 90.0 }, { x: 1390780800000, y: 90.0 }, { x: 1390521600000, y: 90.0 }, { x: 1390435200000, y: 90.0 }, { x: 1390348800000, y: 90.0 }, { x: 1390262400000, y: 90.0 }, { x: 1390176000000, y: 90.0 }, { x: 1389916800000, y: 90.0 }, { x: 1389830400000, y: 90.0 }, { x: 1389744000000, y: 90.0 }, { x: 1389657600000, y: 90.0 }, { x: 1389571200000, y: 90.0 }, { x: 1389312000000, y: 90.0 }, { x: 1389225600000, y: 90.0 }, { x: 1389139200000, y: 90.0 }, { x: 1389052800000, y: 90.0 }, { x: 1388966400000, y: 90.0 }, { x: 1388707200000, y: 90.0 }, { x: 1388534400000, y: 90.0 }] }]) //Attach data to the <svg> element.
.transition().duration(500).call(chart); //Define transition and pass the d3.selection to our lineChart.
If unclear, my question is: How can I load an NVD3 Line Chart using AJAX? (without these problems) Many thanks in advance for any suggestions/assistance you can provide.
EDIT 2: New Code following answer + example of working hardcoded JSON
d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (data) {
// Renders a line chart
nv.addGraph(function () {
var chart = nv.models.lineChart()
.options({
margin: { left: 10, bottom: 10 },
x: function (d, i) { return i },
showXAxis: true,
showYAxis: true,
tooltips: true,
x: function (d, i) { return i },
transitionDuration: 500
});
chart.useInteractiveGuideline(true);
chart.xAxis.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d));
});
chart.yAxis
.axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
//.tickFormat(d3.format("d")); //Set Y-Axis label formatting.
d3.select('#nvd3-line svg') //Select the <svg> element you want to render the chart in.
.datum([{
"key": "30 Day",
"values": [{
"x": 1417132800000,
"y": 35
}, {
"x": 1417737600000,
"y": 30
}, {
"x": 1418342400000,
"y": 40
}, {
"x": 1419984000000,
"y": 50
}]
}, {
"key": "60 Day",
"values": [{
"x": 1417132800000,
"y": 40
}, {
"x": 1417737600000,
"y": 50
}, {
"x": 1418342400000,
"y": 45
}, {
"x": 1419984000000,
"y": 40
}]
}, {
"key": "90 Day",
"values": [{
"x": 1417132800000,
"y": 50
}, {
"x": 1417737600000,
"y": 70
}, {
"x": 1418342400000,
"y": 50
}, {
"x": 1419984000000,
"y": 30
}]
}]) // WORKING - NOT AJAX //Populate the <svg> element with chart data...
//.datum(data) // NOT WORKING - AJAX //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
// THIS CODE ONLY NEEDS TO BE INITIATED ONCE
nv.utils.windowResize(chart.update);
nv.utils.windowResize(function () { d3.select('#nvd3-line svg').call(chart) });
chart.dispatch.on('stateChange', function (e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
});
