ChartJs not working with this JSON Object

Question

I am having a really hard time getting this ChartJS to display this JSON object that is being returned to me from a Websocket. All I want it to do is display on here like a normal bar graph. Any help will be appreciated.

Json

[
  {
    "title": "Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Tweets",
        "data": [
          8,
          1,
          2,
          0
        ]
      },
      {
        "name": "Retweets",
        "data": [
          8679,
          4692,
          2105,
          0
        ]
      },
      {
        "name": "Replies",
        "data": [
          3427,
          789,
          1391,
          0
        ]
      },
      {
        "name": "Quotes",
        "data": [
          284,
          66,
          73,
          0
        ]
      },
      {
        "name": "Favorites",
        "data": [
          0,
          0,
          0,
          0
        ]
      }
    ]
  },
  {
    "title": "Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Tweets",
        "data": [
          8,
          1,
          2,
          0
        ]
      }
    ]
  },
  {
    "title": "Retweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Retweets",
        "data": [
          8679,
          4692,
          2105,
          0
        ]
      }
    ]
  },
  {
    "title": "Replies",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Replies",
        "data": [
          3427,
          789,
          1391,
          0
        ]
      }
    ]
  },
  {
    "title": "Quoted Tweets",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Quotes",
        "data": [
          284,
          66,
          73,
          0
        ]
      }
    ]
  },
  {
    "title": "Favorites",
    "y_axis_label": "Number of Tweets",
    "x_axis_labels": [
      "12AM-06AM",
      "06AM-12PM",
      "12PM-06PM",
      "06PM-12AM"
    ],
    "series": [
      {
        "name": "Favorites",
        "data": [
          0,
          0,
          0,
          0
        ]
      }
    ]
  }
]

chartJs.js

function log(message) {
  console.log((message));
}

function buildChart(title, yAxisLabel, xAxisLabels, series){
var timeStamp = json.map(function (item) {
        return item.timestamp;
    });
    var tweet = json.map(function (item) {
        return item.original_tweet;
    });
    var retweet = json.map(function (item) {
        return item.retweet;
    });
    var shared = json.map(function (item) {
        return item.shared;
    });
    var quoted = json.map(function (item) {
        return item.quoted;
    });

    var data = {
        labels: timeStamp,
        datasets: [
            {
                label: timeStamp,
                fillColor: "rgba(0,238,238, 0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: tweet
            },
            {
                label: timeStamp,
                fillColor: "rgba(255,153,51, 0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: retweet
            },
            {
                label: timeStamp,
                fillColor: "rgba(255,204,0, 0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: shared
            },
            {
                label: timeStamp,
                fillColor: "rgba(0,51,255, 0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: quoted
            }

        ]
    }};

    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 1000;
    ctx.canvas.height = 800;
    var myChart = new Chart(ctx).Bar(data, options);

    var options = Chart.defaults.global = {
        responsive: true,
        maintainAspectRatio: true,
        tooltipFillColor: "rgba(0,0,0,0.8)",
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

    };
    var legendHolder = document.createElement('div');
    var formattedDate = new Date();
    document.getElementById("content").innerHTML = formattedDate;

    //document.getElementById('js-legend').innerHTML = myChart.generateLegend();

});

Answer 1

Create a canvas element in your HTML file.

<canvas id="myChart" width="400" height="400"></canvas>

Getting the context of the canvas element we want to select.

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

Assigning Serialized version of your json object to a variable.

var json = [{"title":"Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Tweets","data":[8,1,2,0]},{"name":"Retweets","data":[8679,4692,2105,0]},{"name":"Replies","data":[3427,789,1391,0]},{"name":"Quotes","data":[284,66,73,0]},{"name":"Favorites","data":[0,0,0,0]}]},{"title":"Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Tweets","data":[8,1,2,0]}]},{"title":"Retweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Retweets","data":[8679,4692,2105,0]}]},{"title":"Replies","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Replies","data":[3427,789,1391,0]}]},{"title":"Quoted Tweets","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Quotes","data":[284,66,73,0]}]},{"title":"Favorites","y_axis_label":"Number of Tweets","x_axis_labels":["12AM-06AM","06AM-12PM","12PM-06PM","06PM-12AM"],"series":[{"name":"Favorites","data":[0,0,0,0]}]}];

Making the datasets array to show graph. I am not customizing colors right now but you can do it.

var datasets = [];

Generating Graph for 0 indexed based dataset. You can apply mapper and reducer to aggregate the json variable.

json[0].series.forEach(function(set){
 datasets.push({label: set.name, data: set.data})
});

Preparing data for Bar Graph

var data = {
    labels: json[0]["x_axis_labels"],
    datasets: datasets
};

Drawing the graph

var myBarChart = new Chart(ctx).Bar(data);

click here to see the live demo