My google Chart x axis and y -axis not properly show

user_16858057 0
Viewed 264

My json data are

[{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}]

<script type="text/javascript">
$(document).ready(function(){
       var jsonData = [];
      let value;
    $.ajax({
         
         type: "GET",
        url: "DayBasedAttendanceCount",
        dataType: 'json',
        success: function(result){
            //console.log(result.data);
            value=result;
            console.log(value);
            }
      
    });


google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
      

let data1=value;
//console.log(data1+" value");
var data = new google.visualization.DataTable();
let object=JSON.parse(JSON.stringify(data1))
data.addColumn('string','Classname');
     data.addColumn('number','Absent Count');
    
      let val=JSON.stringify(object)
    console.log(val);

           let str = val.replace(/\\/g, '');
           console.log(str);

           var newStr = str.substring(1, str.length-1);
      console.log(newStr);
      newStr = '[' + newStr +']'
      var json = jQuery.parseJSON( newStr );
      console.log(JSON.stringify(json)+" json value"); 
      
      var result1 = [];

      for(var i in value)
          result1.push([value.classname, value.abcount]);
      
      data.addRows(result1);
      console.log(result1);

     var options = {'title':'Student Absent List',
                'width':600,
                'height':300
                
     };
     

      var chart = new google.visualization.BarChart(document.getElementById('chartview'));
      chart.draw(data, options);
      google.visualization.events.addListener(chart, 'ready', function () {
       throw new Error('Test Google Error');
     });

     // listen for error
     google.visualization.events.addListener(chart, 'error', function (err) {
       // check error
       console.log(err.id, err.message);

       // remove error
       google.visualization.errors.removeError(err.id);

       // remove all errors
       google.visualization.errors.removeAll(options);
     });
    }); 
});  
            
      </script>

These data are I retrieved from mysql, front end is jsp. My google bar chart img looks like my out put image is My out put image is My console out puts are:

[{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}]

 [{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}]

{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}

[{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}] json value

 Array(2)
google-visualization jsp jquery javascript
1 Answers

This could help you. If you like to play with the code I made a fiddle: https://jsfiddle.net/bogatyr77/3w19g2km/28/
HTML:

<div id="myBarChart"/>

JavaScript

$(function() {
  var value;
  var s = '';
  $.ajax({
    cache: false,
    type: 'POST',
    url: '/echo/json/',
    data: {
      json: '[{"abcount":7,"classname":"B.E. MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"1"},{"abcount":4,"classname":"B.E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}]'
    },
    success: function(data) {
      value = data
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Count');
      s = '[';

      $.each(value, function(index, v) {
        s += '["' + v.datevalue + '", ' + v.abcount + '],';
      });
      var d = s.slice(0, -1)
      d += ']';

      data.addRows(JSON.parse(d));
      
      var options = {'title':'Student Absent List',
                'width':600,
                'height':300
                
     };
      var chart = new google.visualization.BarChart(document.getElementById('myBarChart'));
      chart.draw(data, options);
    },
    error: function(error) {
      alert('there was an error');
    },
    dataType: 'json'
  });
});

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(function() {
  drawChart();
});
user_120942830
Related