Duplicate set of x axis values on bar chart

[Christopher Anand]

I'm showing the results of a face emotion detection program as a google bar chart. The problem is that for every result set that is returned, the chart draws double the number of rows. 

This is the script tag of the javascript.

<script>

document.getElementById("result").innerHTML;

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

</script>

<button onclick="stopTextColor();">Stop</button>

<img id="bg" width=1200px height=900px src="{{ url_for('calc') }}">

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

</body>

<script type="text/javascript">

var intervalID = setInterval(update_values,1000);

  function update_values() {

  

        $.getJSON($SCRIPT_ROOT + '/result',

               

      function(data) {

        $('#result').text(data.result);

        console.log(data);

drawMultSeries();

function drawMultSeries() {

var tdata = google.visualization.arrayToDataTable(data.result, true);

  

tdata.addRows(data.result);

var options = {

    height: 500,

                            width:  500,

                            chartArea:{left:100,top:100,right:100,bottom:100},

                            hAxis: { ticks: [25,50,75,100] },

                            isStacked: false,

                            bar: {groupWidth: '10'},

                            vAxis:{ textStyle:{color: '#000000',fontSize: '12', paddingRight: '0',marginRight: '0'}},

                            colors: ['green','#ffff99','#ffbf0c','red'],

                         };

var chart1 = new google.visualization.BarChart(document.getElementById('chart'));

                    chart1.draw(tdata, options);

    }

      });

      

    };

    function stopTextColor() {

      clearInterval(intervalID);

    }

    

</script>

When I inspect the array that is returned, there are only 7, but the graph as you can see shows 14. The next 7 rows are a replica of the first 7. I'm not sure where I'm going wrong here. Can someone please help me out with this?