GosStat: Ukraine Import/Export

by NesterOne

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://dl.dropboxusercontent.com/u/595391/js/gostatUa.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

gostatUA.years(function (years) {
    console.log(years.map(function (year) {
        return {
            name: year.get("label"),
            y: year.get("saldo"),
            color: year.get("saldo") > 0 ? "#8bbc21" : "#910000",
            drilldown: year.cid
        };
    }));
    $("#container").highcharts({

        title: {
            text: "Обсяги експорту-імпорту товарів України"
        },
        xAxis: {
            type: 'category',

            labels: {
                rotation: 45
            }

        },

        series: [{
            type: "column",
            name: "Сальдо",
            data: years.map(function (year) {
                return {
                    name: year.get("label"),
                    y: year.get("saldo"),
                    color: year.get("saldo") > 0 ? "#8bbc21" : "#910000",
                    drilldown: year.cid
                };
            })
        }, {
            type: 'spline',
            name: 'Sum',
            data: years.map(function (year) {               
                return year.regions.reduce(function(memo, r){
                    return memo + r.get("saldo");
                }, 0) / year.regions.size();          
               
            })
        }],

        drilldown: {
            series: years.map(function (year) {
                var regions = year.regions;
                return {
                    id: year.cid,
                    data: regions.sortBy(function (r) {
                        return -r.get("saldo");
                    })
                        .map(function (r) {
                        return {
                            name: r.get("label"),
                            y: r.get("saldo"),
                            color: r.get("saldo") > 0 ? "#8bbc21" : "#910000"
                        };
                    })

                };
            })
        }
    });

});