Probleempje met vormen van een Chart.js config

[databeestje]

Dames en Heren, hopelijk zit ik hier op de goede plek voor een JS vraag. Ik wou wat data van het RDW parsen en weergeven voor wat grafiekjes in het elektrisch rijden topic. Het downloaden, parsen en uitspugen van een JSON is geen probleem, ik ben handiger met PHP.

Nu wou ik een line chart met meerdere datasets gebruiken om historische de opkomst en ondergang van modellen te tonen. Vooralsnog lijkt het config object wat ik zie in de Chrome console wel ok, maar struikelt deze over het datatype van de datasets.

Het gaat om deze pagina, ondanks de extensie zit er overigens geen php content in.

Ik vul eerst het popconfig array, en doe daaronder een popconfig.data.datasets.push van het JSON array. Ogenschijnlijk gaat het daar de mist in, maar door mijn onervarenheid met javascript zie ik het niet.

code:

                var popconfig = {
                        type: 'line',
                        data: {
                            labels: poplabels,
                        },
                        options: {
                                title: {
                                        display: true,
                                        text: 'Populaire Elektrische modellen',
                                },
                                legend: {
                                                display: true,
                                                position: 'bottom'
                                        },

                        },
                };
                var poplabels = [], popcolors = [], popsales = [];
                $.get('stats.json', function(dataGet) {
                        dataGet['monthlabels'].forEach(function(singleResult) {
                            popconfig.data.labels.push(singleResult);
                        });
                        var keys = Object.keys(dataGet['monthpopular']);
                for (var i = 0; i < keys.length; i++)
                {
                        var key = keys[i];
                        popconfig.data.datasets.push({label:key, backgroundcolor: getRandomColor(), fill: false, data: Object.values(dataGet['monthpopular']$

                };
                });

                console.log(popconfig);

Overigens rendert de grafiek bij correcte type (bv blokhaken om datasets heen) pas na resizen, iets waar ik in de eerdere geen last van had, maar geen verklaring voor heb. Iets waar ik met een Pie chart test ook last van had.

[418O2]

Maak een functie aan die de configuratie aanmaakt en roep die aan vanuit de handler die de json ophaalt. Dan gaan het wel gelijk goed gok ik.

[Juup]

Je window.onload event zal eerder komen dan dat de response van je ajax call verwerkt is dus op het moment dat je

JavaScript:

window.myLine = new Chart(ctxpop, popconfig);

uitvoert is de popconfig nog niet aangevuld?

[418O2]

JavaScript:

function buildChart(poplabels, popcolors, popsales) {

var ctxpop = document.getElementById('chart-area').getContext('2d');
      
        // date string = year+month
        var vm = new Date();
        var dynamicColors = function() {
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);
                return "rgb(" + r + "," + g + "," + b + ")";
        };
        function getRandomColor() {
              var letters = '0123456789ABCDEF'.split('');
              var color = '#';
              for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
              }
            return color;
        }


        var popconfig = {
            type: 'line',
            data: {
                labels: poplabels,
            },
            options: {
                title: {
                    display: true,
                    text: 'Populaire Elektrische modellen',
                    },
                legend: {
                        display: true,
                        position: 'bottom'
                    },

            },
        };
    window.myLine = new Chart(ctxpop, popconfig)
    
}
function getData() {

            var poplabels = [], popcolors = [], popsales = [];

        $.get('stats.json', function(dataGet) {
            dataGet['monthlabels'].forEach(function(singleResult) {
                        popconfig.data.labels.push(singleResult);
                    });
            var keys = Object.keys(dataGet['monthpopular']);
        for (var i = 0; i < keys.length; i++)
        {
                var key = keys[i];
            popconfig.data.datasets.push({label:key, backgroundcolor: getRandomColor(), fill: false, data: Object.values(dataGet['monthpopular'][key])});

        };
        });

        console.log(popconfig);
    buildChart(poplabels, popcolors, popsales);
}

        // console.log(vmconfig);
        // var colorNames = Object.keys(window.chartColors);

        $(document).ready(function() {
    getData();
})
  
        

zoiets gaat wel werken als het goed is

[databeestje]

Dank voor het voorbeeld @418O2 , ik had zelf inmiddels ook een andere truc die schijnbaar werkt, maar ook niet alles is. Hiermee forceer je een update die opnieuw de chart rendert.

code:

setTimeout(function() { myLine.update(); }, 1000);

Ik ga jouw voorbeeld in ieder geval verder uitwerken, daarmee is lazy loaden en later updaten via ajax ook een mogelijkheid.

Het render probleem naar aanleiding van JSON data parsing is overigens een vaker terugkerend fenomeen. En ogenschijnlijk niet alleen bij Chart.js, maar ook andere oplossingen.

[418O2]

databeestje schreef op woensdag 13 maart 2019 @ 16:28:
Dank voor het voorbeeld @418O2 , ik had zelf inmiddels ook een andere truc die schijnbaar werkt, maar ook niet alles is. Hiermee forceer je een update die opnieuw de chart rendert.

code:

setTimeout(function() { myLine.update(); }, 1000);

Ik ga jouw voorbeeld in ieder geval verder uitwerken, daarmee is lazy loaden en later updaten via ajax ook een mogelijkheid.

Het render probleem naar aanleiding van JSON data parsing is overigens een vaker terugkerend fenomeen. En ogenschijnlijk niet alleen bij Chart.js, maar ook andere oplossingen.

Dit werkt alleen als je binnen een seconde de data hebt. Als het later is gebeurt er niets, is het er sneller, wacht de gebruiker. Mijn voorbeeld is het snelste (zonder te herschrijven). Dat hij het eerder wel deed na een resize, is omdat hij die update functie aanroept als je resized

[ Voor 5% gewijzigd door 418O2 op 13-03-2019 16:38 ]

[databeestje]

418O2 schreef op woensdag 13 maart 2019 @ 16:37:
[...]

Dit werkt alleen als je binnen een seconde de data hebt. Als het later is gebeurt er niets, is het er sneller, wacht de gebruiker. Mijn voorbeeld is het snelste (zonder te herschrijven). Dat hij het eerder wel deed na een resize, is omdat hij die update functie aanroept als je resized

Klopt, dat ben ik mijn terdege bewust. De code zoals gepost deed het overigens niet helemaal, maar ik snap wel wat ik moet doen.

Ik had ook nog een vreemde eend in de dataset gevonden met model "0" in 2014 06 wat uiteindelijk de "undefined" opleverde

Het programmeren gaat niet zo soepel als je een Lenovo Yoga 530 hebt met een Realtek Wireless kaart die elke ~7 minuten al het verkeer dropt en alleen met adapter uit/aan weer verder gaat. Dat wordt heel snel ouderwets. Er is een Intel wifi AC kaartje in de post onderweg.

Met een beetje mazzel kom ik daar dit weekend verder mee. Het zou mooi zijn als remote JSON import gewoon een standaard onderdeel zou zijn van Chart.js, dat zou veel mensen blij maken denk ik

De code zoals je voorgesteld hebt zit nu in http://iserv.nl/files/elektrisch/test4.php maar deze geeft nu nog een "Cannot read property 'transition' of null" wat volgens de googles zou moeten betekenen dat het array onder zijn voeten bijgewerkt wordt. Hmmm.

[databeestje]

Even een reply op mijzelf.

Gebruik de fetch API, dan gaat het goed.
https://developer.mozilla...API/Fetch_API/Using_Fetch

Werkt ook in Chrome in ieder geval.