Live-edit chart using HTML table

by buggermama

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 355px;"></div>
<div id="data-table">
    <div class="data-row">
        <input class="data-cell data-category" value="USA" />
        <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="China" />
        <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="Japan" />
        <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="Germany" />
        <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="UK" />
        <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" />

CSS

body {
    font-size: 12px;
    font-family: Verdana;
}
#data-table {
    border: 1px solid #ccc;
    display: table;
    padding: 3px;
}
#data-table .data-row {
    display: table-row;
}
#data-table .data-cell {
    padding: 1px 5px;
    border: 1px dotted #ccc;
    margin: 3px;
    min-height: 25px;
    min-width: 100px;
    cursor: pointer;
}
#data-table .data-cell input {
    max-width: 100px;
}
.data-button {
    padding: 5px;
}
}

JavaScript

var chart;
AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = getData();
    chart.categoryField = "time";
    chart.marginRight = 0;
    chart.marginTop = 50;
    chart.autoMarginOffset = 0;
    // the following two lines makes chart 3D
//    chart.depth3D = 20;
  ///  chart.angle = 40;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 90;
    categoryAxis.dashLength = 5;
    categoryAxis.gridPosition = "start";
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "hh";
    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.title = "value";
    valueAxis.dashLength = 5;
    chart.addValueAxis(valueAxis);
    
    
   

    // GRAPH            
    var graph = new AmCharts.AmGraph();
    graph.valueField = "value";
    graph.colorField = "color";
    graph.balloonText = "[[category]]: [[value]]";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
   // graph.bullet = "round";
//graph.lineColor = "#8d1cc6";
   chart.addGraph(graph);
    
    var graph2 = new AmCharts.AmGraph();
    graph2.valueField = "value3";
//    graph2.colorField = "color";
    graph2.balloonText = "[[category]]: [[value]]";
    graph2.type = "line";
  // graph2.lineAlpha = 0;
    //graph2.fillAlphas = 1;
      //graph.fillAlphas = 1;
   // graph.bullet = "round";
graph2.lineColor = "#8d1cc6";
    chart.addGraph(graph2);

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

function addRow() {
    jQuery('<div class="data-row"><input class="data-cell data-category"/><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 getData() {
    
 return [{"time": "2006-04-05T00:27:00.000Z","value": "24.3411","value2": "21.3411","value3":...