admin管理员组文章数量:1289867
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
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
- Are you getting an error message? – Alex Morales Commented Mar 23, 2012 at 18:24
-
uh, yes, of course, I forgot to mention it:
Uncaught TypeError: Cannot call method 'appendChild' of null– Daniele B Commented Mar 26, 2012 at 10:13 - Also, any other suitable way of having a wider graph (possibly not using additional js libraries) is acceptable for me, if you have any suggestion... – Daniele B Commented Mar 26, 2012 at 10:14
- Yeah it looks like you're accessing the DOM in the popup before it's available. The solution aschuler presents will work because you're pointing to an existing page. – Alex Morales Commented Mar 27, 2012 at 13:10
- 1 Yes it should resolve your issue. Note that he's using the jQuery event listener to fire the code off on document.ready. This link here explains what jQuery's really listening for in that event: stackoverflow./questions/799981/… This is a good way to ensure that the DOM is ready to be accessed via javascript. – Alex Morales Commented Mar 28, 2012 at 11:03
3 Answers
Reset to default 4Here 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>
<a href="javascript:open_chart_popup();">Open Chart Popup</a>
<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./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./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.',
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./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./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
seriesJSON 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 fortable 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
seriesare 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/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./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
本文标签： javascriptHighchart in new windowStack Overflow
版权声明：本文标题：javascript - Highchart in new window - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741486151a2381413.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论