I am trying to plot the Highmap using the constructor i.e. Highcharts.Map.
The following is the link to my jsfiddle code:
http://jsfiddle.net/rt4x9ngo/3/
var options1 = {
chart: {
renderTo: 'container',
},
series : []
};
var drawMap = function () {
var newSeriesData = {
name: 'Countries',
mapData: Highcharts.geojson(Highcharts.maps['custom/world']),
color: '#E0E0E0',
enableMouseTracking: false,
};
options1.series.push(newSeriesData);
var chart = new Highcharts.Map(options1);
};
drawMap();
I followed the method used in the following jsfiddle link :
http://jsfiddle.net/amyamy86/pUM7s/
I am unable to find out what is the thing I am missing here.
Related
I wonder if anyone can see where I am going wrong. I am trying to get my line to appear on my chart in a popup. It works OK if I have the chart in a separate div but not in a popup. I am pulling data from Geoserver and I can see all the data fine. I am using leaflet and Highcharts.
Here is the relevant code.
var field_boundaries = L.tileLayer.wms("http://localhost:1997/geoserver/RSAC/wms", {
layers: 'RSAC:results_clipped_with_growth_small_new',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "myattribution"
});
//loads the geojson layer
var owsrootUrl = 'http://localhost:1997/geoserver/RSAC/wms';
var defaultParameters = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : 'RSAC:results_clipped_with_growth_small_new',
outputFormat : 'json',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var ajax = $.ajax({
url : URL,
dataType : 'json',
jsonpCallback : 'getJson',
success : function (response) {
new L.geoJson(response, {
onEachFeature: function (feature, url) {
// Create div with class name highchart
var div = L.DomUtil.create('div', 'highchart');
// Bind popup to layer with div as content
url.bindPopup(div);
// Handle event when popup opens
url.on('popupopen', function (e) {
console.log(e.target); // layer object
console.log(e.target.feature); // layer's feature object
console.log(e.popup); // popup object
console.log(e.popup.getContent()); // the div
$(".highchart").on('click', function onPopUpOpen(e){
$(".highchart")(e.popup.getContent(),{
chart: {
type: 'line',
renderTo: 'bindPopup'
},
title: {
text: 'Growth'
},
series: {
lineWidth:1,
colour: '#FF0000'
},
xAxis: {
allowDecimals: true,
categories: ['20151114', '20151126', '20151208', '20151220', '20160113', '20160125', '20160206', '20160218', '20160301', '20160313', '20160325', '20160406', '20160418', '20160430', '20160512', '20160524', '20160605', '20160629', '20160723', '20160804', '20160816'],
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
startOnTick: false,
minPadding: 0.05,
title: {
text: 'Crop Growth',
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}{point.y}'
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
cursor: 'pointer',
color: '#4D4D4D',
lineWidth: 3,
name: 'Growth',
data: [parseFloat(feature.properties.Date_20151114),parseFloat(feature.properties.Date_20151126),parseFloat(feature.properties.Date_20151208), parseFloat(feature.properties.Date_20151220), parseFloat(feature.properties.Date_20160113), parseFloat(feature.properties.Date_20160125), parseFloat(feature.properties.Date_20160206), parseFloat(feature.properties.Date_20160218), parseFloat(feature.properties.Date_20160301), parseFloat(feature.properties.Date_20160313), parseFloat(feature.properties.Date_20160325), parseFloat(feature.properties.Date_20160406), parseFloat(feature.properties.Date_20160418), parseFloat(feature.properties.Date_20160430), parseFloat(feature.properties.Date_20160512), parseFloat(feature.properties.Date_20160524), parseFloat(feature.properties.Date_20160605), parseFloat(feature.properties.Date_20160629), parseFloat(feature.properties.Date_20160723), parseFloat(feature.properties.Date_20160804), parseFloat(feature.properties.Date_20160816)]
},
]
});
// Create the chart
//var chart = new Highcharts.Chart(options);
});
}).addTo(mymap);
}
});
}
});
from http://api.highcharts.com/highstock/Chart.destroy
destroy () - Removes the chart and purges memory. This method should be called before writing a new chart into the same container. It is called internally on window unload to prevent leaks.
Here is how I call destroy on button click
http://jsfiddle.net/ihtus/20Ld7hg8/
var hc_options = {
chart: {
renderTo: 'container'
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
};
var chart=new Highcharts.Chart(hc_options);
$('#button').click(function () {
chart.destroy();
$(this).attr('disabled', true);
});
In my project I am redrawing the chart many times in setInterval (using updated data).
Here is the code with setInterval http://jsfiddle.net/ihtus/teg540zh/
function init_graph() {
var hc_options = {
chart: {
renderTo: 'container'
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
};
var chart=new Highcharts.Chart(hc_options);
}
var sint = setInterval(function(){
init_graph();
}, 4000);
My question is: how can I destroy the chart before writing a new chart into the same container (as it's suggested in official documentation)?
Thanks
From discussion in comments:
It should be possible to use Highcharts.charts array and inside this array find specific chart (if exist) for destroy:
function init_graph() {
var hc_options = {
chart: {
renderTo: 'container'
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
};
var chart=new Highcharts.Chart(hc_options);
}
var sint = setInterval(function(){
Highcharts.charts[0] && Highcharts.charts[0].destroy();
init_graph();
}, 4000);
Example: http://jsfiddle.net/teg540zh/1/
I am using a constructor to plot the Highmaps.
$(function() {
var options1 = {
chart: {
renderTo: 'container',
},
series: [{
name: 'Countries',
mapData: Highcharts.maps['custom/world'],
color: '#E0E0E0',
enableMouseTracking: false,
}, ]
};
var drawMap = function(data) {
var newSeriesData = {
type: 'mapbubble',
mapData: Highcharts.maps['custom/world'],
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
}
options1.series.push(newSeriesData);
var chart = new Highcharts.Map(options1);
};
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function(data) {
var i = 0;
/*while (i < data.length){
drawMap([data[i]]);
i++;
}*/
drawMap(data);
});
});
jsfiddle.
Using a function I am able to plot the whole data in a one go.
I want to iterate through the data and plot it one by one so that the page won't refresh and the new data will not replace the existing ones.
I have tried doing it like:
while (i < data.length){
drawMap([data[i]]);
i++;
}
But only the last point is plotted in the map. Rest of the points are not plotted. (I guess the map is plotted with all the points without persistence. So only the last point is there.)
Note: I followed this and tried for Highmaps.
Can we disable zoom on highchart graph while graph is loading.
I have multiple graphs therfore would like to disable the zoom option until all graphs gets loaded.
It is possible to change zoomType of a chart dynamically, but it is not a part of official API. That way after all charts are loaded you will be able to change their zoomType from none to some.
$(function () {
$('#container').highcharts({
chart: {
zoomType: ''
},
xAxis: {
minRange: 1
},
series: [{
data: [1,2,3,4,5,6,7]
}]
});
function enableZoom(zoomType) {
var chart = $('#container').highcharts(),
zoomX = /x/.test(zoomType),
zoomY = /y/.test(zoomType);
chart.options.zoomType = zoomType;
chart.pointer.zoomX = zoomX;
chart.pointer.zoomY = zoomY;
chart.pointer.zoomHor = zoomX;
chart.pointer.zoomVert = zoomY;
}
$('#zoomX').click(function () {
enableZoom('x');
});
$('#zoomY').click(function () {
enableZoom('y');
});
$('#zoomXY').click(function () {
enableZoom('xy');
});
$('#noZoom').click(function () {
enableZoom('');
});
});
JSFiddle: http://jsfiddle.net/pearp126/
you can do so by simple setting zoomType as null in your chart config
zoomType: null
See the documentation here for more details
Basically the only thing you need to get done is removing the chart and replacing it with one with the settings you like.
See the code below:
var chart = $('#container').highcharts();
function renderChart(){
chart = new Highcharts.Chart(chart.options);
chart.render();
}
Once you want to enable zooming (or any other setting):
$('#container').highcharts().options.chart.zoomType = 'xy';
renderChart();
To be honest I'm not sure what happens to the old chart. Hopefully it's just overwritten and doesn't it impose a big memory issue.
I created a fiddle you can find here
Basically you can stop the "selection" event (zoom), when the loading label of the chart is displayed.
Using the default Highcharts function .showLoading() for show the loading label, and the default variable loadingShown, for verify is the loading label is displayed or not.
So, by using the function .showLoading(), let's say before doing an AJAX request, and validating with the variable loadingShown if the loading label is displayed or not, we can stop the selection event.
Another way, is to use a thirdparty loading mask, and add it to the chart's container.
In the next example you'll find how to cancel the zoom using the .showLoading() function and how to use jQuery plugin: pLoading https://github.com/joseshiru/p-loading (for show the loading mask)
$(function () {
var setEvents;
var chart;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
events: {
selection: function () {
//Quit the selection event, while the loading spinner is displayed.
if (chart.loadingShown) {
return false;
}
}
}
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
setEvents = function () {
var $showLoadingBtn = $('.show-loading');
var $hideLoadingBtn = $('.hide-loading');
var $showExternalMask = $('.show-toggle-mask');
var $hideExternalMask = $('.hide-toggle-mask');
$showLoadingBtn.on('click.showLoading', function () {
chart.showLoading();
});
$hideLoadingBtn.on('click.hideLoading', function () {
chart.hideLoading();
});
$showExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'show'});
});
$hideExternalMask.on('click.toggleMask', function () {
$('#container').ploading({action: 'hide'});
});
}();
});
Example in jsfiddle: http://jsfiddle.net/8p2fzbxw/3/
I want to change the zoom-type from "x" to "xy" without creating new instance,
I want do do it like update() method they have..
located in myChart.options.chart.zoomType
You can do something like this:
var chart1 = new Highcharts.StockChart({
chart: {
zoomType: 'xy', //requried!
...
}
...
});
function SwitchToZoomX() {
chart1.pointer.zoomX = true;
chart1.pointer.zoomY = false;
chart1.pointer.zoomHor = true;
chart1.pointer.zoomVert = false;
}
function SwitchToZoomY() {
chart1.pointer.zoomY = true;
chart1.pointer.zoomX = false;
chart1.pointer.zoomVert = true;
chart1.pointer.zoomHor = false;
}
With Highcharts v5 you can now do this:
chart1.update({chart: {zoomType: "y"}})
The update function dynamically updates the chartoptions to imperitively change zoomType post render.
First Prepare a string for the chart to display
Clone Series To Redraw as highcharts set it null after draw.
var seriesClone=[{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
Series Options To SET
var chartOptions={
chart: {
renderTo:'container',
zoomType: 'xy'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
}
var chart = new Highcharts.StockChart(chartOptions);
And When you want to change the value of ZoomType redeclare the chart like this
chartOptions.chart.zoomType='y';
chartOptions.series=seriesClone;
myChart=new Highcharts.StockChart(chartOptions);
Working example JSFIDDLE