Highmaps isn't using a color gradient - highcharts

I'm using Highmaps to show the number of relevant users from each individual country. This should then be displayed in a gradient, so that the more users there are from a country, the darker the color. I have it running in Highmaps so that it loads the data, but for some reason it's displaying all the countries in black, despite the gradient legend being white to blue. Any idea why that is? Thanks!
$(document).ready(function(){
// Basic highcharts initialization
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
var analytics_map = new AnalyticsMap('#container');
analytics_map.setTitle('# of Signups');
analytics_map.load([
["AE","31"],
["AR","51"],
["AT","71"],
["AU","81"],
["BE","91"],
["BG","9"],
["BO","22"],
["BR","37"],
["US","173"],
["UY","5"],
["ZA","19"]
]);
function AnalyticsMap(selector){
this.selector = selector,
this.title = 'Default Title',
this.setTitle = function (title){
this.title = title;
},
this.load = function(data){
$(this.selector).highcharts('Map', {
title: {
text: this.title
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 0],
keys: ['iso-a2', 'value'],
name: this.title,
dataLabels: {
//enabled: true,
//format: '{point.code}'
},
tooltip: {
pointFormat: '{point.iso-a2}: {point.value} signups'
}
}]
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>

You have an issue with the datatypes.
Do not convert your integers to strings by putting quotes around them.
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];

Related

Can I enable scrollbar for datetime x axis in Highcharts columnrange chart

I want to render a Highcharts column range chart to show runtimes of an application, with the date rendered on the x axis. However, the total timeframe that needs to be shown is more than what fits reasonably in a screen width. I see that highstock.js has a scrollbar feature, but I also see that adding a reference to highstock.js, and adding a scrollbar property in the appropriate axis is not sufficient to make a scrollbar appear. I've put an example on jsfiddle at http://jsfiddle.net/k21pzh60/3/. If I want only the timeframe from Sept 10 onward to show on the screen by default, with a scrollbar that allows the user to go backwards in time to see the Sept 6 run, is that possible?
Here is the HTML from the JsFiddle:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And the js from the JsFiddle:
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Times'
},
subtitle: {
text: 'Planned and Actual Runtimes'
},
xAxis: {
categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
},
yAxis: {
type: 'datetime',
title: {
text: 'DateTime'
}
},
tooltip: {
formatter: function () {
var duration = this.point.high - this.point.low;
var hours1=parseInt(duration/3600000);
var mins1=parseInt((parseInt(duration%3600000))/60000);
return 'Duration: ' + (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.dateFormat('%H %M',this.y);
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Planned Runtime',
data: [
['a', 1568242800000, 1568246400000],
['b', 1568044800000, 1568044800000],
['c', 1567728000000, 1567728180000],
['i', 1568156400000, 1568160000000]
]
}, {
name: 'Actual Runtime',
data: [
['a', 1568329200000, 1568329200000],
['b', 1568300400000, 1568300400000],
['c', 1568300400000, 1568307600000],
['d', 1568275200000, 1568390400000],
['e', 1568296800000, 1568296800000],
['f', 1568296800000, 1568300400000],
['g', 1568300400000, 1568300400000],
['h', 1568260800000, 1568264400000],
['i', 1568221200000, 1568221200000], ]
}]
});
});
Thank you!
You can use chart.scrollablePlotArea to achieve what you expect in Highcharts.
Code:
chart: {
type: 'columnrange',
inverted: true,
scrollablePlotArea: {
minWidth: 2000,
scrollPositionX: 2000
}
}
Demo:
http://jsfiddle.net/BlackLabel/j2kauod8/
API reference:
https://api.highcharts.com/highcharts/chart.scrollablePlotArea

resize on load of highcharts in gridster widget

