JSFiddle - React, Tailwind, and code Playground

by ashleeeidson

HTML

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

JavaScript

var chart;

var chartData = [{
    CertifyNumber: "Certify 1",
    Correct: 2,
    Incorrect: 1,
    Time: 5},
{
    CertifyNumber: "Certify 2",
    Correct: 12,
    Incorrect: 8,
    Time: 5},                 
{
    CertifyNumber: "Certify 3",
    Correct: 18,
    Incorrect: 2,
    Time: 5}];

AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();    
    chart.autoMarginOffset = 0;
    chart.marginRight = 0;    
    chart.marginBottom = 5;
    chart.dataProvider = chartData;
    chart.categoryField = "CertifyNumber";
    chart.startDuration = 1;
    chart.rotate = false;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.gridPosition = "start";
    categoryAxis.axisColor = "#DADADA";
    categoryAxis.dashLength = 5;

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "regular"; //makes it a stacked bar chart
    valueAxis.dashLength = 5;
    valueAxis.axisAlpha = 0;
    valueAxis.position = "left"; //puts the axis labels on the left
    valueAxis.title = "Number of Answers";
    valueAxis.showLastLabel = false;
    chart.addValueAxis(valueAxis);

    // GRAPHS
    // Correct
    var graph1 = new AmCharts.AmGraph();
    graph1.type = "column";
    graph1.title = "Correct";
    graph1.valueField = "Correct";
    graph1.lineAlpha = 0;
    graph1.fillColors = "#ADD981";
    graph1.fillAlphas = 1;
    chart.addGraph(graph1);
    
    // Incorrect
    var graph1 = new AmCharts.AmGraph();
    graph1.type = "column";
    graph1.title = "Incorrect";
    graph1.valueField = "Incorrect";
    graph1.lineAlpha = 0;
    graph1.fillColors = "#1D7CF2";
    graph1.fillAlphas = 1;
    chart.addGraph(graph1);

    //// TO DO: Find a way to make the time axis not dependent on "Number of Answers"
    //// Time graph
    //var graph2 = new AmCharts.AmGraph();
    //graph2.type = "line";
    //graph2.title = "Total Time Taken";
    //graph2.valueField = "Time";
   ...