I'm using wkhtmltopdf to convert chart to pdf but wkhtmltopdf gives me an error Failed to load https://code.highcharts.com/highcharts.js while jquery loads fine. Any help is appreciated!
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script>
$(document).ready(function() {
document.getElementById("test").innerHTML = "Before highcharts";
Highcharts.chart('container', {
chart: {
animation: false
},
plotOptions: {
series: {
animation: false
}
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
});
document.getElementById("test").innerHTML = "After highcharts";
});
</script>
PDF result
Related
I have a columns chart and I need to draw the left, right and bottom lines of the chart (x/y axes) but need to either omit the top line
or ...
draw a white line to cover the top line. Viewing the raw data in Chrome, I can see the box is drawn using <rect>.
Is it possible to use JS to locate that and get the x,y,width attributes to draw a white line or remove it and replace with 3 black lines
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Annual Performance</title>
<!-- this code to include Highcharts with jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script src="/js/jquery.min.js"></script> -->
<!--this code is the required highcharts javascript file -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- <script src="/js/highcharts.js"></script> -->
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script>
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: 50,
plotBorderWidth: 3,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.2f} %'
}
}
},
legend: {enabled: false},
yAxis: {
title: {text: null},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
},
title: {
text: 'Annual Performance'
},
subtitle: {
text: 'XXX Shares'
},
series: [{
data: [
[2008, 2.17],
[2009, 0.15],
[2010, 0.00],
[2011, 0.00],
[2012, 0.01],
[2013, 0.01],
[2014, 0.01],
[2015, 0.00],
[2016, 0.00],
[2017, 0.38]
],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
You can create additional yAxis and use lineWidth and offset properties to acheve needed result:
xAxis: {
lineWidth: 3
},
yAxis: [{
lineWidth: 3,
offset: -2,
title: {
text: null
},
max: 4,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + ' %';
}
}
}, {
opposite: true,
title: {
text: ''
},
offset: -2,
lineWidth: 3,
}],
Live demo: http://jsfiddle.net/BlackLabel/cj497k6s/
API Reference: https://api.highcharts.com/highcharts/xAxis.lineWidth
Do we have support for stacked bar chart in 2.1.5 version,I do not see below piece of code works with 2.1.5 version is there any alternate way to draw stacked bar chart for 2.1.5 version.below is code for the same which works with latest version and 2.1.9 version but not with 2.1.5 version
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth:0
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FF0000'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [2]
},{
name: '',
data: [1]
}]
});
</script>
</body>
</html>
Yes, it is supported. However, you need to be careful which jQuery version you use, becasue older Highcharts version rely on it.
Highcharts 2.1.5 works well with jQuery 1.6.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.5/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/
When you use jQuery 1.7.1, the bars do not appear until the browser window is resized - so Highcharts does not work well with that jQuery version.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.5/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/1/
Highcharts 2.1.9 works well with jQuery 1.7.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.1.9/highcharts.js"></script>
example: https://jsfiddle.net/kfumqvrz/2/
I am creating a pie chart in Highcharts with a legend. When I specify the series as an array of values (my preferred method), the legend displays the string "Slice" for each value. If I instead specify the series as a list of objects with named values, I correctly see the data names. Can I see the data names if I specify the series as an array of values?
Here is the code that doesn't work but that I would like to use:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
xAxis: {
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
},
series: [{
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
Here is the code that does work when I specify the series as a list of objects with named values:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
series: [{
name: "Directors",
slicedOffset: 20,
data: [{
name: "BADHAM, J",
y: 74100000
}, {
name: "COPPOLA, F",
y: 30673000
}, {
name: "GUILERMAN, J",
y: 36915000
}, {
name: "HILLER, A",
y: 50000000
}, {
name: "SPIELBERG, S",
y: 90434000
}]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
You can do this with tooltip.formatter and legend.labelFormatter and accessing the highchart options.
For the tooltip text:
tooltip: {
formatter: function() {
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
}
},
And for the legend:
legend: {
enabled: true,
labelFormatter: function() {
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
}
},
Live demo.
as of 5 years later, do this:
legend: {
enabled: true,
labelFormatter: function() {
let legendName = this.series.chart.axes[0].categories[this.x];
return legendName;}}
I am using Highcharts to show temperatures from DHT22. Measurement occures every 5 min, but on the chart I can see tooltip only for first point.
Script weather.php returns JSON-array
What is wrong?
Code:
<html>
<head>
<title>Weather</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/highcharts.js"></script>
<script>
var chart;
function requestData()
{
$.ajax({
url: 'weather.php',
datatype: "json",
success: function(data)
{
chart.series[0].setData(data.temperature);
chart.series[1].setData(data.humidity);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
tooltip: {
shared: true
},
xAxis: {
type: 'datetime',
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Temperature/Humidity',
margin: 80
}
},
series: [{
name: 'Temperature',
data: []
},
{
name: 'Humidity',
data: []
}]
});
});
</script>
</head>
<body>
<div id="graph" style="width:100%; height:400px;"></div>
</body>
There is a projects.html file above.This file works successfully but when I convert this html file to haml file with http://html2haml.heroku.com/ , haml file doesn't work.
Can you see any difference between two files?
projects.html.erb
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Sectoral Statistics'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}% - {point.y} proje</b> ',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' % - '+ this.y +' proje';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
<% #results.each do |key,value| %>
['<%= key %>',<%= value %>,<%= value %>],
<% end %>
]
}]
});
});
});
</script>
projects.html.haml
%script{:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", :type => "text/javascript"}
%script{:src => "http://code.highcharts.com/highcharts.js"}
%script{:src => "http://code.highcharts.com/modules/exporting.js"}
:javascript
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Sectoral Statistics'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage}% - {point.y} proje ',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return ''+ this.point.name +': '+ Math.round(this.percentage) +' % - '+ this.y +' proje';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
#results.each do |key,value|
[' key ', value , value ],
]
}]
});
});
});
I think this is a bug in html2haml.
In your HTML, your last script tag looks something like this (I’ve cut it down for brevity):
<script type="text/javascript">
$(function () {
...
});
</script>
The first line is indented, but the last isn’t. html2haml is only looking at the first line when determining how to indent the javascript, and this is resulting in Haml that looks like:
:javascript
$(function () {
...
});
The last line – }); – isn’t indented.
To work around it you should fix the indentation, in either your HTML or in the generated Haml.
Note that there is another bug with :javascript filters you should be aware of. It think in this case you should be all right with that one.