I have a wordpress site where I have a chart and when I hit print prints the page where the chart is and the chart in the same page but the chart is outside the container instead of printing the chart by itself as its supposed to. Because you can see that the code is working , because you can see how all the elements get removed and the lone chart is left on the page. Yet it does not print the way it was intended to.
Hereis a copy of the page I am trying to print from.
Related
I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
I have parent component (A) with two child components (B) & (C). B contains an angular2-tree which is populated on page load. C is where angular2-highcharts and information will be rendered when a node on the tree is clicked.
When navigating between nodes, sometimes I will show charts and others I wont. Currently, when I don't pass data to the chart options, assuming I've already shown a chart, then the chart continues to render.
How do I destroy the chart when I don't want it to show?
Didnt think of a way to destroy the chart, but have added *ngIf to the html tag for the chart. This will hide the chart when the options are set to null.
I have a page which has a few links. Clicking on a link generates a list of different charts in the bottom of the page without page reload. Put it another way, each link clears previous charts, gets new data from the server, invokes Highcharts to draw new charts. No page reload.
Here comes the issue.
I am using the following Javascript to collect the charts on the page and send the data to the server.
var svgArray=[];
$(Highcharts.charts).each(function(i, chart){
if (chart) {
svgArray.push(chart.getSVG());
}
});
I notice that Highcharts.charts array grows by ADDING new charts to its end of when a link is clicked. I dont need old charts. I just want to collect new charts.
How can I initialize Highcharts or Highcharts.charts when a link is clicked.
Thanks and regards.
Here is what I did and it appears to get rid of charts created earlier. When a link is clicked and before the new charts get drawn, I try to destroy all charts the following way:
$(Highcharts.charts).each(function(i, chart){
if (chart) {
chart.destroy();
}
});
It seems working, but I am not sure if this is the right or best way or it can help others. I love to hear the input from experts.
Thanks!
I am noticing something strange; I have a click event on a chart, and the chart fire up the event no problem.
Then I add a link in the tooltip, but when I click on it; the chart event fire, not the one that should open the link.
It works only if the tooltip will render on an area that is not part of the plot area (say, a value is high enough to render a tooltip on the title bar; if I click on that link, it will work).
I suspect that there is some sort of parameter that tell highcharts if the link in the tooltip is above the chart plot area? Otherwise it is impossible to have the tooltip open a link, if the highcharts click event is enabled.
You need to set useHTML flag as true.
Code: http://jsfiddle.net/sbochan/voh6ebt8/
Example: http://jsfiddle.net/sbochan/voh6ebt8/show
How do I create a simple chart with a single horizontal bar. Xaxis is time and yaxis is one category named execution. I want to show a chart that shows a bar during the times when I have state executing and for states in between I want to display a blank in the same horizontal bar.
What you are looking for, I think, is a Gantt chart. Check out this example: http://jsfiddle.net/highcharts/KNGba/. It is a basic chart with just one element. Now check out this one: http://jsfiddle.net/highcharts/r6emu/. This shows you events during a time line.