Entry Boxes

Allows users to enter date-based data and create a graph.

by Sufi K

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<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 src="https://www.amcharts.com/lib/3/themes/light.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>
<div id="chartdiv"></div>	
<br />
<div id="data-table">
    <tr>
        <td><input class="data-cell data-category" value="2016-06-16" type="date" /></td>
        <td><input class="data-cell data-value" value="4000" type="number" step="10" /></td>
        <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
     </tr>
    <tr>
        <td><input class="data-cell data-category" value="2016-07-16" type="date" /></td>
        <td><input class="data-cell data-value" value="1882" type="number" step="10" /></td>
        <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
     </tr>
    <tr>
        <td><input class="data-cell data-category" value="2016-08-16" type="date" /></td>
        <td><input class="data-cell data-value" value="1809" type="number" step="10" /></td>
        <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
      </tr>
    <tr>
        <td><input class="data-cell data-category" value="2016-09-16" type="date" /></td>
        <td><input class="data-cell data-value" value="1322" type="number" step="10" /></td>
        <td><input class="data-cell data-value2" value="4000" type="number" step="10" /></td>
    </tr>    
    <tr>
        <td><input class="data-cell data-category" value="2016-10-16" type="date" /></td>
        <td><input class="data-cell data-value" value="1122" type="number" step="10" /></td>
        <td><input...

CSS

body {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
}	
#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.theme = AmCharts.themes.light;

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.angle = 0;
    chart.dataDateFormat = "YYYY-MM-DD";
    chart.pathToImages = "https://www.amcharts.com/lib/3/images/";
    chart.fontFamily = "Helvetica";
    chart.fontSize = 14;

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

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

    // GRAPH            
    var graphEnrolled = new AmCharts.AmGraph();
    graphEnrolled.valueField = "value";
    graphEnrolled.colorField = "color";
    graphEnrolled.balloonText = "[[category]]: [[value]]";
    graphEnrolled.type = "smoothedLine";
    graphEnrolled.lineAlpha = 2;
    graphEnrolled.fillAlphas = 0;
    chart.addGraph(graphEnrolled);
    
    var scrollbar = new AmCharts.ChartScrollbar();
    scrollbar.scrollbarHeight = 5;
    chart.addChartScrollbar(scrollbar);
    scrollbar.graph = graphEnrolled;
    
    var cursor = new AmCharts.ChartCursor();
    cursor.cursorPosition = "mouse";
    cursor.pan = true;
    cursor.valueLineEnabled = true;
    cursor.valueLineBalloonEnabled = true;
    chart.addChartCursor(cursor);
    
    var graphExpected = new AmCharts.AmGraph();
    graphExpected.valueField = "value2";
    graphExpected.colorField = "color";
    graphExpected.balloonText = "[[category]]: [[value]]";
    graphExpected.type =...