Download compare

by ratatosk_noir

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="container"></div>

<div id="table"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Download speed comparaison'
    },

    subtitle: {
        text: 'Source: flo'
    },

    yAxis: {
        title: {
            text: 'Mb/s'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            }
        }
    },

    series: [{
        name: '3G',
        data:  [29.66, 24.18, 22.94, 26.03, 30.21, 11.52, 11.25, 18.68, 11.97, 15.82, 23.45, 13.21, 11.84, 16.59, 16.35, 9.05, 6.67, 7.94, 11.05]
    }, {
        name: 'Regus',
        data: [14.38, 17.27, 16.57, 17.09, 19.52, 19.39, 17.48, 17.88, 19.78, 19.68, 20.19, 20.5, 20.79, 20.97, 21, 22.01, 20.85, 20.47, 22.31]
    }, {
        name: 'VPN Ireland',
        data: [5.02, 7.79, 8.14, 7.84, 7.66, 7.9, 7.86, 8, 8.18, 7.91, 7.85, 8.06, 8.21, 7.46, 7.44, 7.95, 7.91, 7.95, 7.76]
    }, {
        name: 'VPN US East',
        data: [2.59, 2.31, 2.3, 2.44, 2.48, 2.51, 2.51, 2.44, 2.37, 2.15, 2.2, 2.19, 2.2, 2.44, 2.48, 2.52, 2.48, 2.46, 2.4]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});
var tabledata = [[{id: 0, name: "Billy Bob"}],];
var table = new Tabulator("#table", {
    data:tabledata,
    columns:[
    {title:"Name", field:"name"},
/*     {title:"Speed", field:"speed", sorter:"number"},
    {title:"TiP Measurement Summary", field:"tip-summary"},
    {title:"1GB Download in", field:"1gb-time"}, */
    ],
});