d3 js basic line chart, data issues

Question

I have simple line chart . This doesn't display any line for some reason, however, I think that my data is ok. Why?

data = '[{"date":"18-Jun-14","amount":"5"},{"date":"19-Jul-14","amount":"30"},{"date":"18-Aug-14","amount":"138"},{"date":"18-Sep-14","amount":"110"},{"date":"18-Oct-14","amount":"217"},{"date":"18-Nov-14","amount":"342"}]';

Another problem is that commented data(below), I get from php-script I should change to appropriate format. Is this possible, or I should change php output?

/*data='[{"date":"2014-Jun-18","amount":"5"},{"date":"2014-Jul-18","amount":"30"},{"date":"2014-Aug-18","amount":"138"},{"date":"2014-Sep-18","amount":"110"},{"date":"2014-Oct-18","amount":"217"},{"date":"2014-Nov-18","amount":"342"}] ';*/

Answer 1

the problem lies in your date-formatting, try

var parseDate = d3.time.format("%d-%b-%y").parse;
root1.forEach(function (d) {
        d.date = parseDate(d.date);
        d.amount = +d.amount;
    });

you have to put this right before your scale-variable, otherwise it cannot use your data correctly.

d.amount = +d.amount;

is necessary to transform your values from string to integer.

for the second question, you can use this output all the same, just parse it change the parseDate to

var parseDate = d3.time.format("%Y-%b-%d").parse;

see http://jsfiddle.net/6Lxuh/4/ for the working example with the php-data