score:1

Accepted answer

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

score:0

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>

score:2

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


Related Query