Build data reception with Google Chart API

Question

I would like please build data reception with Google Chart API. if anyone has more skills to help me to build with the extract JSON data. The goal is to obtain a chart stacked in image. My code is attached. After several tries I still can't build the viewColumns . If anyone could check everything and show me the right path I would be very happy.

Thank you so much!!

my code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart"></div>
    
    <script type="text/javascript">
    google.charts.load('current', { callback: drawMonthwiseChart, packages: ['corechart']});
    function drawMonthwiseChart()
    {
    
      var jsonData = {
        "TV":{"Madar":50.0,"La Main":34.0,"Saba":31.0,"Persavon":34.0,"Le Chat":55.0,"Ariel":67.0,"Super Croix":32.0,"Omo":77.0,"Armonia":42.0,"Genie":34.0},
        "Radio":{"Madar":10.0,"La Main":6.0,"Saba":9.0,"Persavon":6.0,"Le Chat":10.0,"Ariel":10.0,"Super Croix":6.0,"Omo":23.0,"Armonia":3.0,"Genie":8.0},
        "Billboard":{"Madar":2.0,"La Main":2.0,"Saba":2.0,"Persavon":3.0,"Le Chat":4.0,"Ariel":3.0,"Super Croix":2.0,"Omo":6.0,"Armonia":5.0,"Genie":4.0},
        "Print":{"Madar":2.0,"La Main":1.0,"Saba":3.0,"Persavon":3.0,"Le Chat":3.0,"Ariel":4.0,"Super Croix":4.0,"Omo":6.0,"Armonia":5.0,"Genie":3.0},
        "Social Media":{"Madar":22.0,"La Main":19.0,"Saba":19.0,"Persavon":16.0,"Le Chat":21.0,"Ariel":19.0,"Super Croix":16.0,"Omo":33.0,"Armonia":19.0,"Genie":16.0},
        "Website":{"Madar":9.0,"La Main":6.0,"Saba":7.0,"Persavon":8.0,"Le Chat":4.0,"Ariel":8.0,"Super Croix":5.0,"Omo":11.0,"Armonia":6.0,"Genie":8.0}
      }
    
    
        var chartData = [];
        Object.values(jsonData).forEach(function(row, rowIndex) {
          var columns = Object.keys(row);
          if (rowIndex === 0) {
           chartData.push(columns);
      
         }
    
            // row values
            var chartRow = [];
            columns.forEach(function (column, colIndex) {
              var chartCell = row[column];
              if (colIndex > 1) {
                chartCell = parseFloat(chartCell);
              }
              chartRow.push(chartCell);
            });
            chartData.push(chartRow);
    
           })
    
      
        var data = google.visualization.arrayToDataTable(chartData);
        var view = new google.visualization.DataView(data);
    
        var viewColumns = [0];
    
          Object.entries(jsonData).forEach(function(category, index) {
          console.log(category[0]);
          viewColumns.push({
            calc: function (dt, row) {
              if (dt.getValue(row, 1) === category) {
                return dt.getValue(row, 2);
              }
              return null;
            },
            label: category[0],
            type: 'number'
    
          });
    
          });
    
    
        view.setColumns(viewColumns);
    
        var options = {
          title:'',
          hAxis: {
              title: ''
          },
          vAxis: {
              title: ''
          },
          chartArea:{width:'65%' ,height:'95%'},
          isStacked: true
      }
    
        var chart = new google.visualization.BarChart(document.getElementById('chart'));
        chart.draw(view, options);
      }
    
    
    </script>


The expected result