Menu
I'm trying to export a dynamically generated chart and I've noticed that some things don't get exported. For example, my chart has PlotBands which are dynamic depending on the data being displayed.
As I built my chart, I followed the standard code layout of all the great HighChart examples where I generated the chart immediately on the document load. Then later in my code, I use an Ajax call to load the data and modify things like titles, plot bands, custom text, etc.
The problem is that anything modified on the chart after the initial chart load won't be exported to images or PDFs. My PlotBands were added during the Ajax call. They couldn't be included in the chart object that was built on document.load(). So they were conveniently ignored by HighCharts.
In my chart, I want to show energy usage during a 24-hour period at different sites. The user can choose different days and different sites. The Plot Bands needed to highlight the operating hours and each site has different operating hours which are loaded with the data. Also, the chart title shows the site name and the subtitle shows the square footage.
Additionally, my code draws some custom text on the bottom of the graph using the HighCharts renderer text() command.
My code for the barely-functioning export looks something like this:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: "ChartContainer",
type: "line",
title: { text: null },
subtitle: { text: null }
}
}
});
function UpdateChart() {
$.ajax({
url: "/my/url.php",
success: function(json) {
chart.addSeries(json[1]);
chart.addSeries(json[2]);
chart.setTitle(json[0].title, json[0].subtitle);
chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
chart.renderer.text("Custom Text", 50, 100);
}
});
}
Unfortunately, the title, the plot bands and the "custom text" won't appear if the user exports the chart.
895
yes - its possible and highcharts support things you mentioned here's sample code http://jsfiddle.net/vijaykumarkagne/9c2vqq7q/ of dynamic highchart using json data of file hosted in google drive.
$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){
chart = new Highcharts.Chart({
chart: {
zoomType: 'x',
type: 'line',
renderTo: 'container'
},
title: {
text: ' '
},
subtitle: {
text: 'Click and drag in the plot area to zoom in',
x: -20
},
xAxis: {
type: 'datetime',
title: {
text: ' '
}
},
yAxis: {
title: {
text: ' '
}
},
series:[{
name: 'Tokyo',
data: result
}]
});
}); <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container"></div>
</body>(answering my own question here)
The key is to re-arrange how you build your chart.
Don't generate the chart on the document.load(). Generate it in the success() function of the ajax call.
First, check if the chart already exists and destroy() it. If your code allows the users to dynamically change settings, that will cause a new ajax call to execute which will need to update the graph. The chart needs to be destroyed before being re-built.
Now build a new chart from scratch. But, now you already have the data you need from the ajax call so you can build it from scratch with the correct information. HighCharts will only export data that was included the first time the chart was created. So all custom data needs to be included here. If you need to change something on the graph, destroy it and rebuild it using the custom data.
function UpdateChart() {
$.ajax({
url: "/my/url.php",
success: function(json) {
// If the chart exists, destroy it
if (chart) chart.destroy();
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: "ChartContainer",
type: "line",
events: {
load: function(event) {
this.renderer.text("Custom Text", 50, 100);
}
},
title: { text: json[0].title },
subtitle: { text: json[0].sqft }
},
plotBands: {
color: "#FCFFB9",
from: json[0].OpenInterval,
to: json[0].CloseInterval,
label: {
text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" }
}
}
};
// Add two data series to the chart
chart.addSeries(json[1]);
chart.addSeries(json[2]);
// Set title and sub-title
chart.setTitle(json[0].title, json[0].subtitle);
}
});
}
Now, the chart will show all the custom things you've added. Notice that the custom text written to the chart using the renderer.text() command are added in the chart.load() event. For some reason, it only works here.
Remember the key: HighCharts will only export data that was included the first time the chart was created. This will save you a lot of headaches.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With