Highcharts Configuration Preview
$.ajax({ url: 'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/world-population-history.csv', success: function (csv) { // Parse the CSV Data /*Highcharts.data({ csv: data, switchRowsAndColumns: true, parsed: function () { console.log(this.columns); } });*/ // Very simple and case-specific CSV string splitting function CSVtoArray(text) { return text.replace(/^"/, '') .replace(/",$/, '') .split('","'); } csv = csv.split(/\n/); var countries = {}, mapChart, countryChart, numRegex = /^[0-9\.]+$/, lastCommaRegex = /,\s$/, quoteRegex = /\"/g, categories = CSVtoArray(csv[2]).slice(4); // Parse the CSV into arrays, one array each country $.each(csv.slice(3), function (j, line) { var row = CSVtoArray(line), data = row.slice(4); $.each(data, function (i, val) { val = val.replace(quoteRegex, ''); if (numRegex.test(val)) { val = parseInt(val, 10); } else if (!val || lastCommaRegex.test(val)) { val = null; } data[i] = val; }); countries[row[1]] = { name: row[0], code3: row[1], data: data }; }); // For each country, use the latest value for current population var data = []; for (var code3 in countries) { if (countries.hasOwnProperty(code3)) { var value = null, year, itemData = countries[code3].data, i = itemData.length; while (i--) { if (typeof itemData[i] === 'number') { value = itemData[i]; year = categories[i]; break; } } data.push({ name: countries[code3].name, code3: code3, value: value, year: year }); } } // Add lower case codes to the data set for inclusion in the tooltip.pointFormat var mapData = Highcharts.geojson(Highcharts.maps['custom/world']); $.each(mapData, function () { this.id = this.properties['hc-key']; // for Chart.get() this.flag = this.id.replace('UK', 'GB').toLowerCase(); }); // Wrap point.select to get to the total selected points Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) { proceed.apply(this, Array.prototype.slice.call(arguments, 1)); var points = mapChart.getSelectedPoints(); if (points.length) { if (points.length === 1) { $('#info #flag').attr('class', 'flag ' + points[0].flag); $('#info h2').html(points[0].name); } else { $('#info #flag').attr('class', 'flag'); $('#info h2').html('Comparing countries'); } $('#info .subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>'); if (!countryChart) { countryChart = Highcharts.chart('country-chart', { chart: { height: 250, spacingLeft: 0 }, credits: { enabled: false }, title: { text: null }, subtitle: { text: null }, xAxis: { tickPixelInterval: 50, crosshair: true }, yAxis: { title: null, opposite: true }, tooltip: { split: true }, plotOptions: { series: { animation: { duration: 500 }, marker: { enabled: false }, threshold: 0, pointStart: parseInt(categories[0], 10) } } }); } $.each(points, function (i) { // Update if (countryChart.series[i]) { /*$.each(countries[this.code3].data, function (pointI, value) { countryChart.series[i].points[pointI].update(value, false); });*/ countryChart.series[i].update({ name: this.name, data: countries[this.code3].data, type: points.length > 1 ? 'line' : 'area' }, false); } else { countryChart.addSeries({ name: this.name, data: countries[this.code3].data, type: points.length > 1 ? 'line' : 'area' }, false); } }); while (countryChart.series.length > points.length) { countryChart.series[countryChart.series.length - 1].remove(false); } countryChart.redraw(); } else { $('#info #flag').attr('class', ''); $('#info h2').html(''); $('#info .subheader').html(''); if (countryChart) { countryChart = countryChart.destroy(); } } }); // Initiate the map chart mapChart = Highcharts.mapChart('container', { title: { text: 'Population history by country' }, subtitle: { text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>' }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, colorAxis: { type: 'logarithmic', endOnTick: false, startOnTick: false, min: 50000 }, tooltip: { footerFormat: '<span style="font-size: 10px">(Click for details)</span>' }, series: [{ data: data, mapData: mapData, joinBy: ['iso-a3', 'code3'], name: 'Current population', allowPointSelect: true, cursor: 'pointer', states: { select: { color: '#a4edba', borderColor: 'black', dashStyle: 'shortdot' } } }] }); // Pre-select a country mapChart.get('us').select(); } });
Highcharts Theme: Dark-unica
/** * (c) 2010-2017 Torstein Honsi * * License: www.highcharts.com/license * * Dark theme for Highcharts JS * @author Torstein Honsi */ 'use strict'; /* global document */ // Load the fonts import Highcharts from '../parts/Globals.js'; Highcharts.createElement('link', { href: 'https://fonts.googleapis.com/css?family=Unica+One', rel: 'stylesheet', type: 'text/css' }, null, document.getElementsByTagName('head')[0]); Highcharts.theme = { colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'], chart: { backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, '#2a2a2b'], [1, '#3e3e40'] ] }, style: { fontFamily: '\'Unica One\', sans-serif' }, plotBorderColor: '#606063' }, title: { style: { color: '#E0E0E3', textTransform: 'uppercase', fontSize: '20px' } }, subtitle: { style: { color: '#E0E0E3', textTransform: 'uppercase' } }, xAxis: { gridLineColor: '#707073', labels: { style: { color: '#E0E0E3' } }, lineColor: '#707073', minorGridLineColor: '#505053', tickColor: '#707073', title: { style: { color: '#A0A0A3' } } }, yAxis: { gridLineColor: '#707073', labels: { style: { color: '#E0E0E3' } }, lineColor: '#707073', minorGridLineColor: '#505053', tickColor: '#707073', tickWidth: 1, title: { style: { color: '#A0A0A3' } } }, tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.85)', style: { color: '#F0F0F0' } }, plotOptions: { series: { dataLabels: { color: '#B0B0B3' }, marker: { lineColor: '#333' } }, boxplot: { fillColor: '#505053' }, candlestick: { lineColor: 'white' }, errorbar: { color: 'white' } }, legend: { itemStyle: { color: '#E0E0E3' }, itemHoverStyle: { color: '#FFF' }, itemHiddenStyle: { color: '#606063' } }, credits: { style: { color: '#666' } }, labels: { style: { color: '#707073' } }, drilldown: { activeAxisLabelStyle: { color: '#F0F0F3' }, activeDataLabelStyle: { color: '#F0F0F3' } }, navigation: { buttonOptions: { symbolStroke: '#DDDDDD', theme: { fill: '#505053' } } }, // scroll charts rangeSelector: { buttonTheme: { fill: '#505053', stroke: '#000000', style: { color: '#CCC' }, states: { hover: { fill: '#707073', stroke: '#000000', style: { color: 'white' } }, select: { fill: '#000003', stroke: '#000000', style: { color: 'white' } } } }, inputBoxBorderColor: '#505053', inputStyle: { backgroundColor: '#333', color: 'silver' }, labelStyle: { color: 'silver' } }, navigator: { handles: { backgroundColor: '#666', borderColor: '#AAA' }, outlineColor: '#CCC', maskFill: 'rgba(255,255,255,0.1)', series: { color: '#7798BF', lineColor: '#A6C7ED' }, xAxis: { gridLineColor: '#505053' } }, scrollbar: { barBackgroundColor: '#808083', barBorderColor: '#808083', buttonArrowColor: '#CCC', buttonBackgroundColor: '#606063', buttonBorderColor: '#606063', rifleColor: '#FFF', trackBackgroundColor: '#404043', trackBorderColor: '#404043' }, // special colors for some of the legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', background2: '#505053', dataLabelsColor: '#B0B0B3', textColor: '#C0C0C0', contrastTextColor: '#F0F0F3', maskColor: 'rgba(255,255,255,0.3)' }; // Apply the theme Highcharts.setOptions(Highcharts.theme);