Live-edit chart using HTML table

by amcharts

HTML

<script src="http://www.amcharts.com/lib/amcharts.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 = generateChartData();
    chart.categoryField = "category";
    chart.marginRight = 0;
    chart.marginTop = 0;
    chart.autoMarginOffset = 0;
    // the following two lines makes chart 3D
    chart.depth3D = 20;
    chart.angle = 30;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 90;
    categoryAxis.dashLength = 5;
    categoryAxis.gridPosition = "start";

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.title = "Visitors";
    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;
    chart.addGraph(graph);

    // 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 generateChartData() {
    var chartData = [];
    jQuery('.data-row').each(function () {
        var category = jQuery(this).find('.data-category').val();
        var value = jQuery(this).find('.data-value').val();
        if (category != '') {
            chartData.push({
                category: category,
                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
           ...