Chartjs-ChartJS date reformatting for use?

by

2👍

Well… it may be a sloppy workaround but try this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sentiment</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
  </head>
  <style>
  .bar { fill: steelblue; }
  body { background-color: #1c142c; }
  </style>

  <body>
    <div>
      <h1 style="font: 200; color: white;">What are people saying on social media?</h1>
      <canvas id="canvas"></canvas>
    </div>
  </body>


    <script>


var ctx = document.getElementById("canvas").getContext('2d'); 


const test = ['&#x27;2020-12-24&#x27;', 
              '&#x27;2020-12-25&#x27;', 
              '&#x27;2020-12-26&#x27;', 
              '&#x27;2020-12-27&#x27;', 
              '&#x27;2020-12-28&#x27;', 
              '&#x27;2020-12-29&#x27;', 
              '&#x27;2020-12-30&#x27;', 
              '&#x27;2020-12-31&#x27;'];
        
var i;
dates_tmp = [];
for (i = 0; i < test.length; i++) {
  dates_tmp.push(String(test[i].replaceAll("&#x27;", "")));
}}
                
const dates = dates_tmp;
        
        
        
const score = [-2, -40, 81, -31, 34, -35, -24, -30]
const day_7_average = [0, -6, 3, -2, 5, 5, 0, -7]

window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};

const colours = score.map((value) => value < 0 ? 'rgb(255, 99, 132)' : 'rgb(75, 192, 192)');

var chartData = {
    labels: dates,
    datasets: [{
       type: 'line',
       label: '7 day average',
       backgroundColor: 'rgb(201, 203, 207)',
       borderColor: 'rgb(201, 203, 207)',
       borderWidth: 2,
       fill: false,
       data: day_7_average,
            }, 
             {
                type: 'bar',
                label: 'Sentiment Score',
                backgroundColor: colours,
                data: score
            }]

        };
        window.onload = function() {
            
            window.myMixedChart = new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: {
                    responsive: true,
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    }
                }
            });
        };
    </script>
</html>

( Oh and by the way: You’ve got an unexpected " in line 16 )

Leave a comment