We Keep Coding

HighMaps: Change state name on tooltip with various sets of data

I have built a map based on a standard map provided by Highcharts. However, it has been customized to show two sets of data on the tooltip instead of one and also so that when one clicks on a state they are linked to another page with information for that state. The problem I am facing is I need to change the name of one of the states. I have the code to do that, but since I've already customized the map, I'm having a hard time getting everything to work together. Basically when I add the code for the name change, it removes one of sets of data in the tooltip for all the states. Anyone able to help me out with this (the great #ppotaczek perhaps :) ? Specifically, I need to change Distrito Federal to CDMX in the tooltip while not removing the the two data sets from the tooltip.
Here's a jsfiddle: https://jsfiddle.net/sstoker/3cdaqkyx/6/#save
Here's the relevant javascript code:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
const data = [
['mx-3622', 0.00],
['mx-bc', 5.59],
['mx-bs', 4.05],
['mx-so', 4.77],
['mx-cl', 6.91],
['mx-na', 8.88],
['mx-cm', 8.01],
['mx-qr', 4.87],
['mx-mx', 5.01],
['mx-mo', 0.089],
['mx-df', 8.12],
['mx-qt', 7.32],
['mx-tb', 3.17],
['mx-cs', 1.15],
['mx-nl', 6.88],
['mx-si', 6.64],
['mx-ch', 2.19],
['mx-ve', 0.66],
['mx-za', 8.03],
['mx-ag', 10],
['mx-ja', 3.35],
['mx-mi', 3.91],
['mx-oa', 0.8],
['mx-pu', 1.53],
['mx-gr', 0.0],
['mx-tl', 2.95],
['mx-tm', 5.47],
['mx-co', 9.46],
['mx-yu', 8.62],
['mx-dg', 4.47],
['mx-gj', 8.33],
['mx-sl', 4.35],
['mx-hg', 4.75]
];
const data1 = [
['mx-3622', 0.0],
['mx-bc', 13],
['mx-bs', 21],
['mx-so', 17],
['mx-cl', 10],
['mx-na', 3],
['mx-cm', 8],
['mx-qr', 16],
['mx-mx', 15],
['mx-mo', 31],
['mx-df', 6],
['mx-qt', 9],
['mx-tb', 24],
['mx-cs', 28],
['mx-nl', 11],
['mx-si', 12],
['mx-ch', 26],
['mx-ve', 30],
['mx-za', 7],
['mx-ag', 1],
['mx-ja', 23],
['mx-mi', 22],
['mx-oa', 29],
['mx-pu', 27],
['mx-gr', 32],
['mx-tl', 25],
['mx-tm', 14],
['mx-co', 2],
['mx-yu', 4],
['mx-dg', 19],
['mx-gj', 5],
['mx-sl', 20],
['mx-hg', 18]
];
data.forEach(function(el, i) {
el.push(data1[i][1])
});
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
backgroundColor: '#f3f7fa',
map: 'countries/mx/mx-all',
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
title: {
                   text:'<span style="font-size:9.5px"> \< Bajo | Desarrollo democrático | Alto \> </span>',
}
},
plotOptions: { //For point links
map: {
point: {
events: {
click: function() {
$('#map1').trigger(this['hc-key']);
}
}
}
}
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('http://165.22.82.145/wp-content/uploads/2019/09/IDDMEX-Logo.svg',
480, // x
335, // y
75, // width
40, // height
).add();
}
}
}
}
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0,
maxColor: 'blue',
stops: [
[.0,'#6497b1'],
[.249,'#6497b1'],
[.25,'#005b96'],
[.499,'#005b96'],
[.5,' #03396c'],
[.749,'#03396c'],
[.75,'#011f4b']
]
},
series: [{
keys: ['hc-key', 'value', 'rank'],
data: data,
name: 'Índice 2018',
states: {
hover: {
color: '#f3bbd3'
},
},
dataLabels: {
enabled: false,
format: '{point.name}',
}
}],
tooltip: {
pointFormat: ' {point.name} {point.value} <br>Ranking: {point.rank}'
},
});
});
and here is some javascript code that changes the name, but that is removing the second data series when I add it.
tooltip: {
pointFormatter: function() {
if (this['hc-key'] === 'mx-df') {
return 'CDMX: ' + this.value;
}
return this.name + ' ' + this.value;
}
}

