CODEWITHSUNDEEP
javascriptjqueryhtmlamcharts
Sufi Iman
Sufi Iman

Reputation: 57

AmCharts Data Entry Table and Date Parsing Not Working

I'm trying to make a graph that accepts data from a table with AmCharts, through which users can enter a date value and a numerical value. Rows can be added and deleted from the table.

<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" />

This code gives me an output that looks something like this, in which the table date values aren't displayed on the table, but rather the default mm/dd/yyyy is shown instead.

In addition, when I do enter a date in the table, no matter what date I enter, the graph charts the value to a date of July 31, 1901, which I'm assuming is AmCharts' default date value. This is the code for the graph. 

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));
});

In addition to this issue, I also have trouble adding rows to the table in the linked image. The "Add Row" button doesn't work, but the "X" button that deletes the rows does. I feel like this may be an issue with jsfiddle, because my code on jsfiddle is private, and not public.

The code that I've provided is based off of this jsfiddle.

Edit: I set equalSpacing to true, but now the earliest date is graphed at July 31st, 1901, while the dates that come after are graphed after July 31, which partially solves my problem, but not entirely.

Upvotes: 0

Views: 466

Answers (1)

Sufi Iman
Sufi Iman

Reputation: 57

I was able to solve the date parsing issue, but not the "Add Row" button issue. In short, what I did was adjust the HTML5 date value format for my table, because it was entered incorrectly to YYYY-MM-DD format, and I changed the dataDateFormat of the chart to YYYY-MM-DD, which allowed it to work and parse the correct dates instead of the default date.

Upvotes: 0

Related Questions