JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var rawData = [{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0},{"1":67,"2":42,"3":21,"4":26,"5":8,"6":26},{"1":20,"2":18,"3":10,"4":8,"5":5,"6":2},{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0},{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0},{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0},{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0}];

var pointTypes = ["Ad Impressions", "Ad Clicks", "Landing Page Impressions", "Landing Page Clicks", "Offer Impressions", "Conversions"];
var seriesData = new Array(6);

rawData.forEach(function(aDay, dayIndex) {
    
    Object.keys(aDay).forEach(function(aType) {
        aType -= 1; // types are 1-6 but indicies are 0-5
        if(!seriesData[aType]) {
            seriesData[aType] = {
                name : pointTypes[aType],
                data : new Array(7)
            };
        }
        
        if(!seriesData[aType].data[dayIndex])
            seriesData[aType].data[dayIndex] = 0;
        
        seriesData[aType].data[dayIndex]+= aDay[aType + 1];
        
    });
    
});

seriesData.reverse(); // reverse to display from 1-6

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Daily Action Breakdown'
            },
            xAxis: {
                categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'User Actions'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
          // plotOptions: {
          //      series: {
          //          stacking: 'normal'
          //      }
          //  },
            series: seriesData
        });
    });