score:1

Accepted answer

i found a way using an .each function after piecing together various answers to similar questions. this js is called for each chart whenever there is a canvas with a "line" class on the page. hopefully this will be of help to others.

$('.line').each(function (index, element) {

var kpidata = element.getattribute('id');


$.ajax({

    type: "post",
    url: "/home/getlinechartdata",
    traditional: true,
    contenttype: "application/json; charset=utf-8",
    datatype: "json",
    data: kpidata,
    success: function (idata) {
        var adata = idata;
        var alabels = adata[0];
        var adatasets1 = adata[1];
        var datat = {
            labels: alabels,
            datasets: [{

                data: adatasets1,
                label: 'value',
                backgroundcolor: getstyle('--primary'),
                bordercolor: 'rgba(255,255,255,.55)'
            }]
        };


        var ctx = element.getcontext('2d');

        var mynewchart = new chart(ctx, {
            type: 'line',
            data: datat,
            options: {
                responsive: true,
                tooltipcaretsize: 0,
                maintainaspectratio: false,
                legend: {
                    display: false
                },
                scales: {
                    xaxes: [{
                        gridlines: {
                            color: 'transparent',
                            zerolinecolor: 'transparent'
                        },
                        ticks: {
                            fontsize: 2,
                            fontcolor: 'transparent'
                        }
                    }],
                    yaxes: [{
                        display: false,
                        ticks: {
                            display: false

                        }
                    }]
                },
                elements: {
                    line: {
                        borderwidth: 1
                    },
                    point: {
                        radius: 4,
                        hitradius: 10,
                        hoverradius: 4
                    }
                }
            }


        }
        );
    }
});


});

Related Query

More Query from same tag