I am looking for the options to add a hyperlink to the stock chart. So that a user can click anywhere on the chart and redirect to another page.
Not on the series, I would like to add hyperlink on the chart itself.
You need to call function on your highchart container div.You can use following function.
$("#container").on("click", function(){
window.open('http://google.com', '_blank');
// You can also use if not cross domain request
//window.location.href='http://google.com';
});
Refer this fiddle link for example
Simply make your rendering element an <a> element with a href attribute pointing to where you wish to take users (just like any other hyperlink). Just make sure that this <a> element has a display property set as block:
$(function () {
Highcharts.chart('container', {
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: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
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]
}]
});
});
#container {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Note that for this example I've used Highcharts' own Basic Line Chart demo.
Related
I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.
Really would appreciate the help on this.
Use gridLineWidth to set the width of the grid: gridLineWidth: 2,
Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4.
To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.
pointPadding: 0,
groupPadding:0,
Check the example (jsfiddle)
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#000000',
plotBackgroundColor: '#808080'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding:0,
borderColor:'#808080',
}
},
series: [{
name: 'Tokyo',
color:'#D2691E',
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]
}]
});
});
I have a serie name with special character that I cannot change. How I can show it? I tried legend: { useHMTL: true }, but it's not working.
My code is here:
$(function () {
$('#container').highcharts({
title: {
useHTML: true,
text: 'Monthly Average Temperature'
},
subtitle: {
useHTML: true,
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
title: {
text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
},
layout: 'vertical',
x: -10,
y: 100
},
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: '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]
}]
});
});
http://jsfiddle.net/4x6susks/
It isn't working to <Tokio> legend
Replace in name: < with <. Otherwise legend will use that name as tag (like <span> or <div>). See demo: http://jsfiddle.net/4x6susks/3/
I'm attempting to use wkhtmltopdf via Rotativa to convert a basic html page which uses jquery and highcharts to render a demo chart. The chart renders correctly when displayed in a browser. Can anyone tell me what I'm doing wrong? This code results in a blank PDF.
My view:
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#chart { float:left; width:300px; height:300px; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(function() {
$('#chart').highcharts({
chart: {
backgroundColor: "red"
},
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: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
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>
</head>
<body>
<div id="chart"></div>
</body>
</html>
And here's my controller:
using System.Web.Mvc;
using Rotativa;
namespace Completions.MvcApplication.Controllers.Pages
{
public class ReportsController : BasePageController
{
public ActionResult Systems()
{
return new ViewAsPdf();
}
}
}
Thanks!
Chris
I had this issue and the cause was JavaScript errors. You can confirm this by running wkhtmltopdf with the --debug-javascript flag. For more detailed debugging (e.g. line numbers) you'll have to download the QtWeb browser.
Specifically in my case the two issues were that Object.values(obj) is an undefined function and $('a:not(.ignore)') is a syntax error (when jQuery 3.1.1 tried to use the selector). The fix was to use Object.keys(obj).map(function (key) { return obj[key] }) and $('a').not('.ignore').
To me it seemed to me that the graph would stop rendering midway through. So what worked for me was setting the animation off:
plotOptions: {
series: {
animation: false
}
}
This way the chart is ready once the pdf is generated.
i want to show/hide y axis grid lines of high chart by onclick of a button.I am not getting grid Line Width property to set in the java script function.Can i know how to access all the properties like grid line width,title,line color,line width,axis label
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart;
function DisableGridLine() {
chart.yAxis.gridLineWidth = 0;
}
$(function () {
$(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: {
gridLineWidth: 10,
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>
</head>
<body>
<script src="js/highcharts.js" type="text/javascript"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<input type="button" value="Disable" onclick="disablegridlines();"
</body>
</html>
Use:
chart.yAxis[0].update({
gridLineWidth: 0 // or 1
});
When using the jquery syntax $('#container').highcharts(...) and I later want to get a reference to the chart I get an error in IE 8. Example:
$('#container').highcharts({
chart: {
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: {
valueSuffix: '°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]
}]
});
$('#container').highcharts().showLoading();
The final line fails in IE 8 (works in IE 10 + chrome etc) using version 3.0.1 og highcharts and 1.9.1 of jquery. Is this not the recommended way?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Timestamp: Tue, 30 Apr 2013 08:07:37 UTC
Message: 'highcharts()' is null or not an object
Line: 66
Char: 9
Code: 0
URI: http://s3-eu-west-1.amazonaws.com/mala/highcharts.html