CODEWITHSUNDEEP
javascriptloopsfor-loopchartsgoogle-visualization
anonimostilton
anonimostilton

Reputation: 180

Only half of Google Chart getting displayed

I have a loop on my html page in javascript, that pushes new data in the Datatable of the google chart. This is the loop:

var dividend = 0;
var datalist = [["Round", "correct"]];
for (var i = 0; i < list1.length; i++) {
  var dividend = dividend+1;
  if(list1==word) {
    datalist.push([dividend, 1])
  }
  else {
    datalist.push([dividend, 0])
  }
  drawChart(datalist)
}

And I changed the the drawChart function like so:

function drawChart(datalist) {
    var data = google.visualization.arrayToDataTable(datalist);

    var options = {
        chart: {
        title: 'Rounds',
        legend: {position: 'none'}
        },
        chartArea: {
            backgroundColor: '#636060',
            top:0, 
            left:0,
            height:'100%',
            width:'100%'
            
        }
        
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
}

This is how the chart is displayed:

<section id="curve_chart" class="übersone" style="width: 200px; height: 100px;"></section>

However the problem I have is that only one part of the chart gets displayed and the rest is cut off.

This is what it looks like:

This is what it looks like

And this is what it should look like:

this is what it should look like

Does anyone know what the problem is?

UPDATE: I found out that the problem has nothing to do with the loop. I changed the function again and put a fix datalist in the arrayToDataTable function.

Upvotes: 1

Views: 117

Answers (1)

anonimostilton
anonimostilton

Reputation: 180

I solved the problem. I made a mistake in the css code. There the width of a class was set at a 100px thats why it was cut off. Example:

CSS Code:

.exampleClassOne{
    width: 100px;
}
.exampleClassTwo{
    width: fit-content;
}

HTML Code:

<section class="exampleClassTwo">
       <section id="curve_chart" class="exampleClassOne" style="width: 200px; height: 100px;">
</section>

After I found out that the loop wasn't the problem I tried to simulate my problem in jsfiddle. Like this I found the mistake in my css code.

Upvotes: 1

Related Questions