Here's a solution to this problem. Add this code to the tooltip object.
pointFormatter: function() {
var firstRow = (this['hc-key'] === 'mx-df')
? "CDMX"
: this.name;
firstRow = firstRow + " " + this.value;
var secondRow = "Ranking: " + this.rank;
return (firstRow + "<br />" + secondRow);
}

Angular chart has not clear its old data

I'm having trouble on reload chart with updated details, I'm showing graph based on user activity on daily basis, on initial load with preset values the graph is formed precisely
Here I'm using flot chart library, in that flot chart library I'm using line graph
This is initial graph
But when I use custom values instead of loading a new graph with updated values, the custom values is get appended to the right end of x-axis on the graph.
When I use the custom values, the graph looks like,
In second graph, the included data will added to its old data at right side instead of showing it in correct order
here is my code for first graph, input data in vm.allsessionReport
input data will get by programmatic
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};
code for my second graph, input data has changed to
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-28", 0],
["2017-06-29", 0],
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};

How do I stop my Highcharts columns from changing width?

Dear Highcharts experts,
I have a Highcharts column plot that includes the ability to sort the order of the data points in various ways:
http://jsfiddle.net/9phfzewj/41/
This seems to work well. However, during some of the sort transitions the data points increase in width. I don't want this to happen, but don't understand why it takes place.
For example, clicking on "Ascending DLP" works fine, but if you then click on "Descending frequency" then the correct sort takes place, but the width of all the points increases. Clicking on "Alphabetical" makes the points revert back to their correct width.
Is anyone able to offer any help? It would be much appreciated.
Thanks in advance,
David
$(function () {
var chart;
var defaultTitle = "CT doses";
var protocolNames = ['Abdomen','Thorax','Sinus'];
var frequencies = [120,300,250];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:'Number'});
chart.xAxis[0].setTitle({text:'DLP range (mGy.cm)'});
chart.xAxis[0].setCategories([], true);
chart.tooltip.options.formatter = function(args) {
returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
return returnValue;
};
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle }, { text: '' });
chart.yAxis[0].setTitle({text:'DLP (mGy.cm)'});
chart.xAxis[0].setTitle({text:''});
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:90}});
chart.tooltip.options.formatter = function(args) {
var index = protocolNames.indexOf(this.x);
var comment = this.x + '<br/>' + this.y.toFixed(1) + ' mGy.cm' + '<br/>(n=' + frequencies[index] + ')';
return comment;
};
}
}
},
title: {
text: 'CT doses'
},
xAxis: [{
type: "category",
categories: protocolNames,
labels: {
rotation:90
}
}],
yAxis: [{
min: 0,
title: {
text: 'DLP (mGy.cm)'
}
}],
legend: {
align: 'center',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 70
},
tooltip: {
formatter: function () {
var index = protocolNames.indexOf(this.x);
var comment = this.x + '<br/>' + this.y.toFixed(1) + ' mGy.cm' + '<br/>(n=' + frequencies[index] + ')';
return comment;
},
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: 'DLP',
data: [{
name: 'Abdomen',
y: 150,
freq: 120,
drilldown: 'AbdomenDLP'
}, {
name: 'Thorax',
y: 73,
freq: 300,
drilldown: 'ThoraxDLP'
}, {
name: 'Sinus',
y: 20,
freq: 250,
drilldown: 'SinusDLP'
}],
tooltip: {
valueSuffix: ' mGy.cm'
}
}],
drilldown: {
series: [{
name: 'Abdomen DLP',
id: 'AbdomenDLP',
data: [
['up to 150', 4],
['up to 200', 2],
['up to 250', 1],
['up to 300', 2],
['up to 350', 1]
]
}, {
name: 'Thorax DLP',
id: 'ThoraxDLP',
data: [
['up to 100', 40],
['up to 110', 21],
['up to 120', 24],
['up to 130', 32],
['up to 140', 64]
]
}, {
name: 'Sinus DLP',
id: 'SinusDLP',
data: [
['up to 130', 4],
['up to 140', 2],
['up to 150', 6],
['up to 160', 7],
['up to 170', 9]
]
}]
}
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y > a.y;
});
rebuildSeries();
});
$('#sort2').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y < a.y;
});
rebuildSeries();
});
$('#sort3').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.category < a.category;
});
rebuildSeries();
});
$('#sort4').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.category > a.category;
});
rebuildSeries();
});
$('#sort5').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.freq < a.freq;
});
rebuildSeries();
});
$('#sort6').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.freq > a.freq;
});
rebuildSeries();
});
function rebuildSeries() {
var newData = {};
var newCategories = [];
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.category = chart.series[0].data[i].category;
newData.drilldown = chart.series[0].data[i].drilldown;
newData.name = chart.series[0].data[i].name;
newData.freq = chart.series[0].data[i].freq;
newCategories.push(chart.series[0].data[i].category);
chart.series[0].data[i].update(newData, false);
}
chart.xAxis[0].categories = newCategories;
chart.redraw({ duration: 1000 });
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Sort by clicking on one of the options below:
<table>
<tr>
<td><a id="sort2">Ascending DLP</a></td>
<td><a id="sort">Descending DLP</a></td>
</tr>
<tr>
<td><a id="sort3">Alphabetical</a></td>
<td><a id="sort4">Reverse alphabetical</a></td>
</tr>
<tr>
<td><a id="sort5">Frequency</a></td>
<td><a id="sort6">Reverse frequency</a></td>
</tr>
</table>