Found a couple of posts that came close to solving this. I'm loading a chart into a widget and it's not filling it, instead it's centered and extended past the widget - about only 1/3 of the pie chart shows for example.
I found the resize options for gridster and it gets me almost there... the same problem exists when I load the page, but when I resize the widget the chart fills it in perfectly.
I've tried aligning the chart, removing width and height settings, addeing resize and stop elements to gridsters..
var gridster = null;
$(document).ready(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: ['auto', 140],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 6,
widget_margins: [5, 5],
resize: {
enabled: true,
resize: function (e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
},
stop: function(e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
}
}
}).data('gridster');
$('.gridster ul').css({'padding': '0'});
});
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'User data',
style: {"fontSize": "15px" , "color":"red"},
},
subtitle: {
text: 'Source: Click the slices to view categories.'
},
plotOptions: {
pie: {
showInLegend: false,
dataLabels: {
formatter: function(){
console.log(this);
if (this.percentage > 5)
return this.key + ': ' + this.y;
else
this.point.visible = false;
return '';
}
}
},
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
when page loads the pie chart is sized to fit into the gridster widget.
Add one div wrapper around widget and add class which having height and width of that widget. It will render your highchart graph in that wrapper only.
<div class="size-1x1">
Render your graph code here
</div>
CSS:
.size-1x1 {
height:100px;
width: 120px;
}

Highcharts + Highmaps module not working

I'm trying to duplicate the Highmaps Demos › Map bubble except that I want to add other charts to the same page. When I load the Highcharts script and the Highmaps module script, the chart doesn't render. The browser throws a generic error. See jsfiddle for the example.
https://jsfiddle.net/hkjbn6wg/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title: {
text: 'World population 2013 by country'
},
subtitle : {
text : 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
The error is printed, because you miss highcharts-more.js file.
Add the reference to this file and example will work.
<script src="http://code.highcharts.com/highcharts-more.js"></script>
http://jsfiddle.net/hkjbn6wg/2/

Pie Graph Click in Highcharts

I have a graph that opens up a colorbox when a piece of the pie is selected. However, I am trying to put permissions on this so that if a particular person is apart of an array of allowed pieces of the pie, then allow the click, otherwise ignore it.
Is there some advice you can give me that would point me in the right direction?
My array is called $allowedRegs, which would return NE, NW, SW, and the $person variable contains an employee Id number. The getRegMgr() function should be returning the ID number of the allowed employee. Is that allowed?
<script type="text/javascript">
$(document).ready(function() {
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: null
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>${point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
events: {
click: function(e) {
//window.console.log(this);
var point = e.point.name;
var explode = point.split("~");
var loc = explode[0];
var person = <?php echo $respid;?>
<?php
if(in_array($person, getRegMgr($allowedRegs))) {
?>
$.colorbox({ iframe:true, width:"90%", height:"90%", href: "reportDetails.php?dept=<?php echo $dept;?>&fy=<?php echo $selectedFy;?>&location="+loc+"&person="+person});
<?php } ?>
}
},
name: 'Total Revenue Earned:',
data: [
<?php
foreach($regionId as $region) {
//Get Data
$getData = mysql_query("SELECT SUM(hire_net) as rentalRev FROM dw_invoice LEFT JOIN dw_rep_zips ON dw_invoice.zip = dw_rep_zips.zip WHERE contract_type='H' and region = '".$region."' and invoice_date >= '".$fyStart."' AND invoice_date < '".$fyEnd."' GROUP BY region") or die("Cannot get data: " . mysql_error());
if(mysql_num_rows($getData) > 0) {
while($row = mysql_fetch_assoc($getData))
{
echo "['".getRegName($region)."', " . $row["rentalRev"]."], ";
}
}
}
?>
]
}]
});
});
</script>
Better is setting global variable in javascript, which value is getting form PHP. Then only what you need is add if in click event.
if(globalVariablePermission)
//do this
else
return false;

Chart rendering issue when hiding all series via clicking on legends

Steps to reproduce.
We have a chart that display 4 series of data, and we have the corresponding legends with each series.
THe initial chart is loaded with 1 years worth of data.
We then remove all data-series from the chart by clicking on the 4 legends
We then change the Zoom level of the chart - e.g. going from a 6 month zoom, to a 3 month zoom. (NOTE: We change Zoom with no data-series being displayed).
We then re-enable the data-series by clicking on the legends.
The chart does not redraw correctly. To get the chart to redraw we have to reload the entire page.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"> </div>
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 4
},
scrollbar: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
JsFiddle Example
It looks like a bug, so I've reported it to our devs here: https://github.com/highslide-software/highcharts.com/issues/1568
A simple workaround :
After some trial and error, I found out that if you do not disable the navigator, the above bug is not exhibited. (Navigator is enabled by default.)
Comment the line as shown below:
navigator: {
//enabled: false
}
Js Fiddle : http://jsfiddle.net/msjaiswal/FDXBu/1/
Certainly this is a bug in Highcharts but we can live with this above simple workaround.
This issue has been resolved in version 1.3.2 of HighStock.

Resources