AmChartsデータ入力テーブルと日付解析が機能しない

Question

AmChartsを使用してテーブルからデータを受け取り、日付値と数値を入力できるグラフを作成しようとしています。テーブルに行を追加したり削除したりすることができます。私は、テーブル内の日付を入力してください。このコードは、私にこのような何かに見える出力を与える

<script src="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
<div id="chartdiv" style="width: 100%; height: 450px;"></div> 
<div id="data-table"> 
<div class="data-row"> 
    <input class="data-cell data-category" value="06/16/2016" type="date" /> 
    <input class="data-cell data-value" value="4000" type="number" step="10" /> 
    <input class="data-button delete-button" type="button" value="X" /> 
</div> 
<div class="data-row"> 
    <input class="data-cell data-category" value="07/16/2016" type="date" /> 
    <input class="data-cell data-value" value="1882" type="number" step="10" /> 
    <input class="data-button delete-button" type="button" value="X" /> 
</div> 
<div class="data-row"> 
    <input class="data-cell data-category" value="08/16/2016" type="date" /> 
    <input class="data-cell data-value" value="1809" type="number" step="10" /> 
    <input class="data-button delete-button" type="button" value="X" /> 
</div> 
<div class="data-row"> 
    <input class="data-cell data-category" value="09/26/2016" type="date" /> 
    <input class="data-cell data-value" value="1322" type="number" step="10" /> 
    <input class="data-button delete-button" type="button" value="X" /> 
</div> 
<div class="data-row"> 
    <input class="data-cell data-category" value="10/26/2016" type="date" /> 
    <input class="data-cell data-value" value="1122" type="number" step="10" /> 
    <input class="data-button delete-button" type="button" value="X" /> 
</div> 
</div> 
<br /> 
<input type="button" value="Add Row" onclick="addRow()" class="data-button" id="add-row" /> 

、また in which the table date values aren't displayed on the table, but rather the default mm/dd/yyyy is shown instead.

、関係なく、私が入力した内容、日付、グラフチャート値1901年7月31日の日付に、私はAmChartsのデフォルトの日付値と仮定しています。これはグラフのコードです。

var chart; 

AmCharts.ready(function() { 
// SERIAL CHART 
chart = new AmCharts.AmSerialChart(); 
chart.dataProvider = generateChartData(); 
chart.categoryField = "date"; 
chart.marginRight = 0; 
chart.marginTop = 0; 
chart.autoMarginOffset = 0; 
chart.depth3D = 0; 
chart.angle = 0; 
chart.dataDateFormat = "MM-DD-YYYY"; 
chart.theme = "patterns"; 

// AXES 
// category 
var categoryAxis = chart.categoryAxis; 
categoryAxis.labelRotation = 60; 
categoryAxis.gridPosition = "start"; 
categoryAxis.dashLength = 1; 
categoryAxis.parseDates = true; 
categoryAxis.minorGridEnabled = true; 

// value 
var valueAxis = new AmCharts.ValueAxis(); 
valueAxis.title; 
valueAxis.dashLength = 10; 
chart.addValueAxis(valueAxis); 

// GRAPH    
var graph = new AmCharts.AmGraph(); 
graph.valueField = "value"; 
graph.colorField = "color"; 
graph.balloonText = "[[category]]: [[value]]"; 
graph.type = "smoothedLine"; 
graph.lineAlpha = 2; 
graph.fillAlphas = 0; 
chart.addGraph(graph); 

// WRITE 
chart.write("chartdiv"); 
}); 

function addRow() { 
jQuery('<div class="data-row"><input class="data-cell data-category" type="date"/><input class="data-cell data-value" type="number" step="10"/><input class="data-button delete-button" type="button" value="X"/></div>').appendTo('#data-table').each(function() {initRowEvents(jQuery(this));}); 
} 

function generateChartData() { 
var chartData = []; 
jQuery('.data-row').each(function() { 
    var date = jQuery(this).find('.data-category').val(); 
    var value = jQuery(this).find('.data-value').val(); 
    if (date != '') { 
     chartData.push({ 
      date: date, 
      value: value 
     }); 
    } 
}); 
return chartData; 
} 

function initRowEvents(scope) { 
scope.find('.data-cell') 
    .attr('title', 'Click to edit') 
    .on('keypress keyup change', function() { 
     // re-generate chart data and reload it in chart 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    }).end().find('.delete-button').click(function() { 
     // remove the row 
     $(this).parents('.data-row').remove(); 

     // re-generate chart data and reload it in chart 
     chart.dataProvider = generateChartData(); 
     chart.validateData(); 
    }); 
} 

jQuery(function() { 
// initialize the table 
initRowEvents(jQuery(document)); 
}); 

この問題に加えて、リンクされたイメージのテーブルに行を追加する際にも問題があります。 "行の追加"ボタンは機能しませんが、行を削除する "X"ボタンは機能します。 jsfiddleのコードが公開されていない私的なものであるため、jsfiddleの問題である可能性があります。

私が提供したコードはthis jsfiddle.

編集のオフに基づいています。私は、trueにequalSpacingを設定したが、後に来る日付が後にグラフ化されている一方で、今最も早い日付は、7月31日、1901でグラフ化されます私の問題を部分的に解決する7月31日ですが、それだけではありません。

Answer 1

「行の追加」ボタンの問題ではなく、日付解析の問題を解決できました。要するに、私がしたことは、YYYY-MM-DD形式に間違って入力されたため、テーブルのHTML5日付値形式を調整し、グラフのdataDateFormatをYYYY-MM-DDに変更して動作させたデフォルトの日付の代わりに正しい日付を解析します。