I have about 100 charts I want to export to a printable report. It's to slow to have 100 charts in Internet Explorer. Is there any workaround for this?
You can send POST requests to export server in order to export all of your charts without actually rendering them in the browser.
const options = {
chart: {},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}]
}
const data = {
options: JSON.stringify(options),
filename: 'test.png',
type: 'image/png',
async: true
}
const exportUrl = 'https://export.highcharts.com/'
$.post(exportUrl, data, function(data) {
const imageUrl = exportUrl + data
const urlCreator = window.URL || window.webkitURL
document.querySelector("#image").src = imageUrl
})
// You can uncomment in order to render chart
// const chart = Highcharts.chart('container', options)
Live example:
https://jsfiddle.net/28098mfj/
Related
am trying to plot a line graph in highchart but its rectangle in shape, how to make it in square shape.
code here
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Should be something like above img
I want to have a chart that displays values only over the 'min' value for the yAxis (jsfiddle):
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 100
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
But actually Highcharts shows shadow and tooltip of the points which are under the minimum:
How can I configure Highcharts to ignore those points which are outside the chart plot?
use formatter function in toolTip:
tooltip: {
formatter: function() {
if (this.y < this.series.yAxis.min) return false; else return this.series.name + ': ' + this.y;
}}
See fiddle with your example
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 29.9
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I have a Highchart where i am showing a scrollbar. i have defined the
xAxis: {
min:0,
max:6,
For instances where data is less than 6 grids..it shows extra points with null. How to avoid showing those extra points?
In the below example see the extra points are 12,13, 14..I want to remove them.
http://jsfiddle.net/highcharts/fj6d2/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0,
max: 14
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/
var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
len = data.length;
len = len < 6 ? len : 6;
Then in options for Highcharts:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: len
},
series: [{
data: data
}]
I want to export a highchart to a jpeg image and place it into a specific folder.
What is the flow that goes through the highscript.js?
You can export into jpeg ,but it renders on browser as api did not provide location .
API URL :http://api.highcharts.com/highcharts#exporting
and
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
You can prepare your own server (http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts) and define directory, where exported file should be saved, but you have no ability to have influence on customer / client direction (security aspects).