We use Highcharts JS in our Webapp. We also use "highcharts exporting" so that our customers can download a diagram or piechart with just one click.
Now I would like to add the functionality that you can download all diagramms which are display by highcharts with just one click. So that our customer does not have to download each chart individually. is there such a functionality in highcharts already?
I can not find an easy way to do this.
The highcharts exporting module is submitting a POST request to the highcharts server (passing in the SVG of the chart) to generate the PDF or PNG.
I tried calling chart.exportChart() in succession but this will not work since the first calls changes document focus and the subsequent calls will not fire. So I think you have two options:
Do it server side. Have your javascript return the SVG (chart.getSVG()) of all the charts and write a server side script that generates the POST requests, zipping up the resulting files and returns them client side.
Stay client side. Get the SVG of the chart objects and manipulate it to embed multiple charts in one SVG document. Then make the request to the highcharts server. This way you could get one PDF document containing multiple charts.
This is how I would do it:
Set up your own export server with the hekp of PhantomJS. (Here's a shortcut for this http://www.highcharts.com/articles/2-news/52-serverside-generated-charts)
Send each chart data through AJAX to the PhantomJS export service.
Combine your exported PNG's to one image with server side script (php or py) or with the help of PhantomJS by rendering all in one page, rasterize and export as one and send back its path via AJAX to the front end.
Receive the image and let users download it :) .
The first two steps are explained i ndetails in a recent tutorial video I created for Packt here: https://www.packtpub.com/web-development/learning-highcharts-video
I hope it helps.
Related
I have implemented a menu of several tabs. When opening one of the tabs, several images are loaded from an external resource in jpg format.
If I open another tab, then other images are downloaded (this is expected). But when I go back to the previous tab, NextJS downloads the old images again.
How can I get rid of unnecessary downloads?
p.s. I want to clarify that depending on the tab, different components are drawn, removing others (perhaps this is important)
next js just compress your image and improve performance, you must not expect to not load the image when you will request to server again if you want to not download the image again the solution I think maybe can work: you must use your cash with react query when you want to request again when client change tab instead of axis or fetch,
react query will see if the image in the server is changed to load it again or not
so I have this website made with Next and on a page there are some graphs (the graphs content changes as it fetches an API) and info.
I want to add a button to the page and when pressed it download the page as a HTML file and includes all the JS and CSS in the HTML file instead of separately, does anyone have any idea as to how to approach this problem. (The graphs content should be the same content as it was on the time of downloading)
(The reason why I want to do this is because I want to distribute these files to others and I want to allow them to read it w/o an internet connection)
You can't really download a React 'page' because there are no pages in React to download.
Next further complicates this because it server-side renders everything and rehydrates client-side. If you inspect one of your pages, you'll see the JSON blocks Next uses for data. Look for the __NEXT_DATA__ script (usually in the footer of your page).
I think the two strategies you could use:
Screen-capture of the graphs during your build sequence and push them over to an AWS S3 bucket or similar (cumbersome)
When I ran into a requirement like this, I just made the data for the graph available as a JSON download just below the graph and it satisfied the use case sufficiently.
If you just want to download the assets and take a look, a workaround is probably leveraging the next/export package. This allows you to run yarn build and generate a static export of your entire site. This should include the file you're looking for.
Just some ideas to think through.
Right now I'm working on a movie browser app which displays images of the acting cast. The images themselves are loaded from an external source via a URL link. I'm wondering how I can pass those images through a face detector, and display the cropped face within an img tag?
The image tag itself requests a src, but I intend to use the image after it has been passed through the face detector, meaning it won't be coming from an external source. I don't think I can pass an image matrix into img directly, so how could I store the image within my React app so it can be passed into img?
This app will be deployed on GitHub Pages or Netlify for public viewing, so I won't be able to modify the source files presumably. I'm assuming a server will come into play but how?
I am not able to automate google map screen which is present on my application web page.
I have web page where google map is present in square in half of screen. I want to click on the road present in map or a restaurant logo which is present on the google map.
When i tried to find the locators for the map then in the DOM it is present as an image and no other html properties or locators are associated with it.
Also i tried an option using moveToElement() function of action class but this solution is not reliable as most of the time it is not working.
Please suggest me any solution for this automation issue if someone faced this issue of Google maps automation before ?
Sounds like HTML5 issue over a google maps issue. This is tricky for Selenium, see these articles:
https://www.linkedin.com/pulse/html-canvas-testing-selenium-opencv-maciej-kusz/
https://chariotsolutions.com/blog/post/automated-testing-of-html5-canvas/
which recommend using action chains to move to and click certain x,y coordinates.
Also, check out the canvas javascript api; you may be able to use javascript_executor to manipulate the canvas.
I am using react and redux for my application. I have to build one functionality where all text data will be loaded first and then images. I would like to know how to load text data first then images while fetching data from endpoints. Till images are not there I want to show gif images.
In the success callback of the api call to get the text, get the images.