HighCharts - How to create dynamic chart that exports EVERYTHING
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.