Display daily dinamyc data using google MultiLine Chart and AJAX

Before Started

You should already understand about displaying one google line chart with dynamic data

Known

Current date is 2019-09-21

The day name is Saturday

Data Source

I have provided 3 JSON data like image below

Wanted

I want to display google Material Line Chart like image below

Question

How to make it … ?

Answer

Create grafik_material.html and insert this code

<html>
<head>
  
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	
    <script type="text/javascript">

      google.charts.load('current', {'packages':['line']});

       google.charts.setOnLoadCallback(ajx);
	   
	 var dataStock=[];
	 var itemData =[];	
	 var d = new Date();
	 var tglHariIni = d.getDay()

 function ajx(){
   var i=1;
 
  while(i<4){
    var xhttp = new XMLHttpRequest();
 
    xhttp.onreadystatechange = function() {
    if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
	let resJson=JSON.parse(this.responseText)
        let data=resJson.data_stock;
	dataStock.push(data);		 
    }
  };
	  if(i==1)
		xhttp.open("GET", "/data_stock_masuk", false);
	  else if(i==2)
		xhttp.open("GET", "/data_stock_keluar", false);
	  else if(i==3)
		xhttp.open("GET", "/data_stock_adjust", false);
	  
	  xhttp.send();
	  i++;
  }
 if(i==4)
drawChart();
		 
}//end while


function addData(idx){

   var arrMasuk = dataStock[0];
   var arrKeluar= dataStock[1];
   var arrAdjust= dataStock[2];
   let idxDay=idx+1;

			switch(idxDay){
			
				case 1:
				itemData[idx]=["Monday"]
				break
				case 2:
				itemData[idx]=["Tuesday"]
				break
				case 3:
				itemData[idx]=["Wednesday"]
				break
				case 4:
				itemData[idx]=["Thursday"]
				break
				case 5:
				itemData[idx]=["Friday"]
				break
					
			}
	
let nilai = arrMasuk.find(el => el.angka_hari == idxDay);
if(nilai)
   itemData[idx].push(parseInt(nilai.jumlah))
else
   itemData[idx].push(0)
			
 nilai = arrKeluar.find(el => el.angka_hari == idxDay);
 if(nilai)
   itemData[idx].push(parseInt(nilai.jumlah))
else
   itemData[idx].push(0)
			
nilai = arrAdjust.find(el => el.angka_hari == idxDay);
if(nilai)
  itemData[idx].push(parseInt(nilai.jumlah))
else
  itemData[idx].push(0)

}//end function addData()

      
function drawChart() {
	  
        var data = new google.visualization.DataTable();
		
        data.addColumn('string', 'Daily');
        data.addColumn('number', 'Stock In');
	data.addColumn('number', 'Stock Out');
	data.addColumn('number', 'Stock Adjust');
	
	var chartData = [];
	for(var idx = 0; idx <tglHariIni ; idx++) {
           addData(idx)
	}
		
	chartData=itemData;
	data.addRows(chartData);
    
        var options = {'title':'Data Stock',
                       'width':500,
                       'height':300};

  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data,google.charts.Line.convertOptions( options));
}//end function drawChart

</script>
</head>
<body>
       <div id="chart_div"></div>
  </body>
</html>

Explain

  • xhttp.open(“GET”, “/data_stock_masuk”, false), false value means async=false, so data can be pull ordered
  • XMLHttpRequest.DONE is to make sure the operation is DONE
  • arrMasuk.find(el => el.angka_hari == idxDay), this code means we will get the first angka_hari element that has value same as idxDay
  • push() is to add new item into array

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *