Бары не поднимаются при голосовании в Pusher JS

Question

Я создаю страницу, где мы должны проголосовать за вашего любимого премьер-министра.Для этого я использую pusher.js.

Но когда я выбираю кандидата и голосую, столбцы на графике для этого кандидата не поднимаются.

Это мой index.html:-

<form id="vote-form">
  <p>
    <input type="radio" name="pm" id="narendra" value="narendra">
    <label for="narendra">Narendra Modi</label>
  </p>
  <p>
    <input type="radio" name="pm" id="indira" value="indira">
    <label for="indira">Indira Gandhi</label>
  </p>
  <p>
    <input type="radio" name="pm" id="atal" value="atal">
    <label for="atal">Atal Bihari Vajpayee</label>
  </p>
  <p>
    <input type="radio" name="pm" id="jawaharlal" value="jawaharlal">
    <label for="jawaharlal">Jawaharlal Nehru</label>
  </p>
  <input type="submit" value="Vote" class="btn">
</form>




   <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.2.2/pusher.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script> 
<script src = "public/main.js"></script>

Ниже приведен мой poll.js

const express = require('express');

const router = express.Router();

var Pusher = require('pusher');

var pusher = new Pusher({
    appId: '795354',
    key: 'e65b4ac404da5ba73433',
    secret: '1b6fa3bbb04e2e9fae1b',
    cluster: 'ap2',
    encrypted: true
  });



router.get('/',(req,resp)=>{
    resp.send('POLLINH here');
});

router.post('/',(req,resp)=>{
    pusher.trigger('os-poll', 'os-vote', {
        points:1,
        pm:req.body.pm
      });

      return resp.json({success:true,message:'Thanks for your vote'});
}    )

module.exports = router;

Ниже приведен мой main.js

const form = document.getElementById ('voice-form');var event;

//Form submit events
form.addEventListener('submit', e=>{

const choice = document.querySelector('input[name=pm]:checked').value;
const data = {pm: choice};

fetch('http://localhost:4000/poll',{
    method: 'post',
    body: JSON.stringify(data),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));

e.preventDefault();
});

//creating the chart

let dataPoints = [
{ label: "Narendra Modi",  y: 0 },
        { label: "Indira Gandhi", y: 0  },
        { label: "Atal Bihari Vajpayee", y: 0 },
        { label: "Jawaharlal Nehru",  y: 0  }
];

const chartContainer = document.querySelector
('#chartContainer');

if(chartContainer){
const chart = new CanvasJS.Chart('chartContainer',{
    animationEnabled : true,
    theme: 'theme1',
    title :{
        text: 'Who is your favourite Prime Minister?'
    },
    data :[
        {
            type :'column',
            dataPoints : dataPoints
        }
    ]
});
chart.render();

Pusher.logToConsole = true;

var pusher = new Pusher('e65b4ac404da5ba73433', {
  cluster: 'ap2',
  forceTLS: true
});

var channel = pusher.subscribe('os-poll');
channel.bind('os-vote', function(data) {
 dataPoints = dataPoints.map(x=>{
     if(x.label == data.pm){
         x.y += data.points;
         return x;
     }
     else{
         return x;
     }
 });
 chart.render();
});
}