Highcharts Map not Zooming Properly - javascript

I have created a highcharts map. JS Fiddle of my current code is here: http://jsfiddle.net/z8X6B/
The problem I'm having is that the zoom in/out controls are not doing anything. If I click zoom in a lot, eventually the label for the one item on my map will start to move, but the item itself will not move at all... Any idea what's going wrong here?
(P.S. Please ignore that the map is rendered upside down. That's an easy enough fix once I get the zooming issue figured out.)
If you don't want to look at the JS Fiddle, here's my code:
$(function () {
var ziggity = [
{
"name": "NC",
"path": "M 1221.648339 1496.391992 L 1251.769129 1516.716005 1285.691083 1567.0347 1322.344871 1588.961523 1367.204249 1602.683275 1396.729847 1599.522719 1413.409369 1616.742001 1461.498256 1612.035805 1474.546765 1581.433762 1539.247921 1592.400537 1623.318062 1714.538994 1673.870442 1745.102025 1700.481277 1752.528223 1719.631016 1739.195908 1748.867424 1747.600069 1735.370335 1788.955671 1749.279688 1795.547843 1766.863095 1830.481442 1757.871313 1871.720684 1778.45624 1907 1982.022936 1897.97301 2041.158198 1898.211111 2341.451457 1887.522793 2415.395923 1889.640817 2708.347125 1877.270995 2830.379806 1876.36231 3200.180822 1875.288164 3531.997105 1875.977581 3907.795109 1875.249153 4419.870741 1878.320926 4673.524423 1877.729709 4978.370739 1877.20777 4980.769668 1882.743284 5056.94493 1881.705459 5399.710743 1881.706132 5732.93195 1881.951632 5737.598665 1847.810358 5765.120783 1749.240545 5818.608776 1616.380141 5888.589997 1495.002397 5946.12261 1386.439737 5974.963568 1341.209275 5988.277728 1300.262615 6000 1237.999854 5983.05819 1101.123344 5950.091235 974.6876334 5933.282587 957.9687672 5900.725205 951.9234211 5878.460959 962.4160112 5849.211101 957.0620998 5726.053942 916.7611374 5658.21945 886.9083734 5597.810408 843.7723939 5580.31174 842.410375 5512.9265 793.7926898 5428.855686 727.5750299 5344.784873 647.777537 5298.004737 592.0618836 5265.860963 533.7990867 5244.079597 524.1290888 5204.170071 537.8972503 5183.320165 582.0555847 5130.810037 598.6500195 5045.978587 598.8538179 4924.432149 581.2020529 4840.362007 558.4264063 4776.80416 529.1769663 4725.758139 495.0814293 4642.528666 459.40326 4577.070909 423.4325088 4504.8293 370.1079553 4459.423824 331.4884977 4395.894896 250.3908653 4365.86557 186.5690135 4319.619426 68.43052026 4323.173097 34.84279773 4307.154004 7.345485667 4275.849554 0 4251.868328 9.571798052 4243.024503 34.27848471 4206.895292 63.95502702 4153.918425 73.87523287 4075.244026 74.1637791 3983.330791 60.77832811 3915.87628 40.32450345 3887.778473 66.06363407 3663.375994 256.5949455 3443.602569 441.0486259 3338.202332 533.1580971 3124.976699 707.472976 2990.769131 707.9209289 2795.92117 712.1220005 2370.264841 717.5673858 2380.654822 795.6114054 2277.818958 911.0460388 2206.167834 868.8698623 2195.577437 896.7330698 2212.23342 912.8109463 2187.603872 940.5281992 2068.483264 946.6118836 1772.322728 958.2956518 1501.286726 967.0670535 1376.643267 973.3706788 1344.072435 963.0919761 1280.688101 973.4110349 1269.201889 951.9873183 1252.451079 958.6164829 1172.350235 933.8142867 1149.217747 932.7825154 1072.597268 902.1226291 1052.664026 884.0599042 1033.705958 896.443851 816.163329 839.2484733 551.7020216 834.0015057 472.0410147 829.7842916 189.9868845 830.0405529 0 831.0057367 22.36109058 989.7189413 66.0099071 1019.78492 82.55492167 1002.701504 150.513833 1005.075789 200.65664 1037.746755 190.6917003 1072.742233 211.4911664 1088.770337 206.442452 1115.836511 221.7600916 1135.017773 275.8035971 1158.979889 295.448322 1186.660149 333.7646146 1191.130934 369.983273 1216.884189 457.9359543 1219.301521 484.2347328 1227.719806 497.5872274 1217.264882 553.8548037 1217.463972 589.1850443 1250.302416 605.4778585 1249.887421 663.7267206 1286.399617 680.1869959 1278.988216 718.0230991 1306.803669 727.1433358 1327.622044 764.1165775 1329.726615 781.9293191 1353.270373 808.1749674 1354.173005 836.0521837 1369.802928 894.1140813 1359.27469 914.8005617 1370.866985 942.3953136 1422.938481 958.553621 1429.663827 948.3902837 1455.412374 957.2603377 1474.478621 988.8042106 1477.405785 1009.781898 1458.993307 1054.132841 1514.299346 1133.549717 1555.730952 1164.295292 1532.999025 1148.693171 1514.569732 1150.692615 1489.483698 1186.347017 1480.398191 1221.648339 1496.391992 Z"
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text: ''
},
mapNavigation: {
enabled: true
},
series : [{
name: 'States and territories',
data: ziggity,
color: Highcharts.getOptions().colors[2],
states: {
hover: {
color: Highcharts.getOptions().colors[4]
}
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
width: '80px' // force line-wrap
}
},
tooltip: {
pointFormat: '{point.name}'
}
}]
});
});

Looks like a bug, reported here: https://github.com/highslide-software/highcharts.com/issues/2759
Thanks!

Related

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.
Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation
The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.
By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation
option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

Javascript page re-route after d3.js event

I experimenting with d3.js and how to implement the framework.
At this stage of experimental implementation, I would like to make the filled Countries create alerts when I click them.
The ultimate goal is to change the alert to a page re-route, using the country name to decide which page it gets routed to.
In depth explanations are greatly appreciated.
Here is the code:
var map = new Datamap({
element: document.getElementById('container'),
fills: {
PARTS:'green',
defaultFill: 'black'
},
data: {
USA: {
fillKey: 'PARTS'
},
IRL: {
fillKey: 'PARTS',
}
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography, data) {
if(data.fillKey=='PARTS'){
alert(geography.properties.name);
}
});
}
});

Highcharts pie chart list of selected section

I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]
USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.

How to display a multi-line title in a Highslide pop-up while using Highcharts?

I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.
Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.

Categories