[Chartjs]-Set DataSource Of Chart.JS To Array

by

2👍

I had to use chart JS and came across this issue, it’s easy

 data = value.x.map(function (a) { return a.x; });

Where x is the name of value if i recall

just try and use console.log to try out

here is the whole code where i populate the chart instance

 function GetGeometriaRegistos() {

            $.ajax({
                url: '/Geometrias/GetAll',
                dataType: "json",
                method: "get",
                data: { id: $('#MatrizId').val()},
                success: function (response) {

                    var isBlocked = response.isBlocked;
                    var grafico = response.grafico;

                    if (isBlocked) {
                        $('.blocked-overlay').fadeIn('slow');
                    }

                    let data;
                    var graficos = '';
                    var dataLabels = [];

                    componentes = grafico.map(function (a) { return a.componente; });

                    $.each(grafico, function (index, value) {
                        graficos += '<div class="frame">';
                        graficos += '<div class="content">';
                        graficos += '<canvas id="chart' + index + '" class="d-block w-100"></canvas>';
                        graficos += '</div>';
                        graficos += '</div>';
                        $('#content').html(graficos);
                    })

                    $.each(grafico, function (index, value) {

                        console.log(value);
                        data = value.x.map(function (a) { return a.x; });

                        $.each(data, function (index, value) {

                            dataLabels[index] = 'X' + (index + 1);

                        });


                        var ctx = document.getElementById('chart' + index).getContext('2d');

                        var myChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: data,
                                datasets: [{
                                    label: value.componente,
                                    data: data,
                                    borderColor: ['rgba(54, 162, 235, 1)'],
                                    backgroundColor: 'blue',
                                    borderWith: 1,
                                    fill: false,
                                    pointRadius: 5,
                                    pointHoverRadius: 10
                                }],
                            },
                            options: {
                                responsive: true,
                                responsiveAnimationDuration: 400,
                                maintainAspectRatio: true,
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true,
                                            stepSize: 0.5,
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Y'
                                        }
                                    }],
                                    xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Médias'
                                        }
                                    }]
                                },
                                annotation: {
                                    drawTime: 'beforeDatasetsDraw',
                                    annotations: [{
                                        id: 'hline3',
                                        type: 'line',
                                        mode: 'horizontal',
                                        scaleID: 'y-axis-0',
                                        value: value.toleranciaInferior,
                                        borderColor: 'red',
                                        borderWidth: 1,
                                        label: {
                                            backgroundColor: "red",
                                            enabled: true
                                        },
                                    },
                                    {
                                        id: 'hline2',
                                        type: 'line',
                                        mode: 'horizontal',
                                        scaleID: 'y-axis-0',
                                        value: value.toleranciaSuperior,
                                        borderColor: 'red',
                                        borderWidth: 1,
                                        label: {
                                            backgroundColor: "red",
                                            enabled: true
                                        }
                                    }],

                                }
                            }
                        });
                    });
                },
                error: function (response) {
                    swal("Erro", response.responseText, "error");
                }
            });
        }

also this is made for multiple graphics not just one

Leave a comment