JSFiddle - React, Tailwind, and code Playground

by georgoboy

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<div class="container">
	<div class="row">
		
		<div class="col-md-6"> 
		  <div class="form-group">
  			<label for="category-select"><b>choose data :</b></label>
  			<select class="form-control" id="dataSelect"> 
  			<option value="data1">Data 1</option>
  			<option value="data2">Data 2</option>   
  			<option value="data3">Data 3</option>
  			<option value="data4">Data 4</option>
   			</select>
	   	  </div>
		</div>

		 <div class="col-md-6">
      <div class="form-group">
  		<label for="category-select"><b>Choose status :</b></label>
  		<select class="form-control" id="statusSelect" onchange="change();" >   
  			<option value="success"> Success</option>
  			<option value="fail"> Fail</option> 
   		</select>
	   </div>
      </div>
	 </div>

	 <div class="row">
	 	<div id="chart"></div>
	 </div>
</div>

JavaScript

// console.log(allData);
	var weekData = [["sno","day","status","data1","data2","data3","data4"],["1","01-12-2020","success","23","66","53","34"],["2","02-12-2020","success","12","9","8","6"],["3","03-12-2020","success","10","11","16","13"],["4","04-12-2020","success","34","43","54","34"],["5","01-12-2020","fail","45","26","36","44"],["6","02-12-2020","fail","12","15","11","13"],["7","03-12-2020","fail","34","43","33","29"],["8","04-12-2020","fail","23","34","31","23"]] ;

	//console.log(weekData);

	function change()
	{
		var valStatus = document.getElementById("statusSelect");
		status = valStatus.value;
		//console.log(status);
		
		if(status == 'success')
		{
			const successValues = weekData.filter((x)=>x[2] === "success"); //New Cases
			console.log(successValues);
			return successValues;
		}

		else if(status == 'fail')
		{
			const failValues = weekData.filter((x)=>x[2] === "fail"); //New Cases
			console.log(failValues)
			return failValues;
		}
	}

    function getCol(matrix, col){
       var column = [];
       for(var i=0; i<matrix.length; i++){
          column.push(matrix[i][col]);
       }
       return column;
    }

   function chartCreate()
   {
   	change();

		const toNumbers = arr => arr.map(Number);
		var getstat= change();
		var day = getCol(getstat,1);
		console.log(day);
		var sdata1 = toNumbers(getCol(getstat,3));
		console.log("data 1" ,sdata1);
		var sdata2 = toNumbers(getCol(getstat,4));
		console.log(sdata2);
		var sdata3 = toNumbers(getCol(getstat,5));
		console.log(sdata3);
		var sdata4 = toNumbers(getCol(getstat,6));
		console.log(sdata4);

 var options = {
  chart:{
      renderTo: 'chart',
      defaultSeriesType: 'line'
  },

   title: {
        text: 'dummy'
    },

    subtitle: {
        text: ' '
    },

    yAxis: {
        title: {
            text: ' ',
            //tickPointInterval: 250
        },
         minorTickInterval: 'auto',
        // tickInterval: 4,
    },

    xAxis: {
      
       labels :{
       ...