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
Related
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 :)
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!
Is there a way to refresh the charts with remote data if you don't use datasource but instead dynamically create a series set with the return data from the API? What I would like to do is have call the API again and rebuilt the chart.
When using Aurelia, there is a 3rd party bridge between kendo and aurelia called the aurelia-kendo-bridge. When using that they have a recreate() function that can be run to reload the charts. I just had to target all my charts and it worked. Thanks very much #Jeroen Vinke for all the help.
using this you can call the api from controller and if you want live update try to refresh the chart at particular time.
$("#chartere").kendoChart({
dataSource: {
transport: {
read: {
url: '#Html.Raw(#Url.Action("method", "controller"))',
dataType: "json"
}
},
group: {
field: "title",
Color: "Color"
}
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
field: "value",
colorField: 'Color',
groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
});
and use this for refresh the chart
chart.dataSource.read();
chart.refresh();
please check this url
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh
Every kendo widget have a setOptions function that allow you to change the widget's option the same way you initialized them. You'll be able to replace the series using that function.
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}]
});
var chart = $("#chart").data("kendoChart");
chart.setOptions({
series: [{
data: [4, 5, 6]
}]
});
chart.refresh();
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();
}}
I have the following scenario in haml:
#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}
and in javascript:
$(function(){
$('#ownershipChart').highcharts({
chart: {
type: 'pie'
},
title:{
text: 'Ownership'
},
plotOptions:{
pie:{
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $('#ownershipChart').attr('chart-data')
}]
});
});
As you can figure, I'm trying to create one highcharts function that applies across these two charts at the same time. First, I know this is incorrect because $('#ownershipChart').attr('chart-data') isn't returning anything. Second, is this the right way to think about it? I'm currently dynamically generating the haml div id="ownershipChart" so dynamically generating a highcharts js object every time also feels wrong.
What's the best way to generate multiple highcharts when the div ids they are attached to is unknown and varies user by user?
You could instead use a class, and loop through each instance creating the chart as you go. Something like this:
$(function () {
$('.ownershipChart').each(function() {
$(this).highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Ownership'
},
plotOptions: {
pie: {
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $(this).attr('chart-data')
}]
});
});
});
Note that the data property is filled by a reference to this, which means the data will be read from the current element in the iteration.