how to get data dynamically using chartjs

index.html::::

   <div id="chart-container">
        <canvas id="graphCanvas" class="chartjs-render-monitor"></canvas>     
    </div>

   <script>
        $(document).ready(function () {
            showGraph();
        }); 
       function showGraph()
       {
       $.post("<?php echo get_template_directory_uri() ?>/tsdatachart.php",
       function (data)
       {
       debugger;
       // console.log(data[0].PollResults2018);
       console.log(data);
       var PartyShortName = []; variable declaration
       var PollResults = [];         variable declaration
       for (var i in data) {
                        console.log(data);
                        PartyShortName.push(data[i].PartyShortName);----->tablecolumn name
                        PollResults.push(data[i].PollResults2018);----->ablecolumn name
                    }

      var chartdata = {
       labels: PartyShortName, -----> legend name
       datasets: [
                            {
                                label: 'CurrentPosition',
                                // backgroundColor: '#49e2ff',
                                backgroundColor:[
                                'rgb(248, 12, 117)',
                                '#00BFFF',
                                '#009F3C',
                                '#faff02',
                                '#FF9933',
                                '#2c089b',
                                'red'

                                ],
                                borderColor: '#46d5f1',
                                // hoverBackgroundColor: '#CCCCCC',
                                hoverBackgroundColor:[
                                'rgb(248, 12, 117)',
                                '#00BFFF',
                                '#009F3C',
                                '#faff02',
                                '#FF9933',
                                '#2c089b',
                                'red'
                                ],
                                hoverBorderColor: '#666666',
                                data:PollResults
                            }  ]
                     
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'pie',
                        data: chartdata,
                        options:{

                         // legend: {
                         //  display: true,
                         //  position: 'left',
                         //  top:20
                         //  },
                        // title:{
                        //     display:true,
                        //     text:'parties',
                        //     fontSize:25
                        //      },
                       
                        layout:{
                        padding:{
                            left:0,
                            right:0,
                            bottom:0,
                            top:0
                            }
                        }
                    },



                    });
                });
}
</script>


tsdatachart.php:::

<?php
header('Content-Type: application/json');
$conn = mysqli_connect("45.113.122.70","aptsv1_dbu1","@pts2019","aptsv1_votes");
$sqlQuery="SELECT cp.PartyId, cp.StateId,cp.NoOfSeats,cp.PollResults2018,p.PartyShortName
FROM aptsv1_votes.CurrentPosition cp
left join aptsv1_votes.Parties p on p.Id=cp.PartyId where StateId=2 and cp.PollResults2018!='null'  order by cp.PollResults2018 desc ";
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
  $data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);
?>