I wonder if anyone can tell me what is wrong in my code please? I want to be able to select a polygon and show a graph in a popup using leaflet and highchart. I have managed to create the graph in the popup, but the line is missing on it, and I also get a separate div showing the same chart (and the line) at the bottom of my web page which I don't want. Can anyone tell me how to get the line to show on the chart in the popup and to remove the separate chart? Here is my code.enter code here
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--include leaflet CSS file-->
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="markers" type="images/marker-icon" href="images/marker-icon.png" />
<!--include Leaflet Javascript file-->
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="js/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src='http://unpkg.com/leaflet#1.0.2/dist/leaflet.js'></script>
<script src="js/esri-leaflet.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
</head>
<body>
<!--Put a div element with a certain id where you want your map to be: -->
<div id="map" style="width: 1000px; height: 800px;"></div>
<div id="chartcontainer" class="highchart" style="width: 500px; height: 200px;"></div>
<!-- First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:-->
<script>
var mymap = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[51.0269253989,-1.34762355597],[51.1990603009,-0.951310026203]]);
L.esri.basemapLayer('Imagery').addTo(mymap);
//loads geoserver layer as WMS
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 : '2.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) {
L.geoJson(response, {
onEachFeature: function (feature, url) {
url.on('click', function(e){
var chartplotoptions ={
chart: {
type: 'line'
},
title: {
text: 'Growth'
},
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: {
area: {
pointStart: -20,
threshold: 10,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
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_20150125), 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)]
},
]
};
$('#chartcontainer').highcharts(chartplotoptions);
url.bindPopup($('#chartcontainer').html());
url.openPopup();
});
}
}).addTo(mymap);
}
});
</script>
</body>
</html>
You don't need the div element in your HTML markup. You can create one on the fly in your onEachFeature function and add it to the popup. Also, you need to initialize your highchart after the popup has opened, not before. In code with comments:
new L.GeoJSON(feature, {
onEachFeature: function (feature, layer) {
// Create div with class name highchart
var div = L.DomUtil.create('div', 'highchart');
// Bind popup to layer with div as content
layer.bindPopup(div);
// Handle event when popup opens
layer.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
// Now do the highcharts stuff
Highcharts.chart(e.popup.getContent(), { /**/ });
});
}
});
And don't forget to set the div's dimensions with CSS:
.highchart {
width: 500px;
height: 200px;
}
Related
I was using ArcGIS JS API 3.10 and have a Github
repository to display GeoJSON data on a map but now I have to upgrade to
4.9 version I read 3.x to 4.x migration document published by ESRI and apply he changes like link location etc. but it’s not working anymore.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>ArcGIS GeoJSON Layer</title>
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
#*<link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">*#
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
html, body, #mapDiv {
height: 500px;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.9/"></script>
<!-- ArcGIS API for JavaScript library references -->
#*<script src="//js.arcgis.com/3.10"></script>*#
<!-- Terraformer reference -->
<script src="/vendor/terraformer/terraformer.min.js"></script>
<script src="/vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>
<script>
require(["esri/Map",
"/Scripts/Refine.js",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function (Map, GeoJsonLayer, on, dom) {
// Create map
var map = new Map("mapDiv", {
basemap: "gray",
center: [-122.5, 45.5],
zoom: 5
});
map.on("load", function () {
addGeoJsonLayer("http://113.197.55.251/api/punjab");
});
// Add the layer
function addGeoJsonLayer(url) {
// Create the layer
var geoJsonLayer = new GeoJsonLayer({
url: url
});
// Zoom to layer
geoJsonLayer.on("update-end", function (e) {
map.setExtent(e.target.extent.expand(1.2));
});
// Add to map
map.add(geoJsonLayer);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
In ArcGIS 4.9 you have to use a MapView like below:
For the conversion between GeoJson and EsriJson, I suggest you the arcgis-to-geojson-utils library
Import the library in your html:
<script src="https://unpkg.com/#esri/arcgis-to-geojson-utils"></script>
javascript:
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/FeatureLayer",
"esri/layers/support/Field",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function (Map, MapView, Graphic, FeatureLayer, Field, on, dom) {
// Create mapView and map
var mapView = new MapView({
container: mapDiv,
map: new Map({
basemap: "gray"
}),
center: [-122.5, 45.5],
zoom: 5
}).when(function(mapView) {
makeRequest("http://113.197.55.251/api/punjab", function(response) {
createLayerFromGeoJSON(response, mapView);
});
});
// Request the geojson data using XmlHttpRequest
function makeRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(JSON.parse(xhr.response));
}
};
xhr.onerror = function(error) {
throw error;
}
xhr.send();
};
// Create the layer from the geojson data
function createLayerFromGeoJSON(geojson, mapView) {
// Convert geojson to esriJson using arcgis-to-geojson-utils library
var esriJson = ArcgisToGeojsonUtils.geojsonToArcGIS(geojson);
// Create an array of graphics from the esriJson
var graphics = esriJson.map(function(feature, i) {
return new Graphic({
geometry: {
type: "polygon",
rings: feature.geometry.rings
},
attributes: {
ObjectID: i,
Name: feature.attributes.Name
}
});
});
// Create a FeatureLayer from the graphics
var layer = new FeatureLayer({
title: "My feature layer",
source: graphics, // autocast as an array of esri/Graphic
geometryType: "polygon",
fields: [
new Field({
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}),
new Field({
name: "Name",
alias: "Name",
type: "string"
}),
],
objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
renderer: {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: {r: 200, g: 200, b: 200, a: 0.5},
outline: { // autocasts as new SimpleLineSymbol()
width: 0.5,
color: "black"
}
}
}
});
mapView.map.add(layer);
return layer;
};
});
In ArcGis Js 4.x version you have to also declare a view constructor (MapView for 2D or SceneView for 3D). Here is a guide on how to set up 2D view: https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html
Another way to add Json file is to convert your existing your json file to an esri json format, like in this guide: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-featurelayer-collection.
Since I don't know your json file attributes I can't really provide a working sample, but its really simple.
Map is showing in all browsers like chrome,Firefox but the map is not showing in IE 11,this code is working in chrome but its not working in IE11 once add the load event and loop the data,answer is appreciable? but its working in chrome if i use load event also
<html>
<head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js?1"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/maps/demo/all-maps/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
var mapData = Highcharts.maps['custom/world'];
var data = [{"Name": "Australia","status": "Live"}];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Name) {
if(this.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
}, {
name: 'Countries options',
visible: false,
data: data
}]
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The answer is simple - you are using arrow function which is not supported in IE11: caniuse.com/#feat=arrow-functions
If you want to make your code working on IE11, it is not enough to change arrow function to normal function, because you will have different this. Using arrow function your this is the same this like in your load() function. But when you define a normal function() (instead of arrow function), your this will be changed. That's why you need to define var chart = this; in your load() function and replace this to chart in few places. Here you have working code:
chart: {
events: {
load: function() {
var chart = this;
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach(function(el) {
if (el['name'] == chart.series[1].data[i].Name) {
if(chart.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
Working IE11 demo: https://codepen.io/raf18seb/full/RYjavx/
my json.data file is in the same directory as my index.html file. data.json file looks like this:
{
data:
[
[1369540800000,20]
]
}
when I do:
alert(JSON.stringify(jsonData, null, 4));
I get this back, so I get the values. Still dont know what is wrong.
{
"data":[
[
1369540800000,
10
],
[
1369541700000,
20
]
]
}
my html file including java script to build the charts is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>HIGHTCHARTS</title>
<style>
body
{
font: 10px arial;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$.getJSON('data.json', function(jsonData) {
chartOptions.series = jsonData;
chart = new Highcharts.Chart(chartOptions);
});
var chartOptions = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: []
};
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
I see the chart title but I dont see any charts or data points. What am I missing here?
Your data is not in the right format. Familiarize yourself with how to format data for Highcharts.
These may help:
http://api.highcharts.com/highcharts#series.data
http://docs.highcharts.com/#preprocesssing-data-from-a-file
Notably:
1) your dates must be either a javascript time stamp (epoch time, in milliseconds), or a date.Utc declaration
2) your structure needs to be like:
[[date, value],[date,value],[date,value]]
this is what I had to do to make it work:
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'area'
},
xAxis: {
type: 'datetime'
},
series: [{}]
};
$.getJSON('dude.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
I use highcharts to display a chart in my page.
It works fine, but some times data in graph is too "condensed" so I should find a way to see the graph in a greater size.
I read several posts over internet on this subject:
- in general they suggest to use highslide, but i don't want to, as my page is already overlaoded by scripts
-somebody tries to pop up the content in a popup, it could fit to me but I didn't succeed
- the only quasi-working example which fits to me seems to be the following:
(inside the options object I add this properties).
exporting: {
buttons: {
popUpBtn: {
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
win.focus();
var divtag = win.document.createElement("div");
divtag.id = "div1";
win.document.body.appendChild(divtag);
win.document.write('<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>\
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>');
this.options.renderTo=divtag;
var chart = new Highcharts.Chart(this.options);
win.document.close();
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
However it is not working, as the div tag is not inserted and all i get is this
<html>
<head>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"> </script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>
</head></html>
I can't understand the error.
I know it should be something simple but I can't get out alone.
--EDIT ---
I finally understood which could be a working strategy: create a "chartpopup.html" page, and passing it the parameters needed to build the copy of the graph I visualize.
So now I have:
index.html:
chartOptions = {
series: [
{
name: 'example',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}]
//// CUT SOME CODE
exporting: {
buttons: {
popUpBtn: {
enabled:true,
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
look this!--------> generalPurposeGlobalVar = this;
var win=window.open('./chartpopup.html','Full Size Chart','location=0,titlebar=0,status=0,width=780,height=650');
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
};
this.highChart=new Highcharts.Chart(this.chartOptions);
and chartpopup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart full Size</title>
<script type="text/javascript" src="script/jquery-1.7.1-min.js"></script>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"> </script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 650; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
var mychart=window.opener.generalPurposeGlobalVar;
mychart.options.chart.renderTo= 'container';
chart = new Highcharts.Chart(mychart.options);
});
</script>
</body>
</html>
This two pages are actually working ONLY with the default graph. If I modify and re-render the graph, I'm not able to reproduce it on the popup page!
The code I use to modify the graph is basically this:
this.chartOptions.series=[{name:field.split('_').join('\n')}];
this.highChart.destroy();
this.highChart=new Highcharts.Chart(this.chartOptions);
this.highChart.xAxis[0].setCategories(_.isEmpty(mygroups) ? [] : mygroups);
this.highChart.series[0].setData([]);
this.highChart.setTitle({text: this.highChart.title.text},{text:(field.split('_').join(' ')), });
this.highChart.redraw();//
[...]
self.highChart.series[0].addPoint(result);//it's a point I calculated before
Here is an Highcharts exemple working with an "oldschool" popup :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
</head>
<body>
Open Chart Popup
<script>
function open_chart_popup() {
window.open('popup.html', 'chart popup title', 'width=1680px height=1050px');
}
</script>
</body>
</html>
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
</body>
</html>
If this solution doesn't fit to you, could you tell us which JavaScript libraries you use (this example relies on jQuery). As the documentation says, highcharts requires either jQuery, Mootools or Prototype : http://www.highcharts.com/documentation/how-to-use
If you are able to use jQuery, you can replace that popup by using some cooler effects like those ones : http://jqueryui.com/demos/dialog/
Despite of that, if you want assistance for your script, could you consider making a jsfiddle, i'm not able to reproduce your error.
EDIT :
Okay, so you have all the stuff to deal with that.
I see two options :
You send the user input series JSON data to your server by an AJAX request. Then your server send you back a view or a bunch of html/js containing your highchart with the user datas. Back to the client, you do wathever you want with that (like triggering a popup containing the graph). I'm not too comfortable with backbone but i'm sure you can generate a template and render it back (this may help http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html)
The other solution would be to directly set your template (containing the graph) to the view but hidding him by default. Then, when the series are correctly setted by the user, you simply display the template (in a popup for example). This solution avoid a server call, so I would suggest that.
EDIT 2 :
So, I've made a jsFiddle showing a basic example on how to update a chart based on a user input : http://jsfiddle.net/MxtkM/
The example updates the last value of all the series on the graph, here is how :
$('#december_value').bind('keyup', function() {
var user_input_value = parseFloat($(this).val()); // cast to float
for (var s in chart.series) { // loop through the series
var old_data = chart.series[s].data;
var new_data = [];
for (var d in old_data ) { // loop through data objects
new_data.push(old_data[d].config); // config property contains the y value
}
new_data[new_data.length - 1] = user_input_value; // update the last value
chart.series[s].setData(new_data); // use setData method to refresh the datas of the serie
}
});
This example use the method setData by providing a new data array.
If this doesn't fit your needs, there is an another method to refresh your graph in whitch you rerender all the graph by doing var chart = new Highcharts.Chart(options);. (This is explained in the links above).
This two links are also a good read :
Reload chart data via JSON with Highcharts
http://www.highcharts.com/documentation/how-to-use (part 3 and 4)
Now you shoud be able to do whatever you want with your graph based on a user input.
After wandering around and asking questions, I found out that the best way to do it is to make fullscreen the div that contains the chart.
It's a very simple solution but it works.
This post is very helpful How do I make a div full screen?
A function like the following should do the trick on a "#graph" div:
function fullscr() {
$('#graph').css({
width: $(window).width(),
height: $(window).height()
});
}
Hope this help.
The Best solution will be HTML5 Fullscreen API for fullscreen
function fullScreen(){
var elem = document.getElementById("highchart_div_id");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
However, this piece of code only works in New Generation Browsers and I have hands on working output from Google chrome and Mozilla Firefox
Good Day
There is an example tree in the dojo campus with hyperlinks. They are not clickable. Does anyone have a dojo implementation with clickable links? Have you been able to determine which node/link was clicked? I am looking for sample code that does this.
Here is the sample code from dojo campus. How do I make these links clickable and how do I implement node selection from click of image?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
var rawdata = [{
label: 'Something <b>important</b>',
id: '1',
children: [{
label: 'Life',
id: '1.1'
},
{
label: 'Liberty',
id: '1.2'
}]
},
{
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
},
{
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
},
{
id: '2.3',
label: 'my blog'
}]
}];
function prepare() {
var store = new dojo.data.ItemFileReadStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store
});
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function(
/*Object*/
args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
}
},
"treeOne");
}
dojo.addOnLoad(prepare);
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="treeOne">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
You can do a connect to the onClick event on the Tree. When creating your Tree, add an extra onClick parameter to your constructor, pointing to a function with the following signature:
function myOnClickHandler(item, tree, evt){
//item is the node's DataStore item
//I forgot if tree is the whole tree or just the currtent node
//evt is the usual event object, with things like mouse position, etc...
console.log('clicked a tree');
}
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function( /*Object*/ args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
},
onClick: myOnclickHandler // THIS LINE //
},
"treeOne");