Adding a for loop/foreach loop for Charts.js

Question

I'm attempting to add in a foreach, or for loop within the code below, to create multiple datasets for charts.js. This will allow me to create multiple lines on this line graph.

I have a PHP object that I can encode to fill in variables later on, but how and where can I inject a loop to only create multiple datasets?

<script>
var chart1Handler = function() {
var data = {
    labels: {!! json_encode($month_array) !!},
    datasets: [{
            label:'',
            fillColor: 'rgba(220,220,220,0.2)',
            strokeColor: 'rgba(220,220,220,1)',
            pointColor: 'rgba(220,220,220,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220,220,220,1)',
            data: {{ json_encode($new_taco) }}
    }]
};

var options = {

    maintainAspectRatio: false,

    // Sets the chart to be responsive
    responsive: true,

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: true,

    //String - Colour of the grid lines
    scaleGridLineColor: 'rgba(0,0,0,.05)',

    //Number - Width of the grid lines
    scaleGridLineWidth: 1,

    //Boolean - Whether the line is curved between points
    bezierCurve: false,

    //Number - Tension of the bezier curve between points
    bezierCurveTension: 0.4,

    //Boolean - Whether to show a dot for each point
    pointDot: true,

    //Number - Radius of each point dot in pixels
    pointDotRadius: 4,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth: 1,

    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
    pointHitDetectionRadius: 20,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke: true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth: 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill: true,

    // Function - on animation progress
    onAnimationProgress: function() {
    },

    // Function - on animation complete
    onAnimationComplete: function() {
    },

    //String - A legend template
    legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
};
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#chart1").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var chart1 = new Chart(ctx).Line(data, options);
//generate the legend
var legend = chart1.generateLegend();
//and append it to your page somewhere
$('#chart1Legend').append(legend);

};

</script>

trajchevska · Accepted Answer · 2016-07-20 18:42:19Z

4

You can create your dataset array in your PHP code and pass it to the JS as json. You will then simply need to parse it before using.

In PHP:

$datasets = [
    [
        'label'=>'',
        'fillColor'=> 'rgba(220,220,220,0.2)',
        'strokeColor'=> 'rgba(220,220,220,1)',
        'pointColor'=> 'rgba(220,220,220,1)',
        'pointStrokeColor'=> '#fff',
        'pointHighlightFill'=> '#fff',
        'pointHighlightStroke'=> 'rgba(220,220,220,1)',
        'data' => [1,2,3]
    ],
    [
        'label'=>'',
        'fillColor'=> 'rgba(220,220,220,0.2)',
        'strokeColor'=> 'rgba(220,220,220,1)',
        'pointColor'=> 'rgba(220,220,220,1)',
        'pointStrokeColor'=> '#fff',
        'pointHighlightFill'=> '#fff',
        'pointHighlightStroke'=> 'rgba(220,220,220,1)',
        'data' => [1,2,3]
    ]
];
$datasets = json_encode($datasets);

In JS:

var data = {
    labels: {!! json_encode($month_array) !!},
    datasets: JSON.parse('<?=$datasets?>')
};

BTW I think it's worth mentioning that a JS array is not treated the same way as a JSON string, even though they look pretty similar. So, even though I haven't seen much details of the implementation, I assume that you need to pass an array instead of JSON as value for labels. You can use the same approach as with the datasets here as well.

answered Jul 20, 2016 at 18:42

trajchevska

9527 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Parsell Over a year ago

This should absolutely work, and I'll update in a bit here to make sure it did. As far as the labels attribute, that will always be just a full calendar year, so I can just hard code that in now. Thanks a bunch, and I'll let you know how it ends up!

Ben Parsell Over a year ago

That was quick. We're good to go. Thank you @trajchevska, you rock!

Collectives™ on Stack Overflow

Adding a for loop/foreach loop for Charts.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related