I've searched around for several days and have not been able to find a solution to this issue. I'm generating highcharts with not problem. Inaddition, I'm using the below simple function to get the svg code for each chart.
function generateSVG (){
var svg_xml = $('#container').highcharts().getSVG();
document.getElementById('svg_code').innerHTML = svg_xml;
}
My issue is that with the chart originally generated by highcharts I am able to mouseover the chart and see tooltips. However, when I later embed the generated svg code, even with including all the external resources, the tooltips do not work - everything becomes like a static image. After inspecting the svg code extracted next to the code used to generate the initial chart, I noticed that the line of code which includes the tooltip class for highcharts was missing in the extracted code. Am I missing something here. Below is an example of one of the functions used to generate a chart.
function highArea(theD){
setHighSize();
var theData = theD;
$.get(theData, function(data) {
Highcharts.chart('chartDisplay', {
colors: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff"],
chart: {
type: "area",
useHTML: true
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
title: {
text: chart_title
},
data: {
csv: data
},
title: {
text: chart_title
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
title: {
text: some_label
},
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/> {point.x}'
},
plotOptions: {
area: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
});
generateSVG();
});
}
Is what I'm trying to do even possible? I would really appreciate any feedback on this matter.
Thanks :)
Related
Hi I am trying to present the columns values at the top of each column so it is easier for the user to compare values.
I have got this working but when some columns are very close to each other some of the values aren't being dispalyed because I'm presuming highcharts works out that it wqouldnt fit unless it overlapped so it doesnt show the value.
Here is the code for my chart -
var chart_1_Options = {
chart: {
renderTo: 'container_chart_1',
backgroundColor: '#FFFFFF'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
column: {
animation: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return '<p style="font-size: 8px;">' + this.y + '% </p>';
}
}
}
},
legend: {
enabled: true
}
};
Here is an image of what the chart looks like, I have circled areas where the value is missing
I just want the value to show even if it can't fit, I want it to place the value somewhere inside the column if it cant fit at the top.
Thanks for any help!
I think that you can try to find those labels and show them by doing something like code below:
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
setTimeout(function() {
if (p.dataLabel.translateY === -9999) {
p.dataLabel.translate(p.dataLabel.alignAttr.x, p.dataLabel.alignAttr.y + 20)
p.dataLabel.css({
opacity: 1
})
}
}, 50)
})
}
}
Demo: https://jsfiddle.net/BlackLabel/unzgsmfr/
API: https://api.highcharts.com/highcharts/chart.events.load
I'm using highchart large tree map demo. I'm getting level data on click of each section. But also need to get the data on back button. So I'm using events drill up function to get data on click of back button. below is my code.
this.setState({
data: {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 0,
}],
data: points,
events: {
click:(e)=>{
console.log(e)
},
drillup:(e)=>{
console.log(e)
}
}
}],
// subtitle: {
// text: 'Click points to drill down. Source: WHO.'
// },
title: {
text: ''
}
}
})
But don't know drill up is not working even click is working and also I added
import drilldown from "highcharts/modules/drilldown";
drilldown(Highcharts);
But still not getting any data. Please help.
Notice that treemap series don't use the drilldown module, but has own drilldown implementation, which logic you can find here: https://code.highcharts.com/modules/treemap.src.js
What you will need to do is render a custom button while clicking the point and attach an update functionality on this button. Something like here:
Demo: https://jsfiddle.net/BlackLabel/gas07t34/
events: {
click() {
let chart = this.chart;
chart.button = chart.renderer.button('back', 500, 0, function() {
chart.series[0].update({
data: data1
})
chart.button.destroy();
}).add()
this.update({
data: data2
})
}
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I am using Highcharts in the vue.js environment. I use https://www.highcharts.com 7.2.0 and Highcharts-Vue https://github.com/highcharts/highcharts-vue#readme 1.3.5.
I have multiple highstock charts in the same page. I am trying to get the values from all the charts into the tooltip of the highstock that I am currently hovering.
Based on this http://jsfiddle.net/mjsdnngq/14/ I am trying to create my code
This is what I have now
vue template
<template>
<div class="vessChart" v-on:mousemove="updateCoordinates" >
<v-card :loading=!this.getStreamPlots.done>
<highcharts ref="chart" :constructor-type="'stockChart'" :callback="chartcallback" :options="options" ></highcharts>
</v-card>
</div>
</template>
This is the "options" as I define it for the chart as a vue data object
options: {
tooltip: {
shared: true,
pointFormat: '{series.name}: {point.y}<br>'
},
chart: {
type: "line",
zoomType: 'x'
},
title: {
text: this.streamChart.title
},
rangeSelector: {
inputEnabled: false
},
xAxis: {
ordinal: false,
type: 'datetime',
tickInterval: 5 * 60 * 1000 ,
labels: {
enabled:false
},
events : {
afterSetExtremes : this.afterSetExtremes
}
},
yAxis: {
title: {
text: this.streamChart.title
},
labels: {
enabled:true
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false
},
plotOptions: {
series: {
animation: false
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
yAxis: {
title: {
enabled: false
}
}
}
}]
},
series: [
{
name: this.streamChart.title,
pointStart: 1546300800000,
pointInterval: 5 * 60 * 1000
}
]
},
when the Highstock loads, I use callback, to get it and set it as a local vue var and also push it in an array in the vuex store, so I can have all charts available.
chartcallback(hc){
this.chart=hc;
this.currentId = this.streamChart.id;
this.chartData = this.chartData.concat(this.getStreamPlots[this.currentId].data);
this.addStreamCharts(hc); //push it to an array in vuex store
this.chart.series[0].setData(this.chartData, true, true, true);
},
and then I use the updateCoordinates to get all the values from all the charts I saved in vuex store, using the searchPoint. Then, feed the values to the tooltip of the chart I am currently hovering
updateCoordinates(e){
if (this.getStreamPlots.done && this.chart != null) {
let hce = this.chart.pointer.normalize(e);
let points=[];
this.getStreamCharts.forEach(chart => {
let point = chart.series[0].searchPoint(hce, true);
points.push(point);
});
this.chart.tooltip.refresh(points);
}
}
Problems :
1- This works but it shows all the values to the first chart I hovered. For example, I hover to the first chart, I get all the values into the tooltip as I should. But then I hover to the third chart and the values are still showed in the first chart tooltip. No tooltip in the third chart.
2- The values are in different tooltips. I would like for all the values be in one tooltip. (check the image)
Thank you
I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.
Ive searched around for a working example but havent been able to find one matching the stacked percentage column.
I've setup a fiddle to indicate where im up to, any help appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Space Overview'
},
xAxis: {
categories: ['a', 'b', 'c', 'd']
},
yAxis: {
min: 0,
title: {
text: 'Total Space (%)'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
subtitle: {
text: '+ Items relate to items in the dispay cabinets.',
align: 'left',
x: 10
},
series: [{
name: 'Free',
data: [1498, 1123, 556, 1176],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}, {
name: 'Used',
data: [1234,233,23,759],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}]
});
http://jsfiddle.net/Mooglekins/qv8z5a2o/
This is a great question! I did some digging and think I've found a good solution for you.
First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.
(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)
series: [{
name: 'Free',
data: [
{ y: 1498, url: 'http://www.google.com' },
{ y: 1123, url: 'http://www.yahoo.com' },
{ y: 556, url: 'http://www.bing.com' },
{ y: 1176, url: 'http://www.msn.com' }
]
}, {
// second series here
}
]
Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).
What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
window.open(event.point.url);
}
}
}
}
}
Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/
I hope this helps!
Highmaps / highcharts is a javascript/jquery adapter that renders maps in browsers etc.
I have a map with a single country highlighted, however, the scale of the (world) map is such that I want zoom in after the map is loaded on the country in question.
Looking at the API I feel certain this is possible.
There is an event listener, such that I can execute custom functions on load. As illustrated with this example, where a series is added on load (Js fiddle)
Additionally there is a method mapZoom allowing you to specify a point to zoom to with the following arguments:
mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])
But when I try and call this method onload (my code attempt below, JS fiddle here), nothing happens.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Assign id's
$.each(data, function () {
this.id = this.code;
});
// Initiate the chart
$('#container').highcharts('Map', {
chart: {
events: {
load: function () {
mapZoom(0.5, 100, 100);
}
}
},
title: {
text: 'Zoom on load attempt'
},
legend: {
title: {
text: 'Population density per km²'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world-highres'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
pointFormat: '{point.id} {point.name}',
valueSuffix: '/km²'
}
}]
});
});
});
mapZoom is a method that belongs to the chart object so, in order to call it as en event (load), you have to call it using this keyword.
You can edit your code like this (JSFiddle):
...
events: {
load: function () {
this.mapZoom(0.5, 100, 100);
}
}
}
...
Alternatively, you can call it whenever you want using a jQuery reference (JSFiddle):
$('#container').highcharts().mapZoom(0.5, 100, 100);
Zoom to a specific country on your map is easy
series : [{
...
data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
...
}
...and then...
var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well
If you want to zoom several countries, than you can try this
events: {
load: function () {
var mapChart = this;
['DE', 'HU', 'RO'].map(function(code){
return mapChart.get(code);
}).reduce(function(acc, current){
// Set map bounds
acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
return acc;
}).zoomTo();
}}