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 plete
    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>

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 plete
    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>

• javascript
• foreach
• chart.js

1 Answer 1

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.