CODEWITHSUNDEEP
arraysjsonhighcharts
marialaustsen
marialaustsen

Reputation: 105

Highstock highcharts stacked column jQuery.getJSON array not working

I have developed a very simple column chart from a json three dimensional array:

0: timestamp in millliseconds 1:given recognition 2:received recognition

[[1490288274653,7,175],[1490374674653,1,1],[1490806674653,1,1],[1490979474653,3,3],[1491065874653,4,4],[1491411474653,6,0],[1491497874653,2,0],[1491584274653,18,0],[1491843474653,8,0],[1491929874653,1,0],[1492621074653,25,0],[1492707474653,12,0],[1492793874653,2,0],[1501174674653,2,0],[1503593874653,2,2],[1510765074653,1,0],[1510851474653,1,1],[1510937874653,5,0],[1511197074653,7,3],[1511369874653,7,2],[1511542674653,1,0],[1511801874653,7,3],[1511974674653,1,0],[1512493074653,1,1],[1512665874653,2,2],[1512752274653,9,4],[1513184274653,2,2],[1513270674653,2,2],[1513616274653,3,0],[1513789074653,4,2],[1514912274653,1,0],[1515430674653,1,0]]

The array displays timestamp on the xAxis and given recognition on the y axis. How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?

I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.

I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?

How will I achieve a similar column like this CSV column:

http://marialaustsen.com/columncsv.html

HTML:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>myGraph</title>

    <!--
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>

    <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->

    <!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->

    <script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>

<body>

    <div id="container" style="height: 400px; width: 100%"></div>

    <script>
        $(function() {

            console.log($);

            $.getJSON('http://localhost:3000/recognition', function(data) {

                // Create the chart

                window.chart = new Highcharts.StockChart({

                    chart: {

                         type: 'column',

                        renderTo: 'container'

                    },

                    legend: {
                        enabled: true,

                    },
                    tooltip: {
                            pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
                            valueSuffix: ' k',
                            shared: true,
                        },

                    series: [{

                        name: 'Brands',

                        data: data


                    }],

                    rangeSelector: {

                        selected: 1,

                        inputDateFormat: '%Y-%m-%d',

                        floating: true,

                        y: -75,

                        verticalAlign: 'bottom'

                    },

                    title: {
                        text: 'Team members received and sent recognition'
                    },

                    navigator: {
                        margin: 50
                    },
                    xAxis: {
                        type: 'datetime',
                        title: {
                            text: 'DATES'
                        }
                    },

                    yAxis: {
                        title: {
                            text: 'BRANDS'
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal'
                        }
                    },

                }, function(chart) {

                    // apply the date pickers

                    setTimeout(function() {

                        $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()

                    }, 0)

                });

            });

            // Set the datepicker's date format

            $.datepicker.setDefaults({

                dateFormat: 'yy-mm-dd',

                onSelect: function(dateText) {

                    chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());

                    //this.onchange();

                    this.onblur();

                }

            });

        });
    </script>
</body>

</html>

Upvotes: 0

Views: 228

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

You need to prepare your data - split it into 2 separate series:

  series: (function() {
    var series = [{
      name: 'received recognition',
      data: []
    }, {
      name: 'given recognition',
      data: []
    }];

    data.forEach(function(p) {
      series[0].data.push([p[0], p[1]]);
      series[1].data.push([p[0], p[2]]);
    });

    return series;
  })()

Live demo: http://jsfiddle.net/kkulig/88sr9ofn/

Upvotes: 0

Related Questions