lundi 19 février 2018

Several Charts in one page chartJs

I'm developing a form generator with RoR and I want to draw multiple charts in one result page (one chart for one question).

For the moment I'm doing it statically in my controller:

Controller :

    @polls5 = @polls.where(question_id: 5).group("nom")
    @polls7 = @polls.where(question_id: 7).group("nom")
   ...

View

 <canvas id="myChart" ></canvas>


<script>
var ctx = document.getElementById("myChart").getContext('2d');


labels= [<% for rep in @polls7 %>
     "<%= rep.nom %>",
    <% end %>];

i =<%= @polls7.count.values %>;


var myChart = new Chart(ctx, {
type: 'bar',
data:  {
    labels:labels,
    datasets: [{
        label: '',
        data: i,
        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
            }
        }]
    }
}
});

How can I loop for every local variable @polls2, @polls3, etc (I've read that we can't loop to create local variable in Ruby) and how can I loop in my JS script to draw my charts.

Thank you

Aucun commentaire:

Enregistrer un commentaire