Polling App Help: Accessing poll data from client side with chart.js

#1

I’m trying to create the chart by using chart.js from the client side. This is how I use it on my show page for individual polls:

    <div class="col-md-4">
        <b><span class="fa fa-sliders"></span> <%= poll.title %></b>
        <form action="/poll/<%= poll._id %>" method="post">
            <% poll.options.forEach(function(option) { %>
            <input type="radio" name="option" value="<%= option.desc %>"> <%= option.desc %><br>
            <% }); %>
            <input type="text" name="newOption" placeholder="New Option" value=""><br>
            <input class = "btn btn-danger" type="submit" value="Vote">
            </form>
    </div>

    <div class="col-md-8">
        <h2>Chart goes here</h2>
        <canvas id="myChart" width="400" height="400"></canvas>


        <ul>
            <% poll.options.forEach(function(option) { %>
            <li><%= option.desc %>: <%= option.votes %></li>
            <% }); %>
        </ul>
    </div>
</div>
I'm using ejs by the way. and I link this javascript code from that page to show a sample chart...boilerplate from the chart.js documentation: var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); console.log("Poll data from client side:", poll);

my question is the last line of that client side js, when I try to send the poll data to the console…it can’t access the data. yet “poll” object is what is sent to the show.ejs page from the server side. How can I access the poll data from this included javascript page in order to use my data rather than the boiler plate?

#2

I’ve been googling around and am seeing things about creating a route to send my object data. I’m already sending the object to an ejs template like so, then want to access the poll data from a client side JS which uses chart. What am I missing here?

app.post('/poll/:id', function (req, res) {
var id = req.params.id;

newOption = req.body.newOption.trim();
console.log(typeof(newOption));
if (newOption !== "") {
  //TODO: add else condition for radio ch
  Poll.findOneAndUpdate({
    _id: id
  }, {
    '$push': {
      options: {
        desc: newOption,
        votes: 1
      }
    }
  }, {
    new: true
  }, function (err, poll) {
    if (err) return console.log(err);
    console.log(poll);
    res.render('pages/polls/show.ejs', {poll: poll});
    //TODO:  place cookie to prevent repeat voting

  })
#3

Try this instead:

console.log("Poll data from client side:", '<%= poll %>');
1 Like
#4

solved! I ended up including the chart code between script tags and had to use json.stringify with some ejs bracketing to get the object data into the script tags to work with. I could not find that documented anywhere, Arshad Khan helped me out in the gitter chat room.

#5