We are using HighStock 1.3.1 and the Java+PhantomJS export server (using same version of this exporter as the HighStock). We create some charts on the page. We allow the user to show/hide series or change the type of the series (bar/line/scatter). We have a menu that lets the user select what kind of export to make:
<select size="4"
name="ctl00$Main_content$ctlMainResultsGraph$lstExportOptions"
id="ctl00_Main_content_ctlMainResultsGraph_lstExportOptions"
class="chartMainmenu_body"
onchange="
var chart = $('#chartMain').highcharts();
switch (this.value) {
case 'JPEG': chart.exportChart({type: 'image/jpeg'}); break;
case 'PNG': chart.exportChart({type: 'image/png'}); break;
case 'SVG': chart.exportChart({type: 'image/svg+xml'}); break;
case 'PDF': chart.exportChart({type: 'application/pdf'}); break;
}"
style="text-align:left;font-weight:bold;">
<option value="JPEG">JPEG</option>
<option value="PNG">PNG</option>
<option value="SVG">SVG</option>
<option value="PDF">PDF</option>
</select>
When we execute this we do get an exported chart - however it is the original chart that was created on page load. The interesting thing is that if we click on the legend such that only one series is visible on the chart and then change its type from bar to scatter and then export the chart we show all series on the chart but all are a scatter type. So it looks like some of the chart changes are being "kept" and sent out via the export method but not all.
Lists of test paths used:
Initial load - export (any option) and chart looks like what is on
page.
Uncheck one item in the legend such that only 3 are visible on
chart. Export the chart and it looks just like the image in path 1.
Go to single series and change chart type to scatter such that just
one series is shown in the chart. Export the chart and the image
looks like what is in path 1 only all series are scatter type.
I am not able to reproduce this on jsFiddle but this is what our code looks like stripped down to just the important parts: jsFiddle.
Related
I have 1 chart with 2 scatterplot series like so
The series have same data points, basically I am drawing 2-2D plots instead of 1-3D plot..
Series 1 has the legend while on 2 its disabled. When I hover my cursor over the legend I want the tooltip to show up in both the chart, so a user can correlate legend to points on scatter plots.
$('.highcharts-legend text, .highcharts-legend span').each(function (index, element) {
$(element).hover(function () {
chart.tooltip.refresh([chart.series[index].data[0], chart.series[index+data.length].data[0]]);
}, function () {
chart.tooltip.hide();
})
});
I use above code to create desired effect, but tooltip is not appearing at the right place. maybe its a limitation from highchart. It throws the following JS error
Could someone please suggest me a workaround?
If you could make the chart.tooltip.refresh to function properly that would be the best. Other wise I am willing to make a compromise with at-least having the points in both series in hovered state and 1 of them showing the tooltip.
here is a fiddle to see the problem in action https://jsfiddle.net/9eoyg283/1/ , Hover over the legend items and you would get JS error in the console.
I can create the desired effect if I create 2 charts instead of using 2 series, but then that complicates other things which are not desirable. So this solution is off
Thanks in advance
Looks like a regression in 6.1.0 when upgrading from 5.0.14.
I create Y axis plot bands dynamically for a selected series by
chartObject.update({ yAxis: {plotBands: [...], plotLines: [...]} });
In this case whatever zIndex I assign to series or bands the series is rendered behind/below bands and is inaccessible interactively (e.g. tooltips are not displayed when hovering over points), bands get all mouse input. If I create the same bands right at the beginning together with series (before calling Highcharts.chart()), series remain accessible.
Even if I remove and then add series (recreate) after creating bands, it remains inaccessible.
Update:
Here's jsFiddle to reproduce.
Issue disappears if I exclude accessibility.js or exporting.js or include 'exporting' after 'accessibility'. In other words, issue can be reproduced by including accessibility module after exporting module.
Click the "Update bands" button repeatedly.
I am trying to use line chart, where I am using data with line series.
For that purpose I am using the legend. When clicked the legend, the following value will be hidden, and when I click the last one it also gets hidden, in my scenario last value should not get hidden so that at least one should be active.
I have done this in pie chart series but I can't implement this in line chart why?
- [Js Fiddle Pie Chart Demo][1]
- [Js Fiddle Line Chart][2]
var points = this.chart.series
JSFiddle
I have a code that generates charts dynamically based on the users inputs. I do not specifically format the tooltip, I just allow the defaults to take control. For some reason, there is consistently an a with a hat over it in the tooltip. For example, when hovering over a column chart entry, the tooltip shows:
Category
a(hat)- Series name:Value
Any idea where this ahat is coming into play?
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().