Develop Reference

Cannot remove heat layer on leaflet map

I am trying to build an application that uses leaflet, PostgreSQL and PHP. I have created the APIs in PHP and added some layers from PostgreSQL and it works fine. The main theme of the app is to allow the user to be able to filter the points using some fields(its working fine) and I am also trying to show a heatmap that also gets filtered based on the form. I used this heatmap.js (https://github.com/Leaflet/Leaflet.heat) addon for leaflet. Initially all the data loads on my webpage and I am able to add the heat layer too using this code below:
geoJson2heat = function(geojson, weight) {
return geojson.features.map(function(feature) {
return [parseFloat(feature.geometry.coordinates[1]),
parseFloat(feature.geometry.coordinates[0]),
parseFloat((feature.properties[weight]))];
});
}
var geoData = geoJson2heat(lyr, 'area_cos');
var myconf = {
minOpacity: 0.7,
radius: 25,
blur: 25,
max: 1300
};
var heat = L.heatLayer(geoData, myconf).addTo(map);
layerControl.addOverlay(heat, 'Heat Map');
This displays the heatmap perfectly fine. Now I also have a form that allows user to take inputs and filter the data based on that. So when a user submits the form, it gets the filtered data from postgresql and displays it. When I try to apply the same concept to this heat layer, it does not work. I am not able to remove the layer, rather it shows me an error. This is the code I am trying to use:
$('#filterForm').submit(function(e){
e.preventDefault()
map.removeLayer(heat);
layerControl.removeLayer(heat);
.
. rest of the code here working fine
.
});
I get this error:
Uncaught TypeError: Cannot read properties of undefined (reading '_leaflet_id')
I try to print some properties of the heat layer to see if its displaying or not to make sure my layer is correct in the code but get the same error (even thought the layer is perfectly visible on the map and works fine). But if I try to print the properties of this layer outside of this jquery form submit listener, it works and shows me the correct information. I suspect that it has something to do with me calling the remove layer in the jquery listener specifically for the heat layer (because I removed other layers, point layer within this jquery listener and its working fine). I was hoping if you could tell me what the issue is and help me get a work around of this. I am just a beginner, so stuck in here.
Thanks!

dynamicaly generate multiple highcharts and append to jquery tabs

I have 2 charts: a linechart and a donut chart which uses highcharts. These charts are linked to each other. So when either of the chart is hovered the relevant point on the charts are highlighted.
You can check my demo here http://jsfiddle.net/livewirerules/rmxjmsy1/2/
Now what I'm trying to achieve is, I have several tabs, which are separated to 7,14,30 days..on each tab the line chart will have different values based on the duration. So when the user clicks on the tabs, that person will be able to see the chart within that period without losing the highlighting point of the charts.
I was figuring out some methods and I though when the user clicks on a tab, post the duration and do the relevant calculations and append the result to the chart container.
$('#ui-id-2').click(function(){
$.ajax
({
url: '<?php echo base_url('index.php/chart')?>',
data: {"duration": 14},
type: 'post',
success: function(result)
{
$( "#container3" ).append(result);
}
});
});
and on the PHP I echoed the linechart code. I'm not sure if its a correct approach but I wanted see if it works. But unfortunately it didn't draw the chart.
Can someone tell me what would be the best way to achieve this?
Any help will be appreciated.
Thanks

How to use jQuery when redrawing a chart?

I currently have a chart which I place in my page by calling
function myChart(aParameter) {
// here is some code which queries data based on aParameter
// and sets a variable later used for series: [...] in the chart below
$("#mychartid").highcharts({...})
}
This function is then called when a choice on some radio buttons is done:
$('#productselect input[type=radio]').change(function(){
myChart($(this).val())
})
It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.
When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.
The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?

You can still create the chart exactly as you are, except that you assign it to a variable. So
$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();
Then you can perform whatever actions you want on chart, including the
chart.series[0].setData(data,true);
Example:
http://jsfiddle.net/3d3fuhbb/111/
** UPDATED to correct code **

Toggle between charts using highcharts

I have requirement where in need to switch between different charts using options from drop down or radio button. The chart i click must overwrite previous chart and show different chart with same data.
I have simulated similar kind of code but finding it difficult to overwrite with previous.
Here is the jsfiddle reference in my comments:
Any help appreciated.
Thanks,
Sohan

You can also use update() function, which allows to update type of serie, so data will be the same, but line can be replaced with column or other types.
http://api.highcharts.com/highcharts#Series.update()
EDIT:
$.each(chart.series,function(i,serie){
serie.update({
type:'column'
});
});
Couple of series:
http://jsfiddle.net/GGvmM

Can highcharts export a chart AND table data?

I'm trying to figure out if highcharts can do the following:
Render a standard horizontal bar chart that contains separate table data beneath it (imagine a bar chart with an html-like table beneath it.)
The user would be able to export the entire svg using the exporting.js file that highcharts provides.
This might seem vague, I'm trying to think through this though. I'm not familiar with highcharts at all, but have looked thoroughly at the documentation. It is my understanding that something like this wouldn't be possible using highcharts, as it's text capabilities / options aren't that flexible to represent a data table.
Any possible insight would be great, thanks to everyone!
D.

If you check the HighCharts forum you can see a hack to get that.
It is not very clean but it does wonders. If your datatable if very large you may want to think about only showing portions of the data at a time (using zoom in chart).

Stumbled on this years later looking for something related, but I also found this JSFiddle, which might be closer to what has been requested instead of the broken link above.
Highcharts.drawTable = function () {
// SVG fun
};
window.chart = Highcharts.chart('container', {
...chartConfig
});
It literally draws the table in SVG, using the series data. Not saying this is ideal, but it does, however, work for image export, whereas the showTable option doesn't.
Highcharts.chart('container', {
...chartConfig,
exporting: {
showTable: true
}
});
The third and probably best compromise is to use the subtitle HTML text to insert your table.
Highcharts.chart('container', {
...chartConfig,
subtitle: {
title: '<div>Anything goes</div>',
useHTML: true
}
});
Dynamically setting this for the chart at export (allowing you to keep whatever subtitle you want to display on the webpage) involves calling the setTitle method:
chart.setTitle({text: "New Title"});