We are currently on HighCharts 4.2.2
http://api.highcharts.com/highcharts/exporting
So while reading their exporting docs, I decided instead of using their default menu dropdown. I just needed access to the .exportChart() function.
So what I do is once the chart is done rendering data, I store the chart object into a Factory.
When I click on a button in another component (chartHeaderComponent) to actually download the screenshot I simple retrieve the stored chart object and call exportChart on it.
HighChartsComponent
return priceLine
.then(alertSeries)
.then(tagLine)
.then(renderChart(chart))
.then((chart) => {
ChartExport.setScreenshot(chart);
this.chartLoading = false;
return chart;
});
ChartHeaderComponent
this.screenshotChart = () => ChartExport.getScreenshot().exportChart();
This will download the chart for me, however the Navigator data is missing :(
First screenshot is what I see in our app:
2nd screenshot is what I see after downloading the screenshot.
I could post details about the chart object here, but it's huge so if anyone can tell me a specific key they need to see I can post it here.
Any help or tips are highly appreciated! :D
Or at least thoughts on how to hide the Navigator from the Screenshot feature.
To hide a navigator on exporting, you need to set exporting.chartOptions.navigator.enabled to false.
exporting: {
chartOptions: {
navigator: {
enabled: false
},
scrollbar: {
enabled: false
}
}
}
example: http://jsfiddle.net/yc1yptos/
Related
How to show tooltip only when data available in chart js?
callbacks: {
title: (item, data) => this.projectNumberArray[item[0].index],
label: (item, data) => this.projectNameArray[item.index]
},
And I want disable tooltip, when I don't have needed data.
I have been faced same problem several days ago. I checked documentation and github both but i couldn't find the solution for disabling tooltip when data is not available.
Then i found a solution.
Then i checkced data on runtime and set a variable. When i draw chart then i check variable which i have been set on runtime and disable the tooltip accordingly.
tooltips: {
enabled: false
}
You can use above piece of code for disabling tooltip while drawing chart on canvas.
I have a web page where I'm displaying two Highcharts visualizations. I'm adding a new export option to each of these two charts so users can download an Excel spreadsheet that's relevant to each chart's data. I already have an array of export options in Highcharts.setOptions() for use with event tracking; these options are used with other charts on my website and is meant to be universal.
Here's my challenge: the code to add the new export option works, but it adds it to both charts, not just the one I want. I'm not sure why this is happening, as I'm explicitly adding the new option to only the relevant chart's array of options.
A working fiddle of my code can be found here: http://jsfiddle.net/brightmatrix/qr422sjk/2/.
The key piece of code where I'm adding the new export options is as follows:
var drawChart1 = new Highcharts.Chart(chart1);
drawChart1.options.exporting.buttons.contextButton.menuItems.push({
text: 'Download Excel spreadsheet (chart #1)',
onclick: function () {
window.open('https://docs.google.com/spreadsheets/d/1bDffOyfCe0gWLqmXwW5TrlQ8RkfFDXiMqyNhRXlNlDU/edit#gid=0');
}
});
var drawChart2 = new Highcharts.Chart(chart2);
drawChart2.options.exporting.buttons.contextButton.menuItems.push({
text: 'Download Excel spreadsheet (chart #2)',
onclick: function () {
window.open('https://docs.google.com/spreadsheets/d/1bDffOyfCe0gWLqmXwW5TrlQ8RkfFDXiMqyNhRXlNlDU/edit#gid=0');
}
});
Here's what I see when I toggle the Export menu in either chart:
Any advice or guidance would be most welcome. Thank you!
As Sebastian already wrote in a comment - if you will use Highcharts.setOptions() before creating each chart, then both chart's will have only set options.
Example: http://jsfiddle.net/qr422sjk/3/
In my code I'm initializing the chart like this...
<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};
function drawDefaultChart() {
chart = new Highcharts.Chart(defaultOptions);
}
$(function() {
$(document).ready(function() {
drawDefaultChart();
});
});
</script>
then in the body I have
Reset
but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...
function drawDefaultChart() {
chart.destroy(); //this makes the chart not work at all
chart = new Highcharts.Chart(defaultOptions);
}
You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?
my live example is here http://goo.gl/sGu0M
//////// UPDATE
I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.
this was the link that eventually helped me figure it out. http://jsfiddle.net/dane/YUa3R/34/
Always it's recommend to refer API documentation.
use following snippet to destroy the chart $('#container').highcharts().destroy();
Click here for a working solution.
First off, I know NOTHING about highcharts, but it would seem you need: (from your actual page)
function drawDefaultChart() {
$("#container").empty();
chart = new Highcharts.Chart(defaultOptions);
}
to be
function drawDefaultChart() {
$("#container").empty().highcharts(defaultOptions);
}
OR perhaps:
function drawDefaultChart() {
$("#container").highcharts(defaultOptions);
}
I have inherited a project that is using Highcharts.
The previous dev used the .addSeries method to add all of the series to each chart that was being rendered. From what I've read of Highcharts, it seems like .addSeries is really for adding data dynamically.
The data that is being used to populate the charts are coming from an AJAX request. The old dev's approach was to get the data, render the chart, and then add a series using .addSeries. I was thinking that it might be better to update options.series and then pass the whole thing along to new Highcharts.Chart() for rendering, taking the .addSeries out of the equation.
However, since I'm new with Highcharts, I was hoping to get some feedback on what the better method would be.
You're on a good path, though your question suggests you may simply be looking for preference over a strict right/wrong answer.
From what I've seen, unless you have interactions on the page that would trigger a need to update your chart after it's been drawn, the benefit to using addSerie would be to add some visual flare. Using addSerie, your charts will visually draw themselves in front of the visitor - vs them already being drawn. (I believe HighCharts demo site has some good examples of this.)
I also recently inherited a HighCharts project and am generating a new Highcharts.Chart() using dynamic data by parsing the AJAXed data on the fly. The good news is that all of the charts still have nice visual flare (flare is important) since they don't draw until the AJAXed data is fully loaded. This snippet illustrates how I've been loading dynamic charts, parsing the JSON data on the fly:
$(function () {
var visitsChart;
$(document).ready( function() {
$.getJSON('/json-data-url', function(json){
var visitsChart = new Highcharts.Chart({
chart: {
renderTo: 'visitsContainer',
type: 'spline',
},
title: {
text: 'Test Widget'
},
series: [{
name: 'Speed',
data: [parseInt(json.visits)],
}],
...
});
});
});
});
I won't lie ... I had a few minutes of hair pulling when I got started but now I wish I had more time to work with Highcharts as it's quite fun once you get on a roll. Hope this helps.
I'm using Highchart API to display charts. There are many chart type to display and the idea is let the user choose a chart from a dropdown, make an ajax request and partially update the chart. The good is i can output a custom response, with custom chart options, layout and data.
The problem here is that chart layout and data are inside the script tag in head. An empty div is then populated by the API.
Which pattern should i use to partially update the chart? Sorry for the very noob question, but i'm feeling a bit confused when dealing with something different from updating div with plain text/html as server response.
i was working a little with hightchart, and what i was doing to change the type of chart is calling a function that go's to a php ajax source and create the chart with a table's db result.
each chart's need a diferente table layout, i think.
and that's why i create separeted files for this.
like:
piechart.ajax.php
and a div get the return of ajax call and after that, i call the Highcharts to display the div's result's into a chart.
dont know if this will help you, but may be clear your 'mind'
edit:
html:
<div id="grafic"></div>
js:
$.post("ajax/piechart.ajax.php",
{
cache: false,
},
function(data){
$("#grafic").html(data);
var table = document.getElementById('datatable'),
options = {
chart: {
renderTo: 'grafic',
zoomType: 'xy',
defaultSeriesType: 'pie'
}
};
Highcharts.visualize(table, options);
}
)
Answer myself: make chart a global javascript variable, initialize charts options (not necessary) send an ajax request and return a JSON object that represent the entire chart object, overriding chart global. No need to call redraw. Limitations: as you can't serialize function you can't dynamically override formatters function (e.g. for tooltips).
If you just want to update data call addSeries, setSize, setTitle (and others) methods.
All explained very well here (section 4) and here.