I have a question about highchart exporting. I need to use highchart own export and I wonder that I use another data series for exporting. For example;
series: [{
type: 'pie',
name: '',
data: [<?=substr($data2,0,-1)?>],
data: [<?=iconv("UTF-8","ISO-8859-9",substr($data2,0,-1))?>]
}
I want to use first data for view second data for export. How can I do that ?
Here is a method that needs some extra work but should do the trick. What I did was set up a custom export button that first sets the series data to some other data string then it exports it as an image, then it sets the chart data back to its original values. Note that the first setData() call does not redraw the chart. This is so that we do not see the new data points. The second setData() call does redraw. I have not tested it with zooming or resetting other chart options so YMMV.
Example and Relevant code:
$(document).ready(function () {
$('#clickme').click(function () {
chart.series[0].setData(data2, false);
chart.exportChart({type: "image/jpeg"});
chart.series[0].setData(data1, true);
});
});
Have you seen exporting option? http://api.highcharts.com/highcharts#exporting.chartOptions
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
I'm attempting to change edgeColor property for a series in a 3d column chart after the chart is drawn, based on some user input (like selecting a certain series). I was able to do this was a 2d column chart using the borderColor property. My data loading snippet looks like this:
$.each(seriesDataArray,function(i,val){
console.log (val);
chartDetails.series.push({ "size" : val.datasetSizeVerified , "data" : val.data});
};
And I'm trying to modify the edgeColor in a function later on in code:
function highlightChartSeries(currentTableDisplayIndex){
if (myChart){
$.each(myChart.series,function(i,val){
val.edgeColor = "green" ;
val.redraw();
});
myChart.series[currentTableDisplayIndex].edgeColor = "red";
myChart.series[currentTableDisplayIndex].redraw();
}
}
Again, this works great in 2D with a column chart using the borderColor property. I can set the edgeColor in the original series object during chart construction, and that edgeColor is reflected in my original graph. However, I can't change it later. Any help is appreciated!
To add (or change) some value to existing series, you should use Chart.Series function called update(), and pass to it new configuration options object, because it is a function specially created to executing actions like that. Please take a look at code below:
chart.series.forEach(series => {
series.update({
edgeColor: 'black'
})
})
I prepared for you live example how to use that function.
Best regards!
I have two charts that are synchronized. They have a margin left to make sure they are uniformly aligned. I have situations where I have multiple yAxis that can get turned on and they are on the right side opposed to the left. I attempted to use the same marginRight approach but when a second, third, or fourth axis gets added to the right it won't show up because there isn't enough room. So I am dealing with a dynamic amount of space over there on the right side. Highcharts handles the dynamic aspects when it's just one chart but I need my second chart to have the same margin even tho it doesn't have these additional yAxis. It's important that this time series data remains aligned in the two charts.
What is the approach to handle this?
UPDATE:
I created a simple jsFiddle here: http://jsfiddle.net/28hrffv7/
In my real-world example, I have showEmpty set to false and a series which is hidden by default.
{ opposite: true, title: { text: 'Random Text' }, showEmpty: false}
When they turn it own the series is rendered and the axis and title is added. This example shows that the first charts doesn't realize that the 3rd chart has 3 axis and as a result should have more marginleft
Update 2: Updated JS fiddle to show the more dynamic nature of the problem. When you toggle a series in the legend you can observe axes getting added and removed which is feature that is wanted. What is required is to keep all the charts synchronized in the width of the plotable area so they all line up correctly. http://jsfiddle.net/28hrffv7/3/
You could hard-code marginRight as well as marginLeft.
Demo #1: http://jsfiddle.net/28hrffv7/1/
Or check which marginRight is the highest and update all chart with the new setting. Relevant part of the code:
}, {
data: []
}]
}, function(chart){
if (chart.marginRight > topMarginRight) {
topMarginRight = chart.marginRight;
console.log(topMarginRight);
}
});
}); // end of the each function creating the charts
$.each(Highcharts.charts, function (i, chart) {
chart.margin[1] = topMarginRight;
chart.isDirtyBox = true;
chart.redraw(false);
})
Demo #2: http://jsfiddle.net/28hrffv7/4/ (for Highcharts < 5.0.0)
UPDATE:
With Highcharts 5+ the same is possible through a chart update.
$.each(Highcharts.charts, function (i, chart) {
chart.update({
chart: {
marginRight: topMarginRight
}
});
})
Demo #3: http://jsfiddle.net/28hrffv7/5/
In case of multiple series in each chart you could call a custom function for events like load, redraw, afterAnimate.
Demo #4: http://jsfiddle.net/acjaLxj1/1/
I'm using http://www.chartjs.org/ to create a simple line graph.
Now I want to show all tooltips. I do not want default on Hover behaviour. I am certain that at any moment I will not have more than 10-12 points on graph. So I want the tooltips to be always open.
If this is not possible with ChartJS, I'm open for opting for other library.
I don't know if this is possible with chartjs (a quick search did not reveal anything) but I think what you want is possible using highcharts. Here you can use the datalabels option:
plotOptions: {
line: {
dataLabels: {
enabled: true
},
Here is a demo. Does that help?
EDIT:
Another possibility for free could be jqPlot. For a demo have look here! There is a pointLabels plugin which places labels on the plot at the data point locations. Should do the trick. :)
var plot1 = $.jqplot('chart1', [line1], {
title: 'Point Labels',
seriesDefaults: {
showMarker:false,
pointLabels: { show:true }
}
});
Cheers and good luck.
If you want to add more multiple static points please use annotations. Tooltips are just tips for a user when hovering instead of static information on different points in the graph.
I suggest using a wrapper on top of chartJS and using their annotation feature https://apexcharts.com/docs/annotations/
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]