Set DataSource Of Chart.JS To Array

Question

Morning - I'm trying to capture the value of my Array. Meaning, I want to ignore the text MonthlySaleAmount but capture the numerical value. This is what my array looks like

(19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {MonthlySaleAmount: "45364"}
1: {MonthlySaleAmount: "242421"}
2: {MonthlySaleAmount: "37654"}
3: {MonthlySaleAmount: "139038"}

and using chart.js I am trying to set my data to data: information but this shows no data on my chart

for(var item in arr) { arr[item].MonthlySaleAmount = +arr[item].MonthlySaleAmount } — Hary, Aug 06 '19 at 13:38
@adiga - if I do information = array.map(a => +a.MonthlySaleAmount); console shows an error of: Uncaught ReferenceError: array is not define — DougLove, Aug 06 '19 at 13:51
of course you need to replace `array` with whatever variable stores the array you have posted — adiga, Aug 06 '19 at 14:00

Jackal · Answer 1 · 2019-08-06T13:44:10.437

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

Sorry no, it's just a function that is called on page load and makes an ajax request and builds the chart, the whole process is inside the success function from the ajax request. The chart is injected in the html on the first foreach because i'm building many charts, but you can see when `var myChart = new Chart` is defined and how i set the options with my data. Also i'm using the annotations plugin for chartjs and has options already defined if you need to use, but you have to download the js file fort chart-js-annotations — Jackal, Aug 06 '19 at 14:58

Set DataSource Of Chart.JS To Array

1 Answers1