I don't know If I have done anything wrong or if this is just an annoying bug.
I want to be able to have two charts on top of each other and have the 24-hour format
so the x-axis should start from 0 and go to 23:59
When I add one datapoint to the chart it works and it does not break. As soon as I add another datapoint it breaks.
If you look at the image the Monthly totals works, but as soon as I get the data2 info then some data points on the red line just start to break.
Also I don't know how to remove some of the labels since there are duplicates
Codesandbox link to bug
This is how my datapoints are
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: usageData,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
},
{
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
},
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
options: {
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
day: "MMM DD, YYYY",
month: "MMM",
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
},
};
AFA I see, there is a bug in the chart configuration. The options node it's wrong and it must be removed. This is the reason of the bug and why the scales are not what your are defining (see missing colors and correct position in your picture) and is using the defaults (linear ones).
let dailyGeneration = [
{ x: "00:01:00", y: 1 },
{ x: "00:10:00", y: 8 },
{ x: "00:16:00", y: 9 },
{ x: "00:21:00", y: 4 },
{ x: "00:53:00", y: 8 },
{ x: "01:01:00", y: 2 },
{ x: "01:03:10", y: 5 },
{ x: "01:11:01", y: 4 },
{ x: "01:21:20", y: 1 },
{ x: "02:12:00", y: 4 },
{ x: "03:00:00", y: 1 },
{ x: "04:00:00", y: 6 },
{ x: "05:00:00", y: 5 },
{ x: "06:00:00", y: 5 },
{ x: "07:00:00", y: 3 },
{ x: "08:00:00", y: 8 },
{ x: "09:00:00", y: 9 },
{ x: "10:00:00", y: 1 },
{ x: "11:00:00", y: 2 },
{ x: "12:00:00", y: 1.6 },
{ x: "13:00:00", y: 2.6 },
{ x: "14:00:00", y: 5.4 },
{ x: "15:00:00", y: 7.6 },
{ x: "16:00:00", y: 1.6 },
{ x: "16:01:00", y: 2.6 },
{ x: "16:20:00", y: 1.1 },
{ x: "17:00:00", y: 2.3 },
{ x: "18:00:00", y: 1.9 },
{ x: "19:00:00", y: 0.7 },
{ x: "20:00:00", y: 6 },
{ x: "21:00:00", y: 8 },
{ x: "22:00:00", y: 9 },
{ x: "23:00:00", y: 3.5 },
];
let montlyTotals = [
{ x: "00:01", y: 9 },
{ x: "01:00", y: 8 },
{ x: "02:00", y: 5 },
{ x: "03:00", y: 2.5 },
{ x: "04:00", y: 1.7 },
{ x: "05:00", y: 9.3 },
{ x: "06:00", y: 2.4 },
{ x: "07:00", y: 4.3 },
{ x: "08:00", y: 5.4 },
{ x: "09:00", y: 7.6 },
{ x: "10:00", y: 6.3 },
{ x: "11:00", y: 1.3 },
{ x: "12:00", y: 2.6 },
{ x: "13:00", y: 4.3 },
{ x: "14:00", y: 2.1 },
{ x: "15:00", y: 1.6 },
{ x: "16:00", y: 6 },
{ x: "17:00", y: 4 },
{ x: "18:00", y: 1 },
{ x: "19:00", y: 4.2 },
{ x: "20:00", y: 6.32 },
{ x: "21:00", y: 8.2 },
{ x: "22:00", y: 2.5 },
{ x: "23:00", y: 1.1 },
];
let dsMonthly = {
type: "line",
label: "Monthly Totals",
data: montlyTotals,
borderColor: "rgba(255,0,0,0.5)",
backgroundColor: "rgba(255,0,0,0.5)",
xAxisID: "monthly-x-axis",
yAxisID: "monthly-y-axis",
};
let yourData = {
datasets: [
{
type: "line",
label: "Daily Generation",
data: dailyGeneration,
borderColor: "rgba(0,0,255,1)",
xAxisID: "daily-x-axis",
yAxisID: "daily-y-axis",
}
],
};
const yourOptions = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
scales: {
"daily-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm",
},
tooltipFormat: "dddd, MMM DD, YYYY",
},
ticks: {
minRotation: 80,
maxRotation: 90,
color: "blue",
},
position: "bottom",
},
"monthly-x-axis": {
type: "time",
time: {
unit: "hour",
displayFormats: {
hour: "HH:mm"
},
tooltipFormat: "MMM, YYYY",
},
ticks: {
color: "green",
},
position: "bottom",
},
"daily-y-axis": {
position: "left",
title: {
display: true,
text: "kWh / day",
color: "blue",
},
ticks: {
color: "blue",
},
},
"monthly-y-axis": {
position: "right",
title: {
display: true,
text: "total kWh / month",
color: "green",
},
ticks: {
color: "green",
},
},
},
};
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'line',
data: yourData,
options: yourOptions
});
document.getElementById('month').addEventListener('click', function() {
myChart.data.datasets.push(dsMonthly);
myChart.update();
document.getElementById('month').disabled = true;
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
<button id="month">Add month dataset</button>
</body>
</html>
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;
});
});
Your JSON is invalid, although NVD3 likes it in a few different formats, the d3.json ajax call likes it in a specific way.
Your missing double quotation marks around your strings, if you format your JSON to look like the following, it will work when you pull it from your AJAX call.
Snippet of your JSON in the correct format -
[
{
"key": "30 Day",
"color": "#ffaa00",
"values": [
{
"x": 1419984000000,
"y": 30
},
{
"x": 1418342400000,
"y": 30
},
{
"x": 1417737600000,
"y": 30
},
{
"x": 1417132800000,
"y": 30
}
]
}
]
Result - Valid JSON
I have found a solution:
jQuery.parseJSON(myAjaxLoadedData);
It appears the issue with the ajax loaded data is that it was a string. I'm rather confused as I followed all examples I could find and they appeared to load it the same was as I was.
Here is my full working code:
// Load chart data
d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (error, myData) {
// 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
.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.
d3.select("svg") //Select the document's <svg> element
.datum(jQuery.parseJSON(myData)) //Attach data to the <svg> element.
.call(chart); //Define transition and pass the d3.selection to our lineChart.
// THIS CODE ONLY NEEDS TO BE INITIATED ONCE
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function () { d3.select('svg').call(chart); });
//chart.dispatch.on('stateChange', function (e) {
// nv.log('New State:', JSON.stringify(e));
return chart; //Must return the enclosed chart variable so the global rendering queue can store it.
//});
});
})();
});
Thanks Very Much to Engl12 for his effort towards this solution
Ok Please try this edited script to generate your graphs and grab JSON, it works for me with the JSON data from your JSFiddle.
d3.json('........php', 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('#chart1 svg') //Select the <svg> element you want to render the chart in.
.datum(data) //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('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
});
Call the chart in the html -
<table>
<tr>
<td id="chart1">
<svg></svg>
</td>
</tr>
</table>