JSFiddle - React, Tailwind, and code Playground

by fruitcake20

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<button id="btnPlus" type="button">+</button>
<button id="btnGet" type="button"  style="width:20%;">Show Graph </button>
<p style="margin-left:20px;">  Country</p>
<p style="margin-left:140px;margin-top:-33px;"> Population</p>
<div class="input">

</div>

JavaScript

var datax=[];
         var val1=null;
         var val2=null;
         var count=0;
$("#btnPlus").click(function(){

add_field();
});

$("#btnGet").click(function(){

 shout_content();
 
});





function add_field()
{

$(".input").append("<input type='text'><input type='number'><br>");

}

function shout_content()
{

count=0;
var zz =JSON.stringify(datax);
alert(zz);

datax=[];
$(".input").children("input").each(function(){
//alert($(this).val());
var array_input1 = {};

  if($.isNumeric($(this).val()))
    {
   		 count++;
       
       val2 =$(this).val();
       val2 =parseInt(val2);
       array_input1["name"] = val1;
       array_input1["data"] =[val2];
       array_input1["_colorIndex"] = count;
       var aa =JSON.stringify(array_input1);
     	 alert(aa);
       datax.push(array_input1);
       graph();
    }
    else
    {

     val1 =$(this).val();
 
    }
    

    





}

);
   

	

   
}

function graph()
{
$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Population'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {

            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: datax
        
    });
});
}