jqplot link in legend

I have a basic pie chart made with jqplot:
$(document).ready(function(){
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
Now I want to add links in the legend. Is that possible and if so how?

You can put HTML in labels:
$.jqplot(..., {
series : {
...
label : "<a href='URL'>click me</a>"
}
});
(or put the equivalent in the legend section of the jqPlot configuration object).
However, you might need to adjust the z-index of the legend before they are clickable:
.jqplot-table-legend { z-index: 1000 }
Also, I noticed some settings (like enabling zoom) block the clickability of the labels.

//I used the below method to bring hyperlink on legends, it worked for me. I did the same thing for bar chart also.
This is the string which I used to form the array.
strArr = "[<' a onclick = GoToSearch("100") href=# > NY <'/a> ' , 8561 ]"
arrOwner= eval("[" + strArr + "]")
$.jqplot.config.enablePlugins = false;
plotCAP_EquipCount1 = $.jqplot('piechartOwner', [arrOwner], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#ffffff',
shadow: false
},
axesDefaults: {
},
title: 'Ownership Data',
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
sliceMargin: 1,
startAngle: -90,
dataLabels: 'value',
highlightMouseOver: true,
highlightMouseDown: true
}
},
legend: {
show: true,
placement: 'outsideGrid',
rendererOptions: {
numberRows: 10
},
location: 'ne'
}
});

Flot Graphs: Dual axis line chart, stacking ONE axis

I am hoping someone out there can tell me if what I am trying to do is even possible with the FLOT Javascript library. I am trying to show a chart (below) with dual axis and three data sets. One data set is on the left axis and two data sets on the right axis. What I really want to be able to do is stack the two data sets on the right axis since they should show cumulatively. Thus far I have been unable to get this chart to respond to the stack: true setting at all.
If anyone could help me out with it I would GREATLY appreciate it. My code and a snapshot of the chart currently. I am trying to stack the blue and green areas which correspond to the right axis (y2).
$(function () {
var previousPoint;
var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];
var ds = new Array();
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 3,
}
});
//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
var rootElt = 'body';
$('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 35,
left: x - 5,
border: '1px solid #000',
padding: '1px 5px',
'z-index': '9999',
'background-color': '#202020',
'color': '#fff',
'font-size': '11px',
opacity: 0.8
}).prependTo(rootElt).show();
}
//Display graph
$.plot($("#placeholder1"), ds, {
grid:{
hoverable:true
},
xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
yaxes: [ { min: 0,
tickFormatter: function numberWithCommas(x)
{
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
},
}
],
y2axis: [ ],
legend: { show: true }
});
});

This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.
Two or more series are stacked when their "stack" attribute is set to
the same key (which can be any number or string or just "true"). To
specify the default stack, you can set
series: {
stack: null or true or key (number/string) }
or specify it for a specific series
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
In this case, we want to specify it within the two series objects that we want stacked, which would look like this:
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 3,
}
});
Add those two stack:true bits and include the stack plugin into your javascript sources and that will do it. See it in action here: http://jsfiddle.net/ryleyb/zNXBd/