score:1
(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.
score:1
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>
Source: stackoverflow.com
Related Query
- HighCharts - How to create dynamic chart that exports EVERYTHING
- How to Create a Stacked Column Chart with Dynamic Series in Highcharts
- How to create a column range chart in Highcharts using range and navigator functions?
- Highcharts - how to have a chart with dynamic height?
- How to create an inner circle pie chart in Highcharts
- How to let user know that a Highcharts chart is clickable?
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- How to create a HighCharts chart in react
- How to create a solid gauge chart with Highcharts in angular 6?
- How to display only last point on highcharts and that point should travel with chart line?
- How to make a HighCharts drilldown column/bar chart that does not hide the non-drilldown categories
- How can I get a data label in my Highcharts Pie Chart that is a font-awesome icon?
- Highcharts how to create dot hover at end of line chart
- How to create a progressive pie chart using Highcharts
- how do you create custom buttons with highcharts that each data buttons calls anather php script for its data
- How do you create a survey that will immediately display the results as a pie chart on a website?
- How to make Highcharts legends focus on the chart that it belongs to?
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- How to create a legend for bar colors in a Highcharts bar chart
- How to create combo chart with Highcharts
- how can i create threshold chart with highcharts
- How do you create a Hight Charts chart that updates every second with real data?
- how do you create highcharts bar chart
- How to create a multi y-axis chart with drill down in Highcharts
- how do you create a link on highcharts to open up pop up window with another chart
- how do you create highstock multi line chart in highcharts
- How to plot stacked bar chart in highcharts with dynamic data?
- How to dynamically create timeline chart on click of x-range chart in highcharts angular
- How to create dynamic update spline Highcharts chart?
- How to get column chart in angular using highcharts using dynamic data
More Query from same tag
- How to update current view in Highstock / Highcharts based on new Plotlines?
- Highcharts annotation outside plot area not working
- jQuery traversal to build array vs extra html output
- Trying to figure out how to assign specific colors to specific data points in Highchart Pie chart
- No animation when adding data with series.addPoint()
- Error: <rect> attribute width: Expected length, "NaN" in highcharts
- How to change JSON Format For load data to Highchart
- Highcharts selection event not passing xAxis
- Highchart - Displaying the last yaxis value in the guage
- Highcharts How to Show Loading Animation At Set Data
- React: How to plot API response in highchart
- Highcharts cloud issue with data source when duplicating chart
- Highcharts: generate PDF document from export.highcharts.com without showing trace
- Vue.js Render Highchart
- Highcharts - Pinch zoom does not work on chart with multiple y axes
- Highcharts visualization tips
- Highcharts modify stacklabels dynamically
- How dynamically set the zoom level on highcharts?
- Highcharts Error #16 But I'm not using Highstocks
- Tooltip is visible on the whilte area as well in lat-lon mappoint Highmaps
- How to use Highcharts.setOptions in react-highcharts?
- Highcharts Boxplot - box with lower, upper quartile and median is not displaying when min and max are null of a category
- Line to the Y axis on hover
- How can i enable bootstrap tooltip in highchart
- Issue on Setting Highcharts Spider Web Legend in One Iine at button of Chart
- How to change the border of the area chart?
- tooltip formatter Highcharts not work with Firefox ? - Bug?
- how to change local functions of highcharts
- How to set a Maximum yAxis range for HighChart graph?
- Categories overlaps when export the chart