Chartjs-Chart.js won´t show dates from variable correctly

by

0👍

✅

Got it working with my short example. After that it was easy to use the JSON Data as Labels and Datapoints…:

<html lang="de">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="/style.css">         
            <title>main</title>  
         
            <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js" integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>

        </head>

        <body>
           
            <div class="container">
                <canvas id="myChart" width="400" height="200"></canvas>
            </div>
            
            <script>

                //Funktion um Datenpunkte zu holen
                function getData() {
                    var returnval = []; //array
                    var data = [];                   
    
                    data.push(12);
                    data.push(21);
                    data.push(32);
                    data.push(16);
    
                    for(let i=0; i < data.length; i++) {
                        returnval.push(data[i]);                                        
                    }                    
                    //console.log(returnval);
                    return returnval;
                }


                //Funktion um Labelpunkte(Datum) zu holen
                function getLabels() {
                    var returlabels = []; //array
                    
                    //console.log(moment.locale()) ;
                    var data = [];
                    
                    data.push("2015-04-23T13:03:00Z");
                    data.push("2015-04-24T13:33:00Z");
                    data.push("2015-04-25T14:12:00Z");
                    data.push("2015-04-26T17:08:00Z");
    
                          
                    for(let i=0; i < data.length; i++) {
                        let mydate = moment(data[i]) ;     //.format("LLL") ;
                        mydate.locale('de');
                        returlabels.push( mydate.format("LLL") ) ;      // += "{ t: '" + data[i] + "', y: " + data2[i] + " }," ;                                           
                    }
                    
                    //console.log(returlabels);
                    return returlabels;
                }


                //canvas Element für Chart
                var canvas = document.getElementById('myChart');
                
                //Daten
                var data = {
                    labels: getLabels(), //[moment("2015-04-23").format("LLL"), moment("2015-04-24").format("LLL"), moment("2015-04-25").format("LLL"), moment("2015-04-26").format("LLL")],
                    type: "line",
                    datasets: [
                        {
                            data: getData(), //[ 12,21, 32],
                            fill: false,
                            label: "Demo data",
                            //backgroundColor: "green",
                            borderColor: '#3498db',
                            pointBackgroundColor:'#7CFC00',
                            pointBorderColor : 'black',
                        }
                    ]
                };

                //Options
                ChartOptions = {
                    responsive: true,
                    hover: {
                        mode: "nearest",
                        intersect: false,
                        animationDuration:400,
                    },
                    title: {
                        display:true,
                        text:'Chart Title',
                        fontColor:'#3498db',
                        fontSize:20,
                        fontStyle:' bold',
                    },
                    elements: {
                        arc: {},
                        point: {radius:5,},
                        line: {tension:0.4,fill:false,},
                        rectangle: {},
                    },
                };

                //Chart mit Daten und Optionen erstellen
                var myBarChart = Chart.Line(canvas,{
                    data:data,
                    options:ChartOptions,
                });
            
            </script>
            
        </body>
    </html>

Leave a comment