Converting high chart to image and send to server using ajax call - javascript

I need to export multiple charts to the server with the ajax call and store it as a pdf.
I render multiple charts in a single page using different containers. I need to convert them as images and send them to the server and export them to a single pdf to be saved on the server. Appreciate any help

See this post: http://highslide.com/forum/viewtopic.php?f=10&t=10463
And: http://highslide.com/forum/viewtopic.php?f=10&t=9239
Setting up server side exporting is bit of a mess. Lots of ducks to get in a row before it will work.

Related

Inserting PHP variables in jQuery

So I found this Pie Chart that I would like to use on my website (http://canvasjs.com/docs/charts/chart-types/html5-pie-chart/)
I've already adapted the code to where it establishes a connection to the MySQL database gets the information I need from and I've saved those as variables in PHP and displays them within the Pi chart. So far so good!
Now I've really like to make this a little bit more real-time as the information changes quite rapidly, so I was thinking, of having the jQuery update its information on a regular basis. Preferably every 1000ms or so. How would I go about achieving this?
Thanks for your suggestions!
Basically you will need to establish an ajax data flow:
your main page will contain only the graph, but skip the data
request the data by sending an ajax request to a separate page
the data page should return your data object in JSON format (use json_encode())
With periodicalupdater you can update your data in the interval of your choice and automatically adjust this interval to reduce the load on your server.
There's a worked example in the documentation: http://canvasjs.com/docs/charts/how-to/live-updating-javascript-charts-json-api-ajax/
Basically, you need to use JavaScript and more specifically Ajax to query the server continuously and fetch new data in JSON format. Then update the chart using the brilliantly named 'updateChart' method. :)

413 Request Entity Too Large HighCharts

I am having trouble with the exportation of a certain graph. I have made a JSFiddle (http://jsfiddle.net/oy73rgc4/3/) to show with what I am working. This example doesn't contain all the data points with are used, because then my browser (Chrome) crashes. In total i am using about 80K of data points. The HighCharts is displayed like normal and doesn't cause any problems. The problem comes when I want to export the chart!
When I export the chart, doesn't matter if it's PNG/JPG/PDF it always directs to https://export.highcharts.com/ with the message 413 Request Entity Too Large. I have tried some google'ing
offline-export.js
Other people who have experienced this problem had tried to use the JS offline-export. I tried this, but it didn't have any effect.. It just removed the export button in the chart. https://github.com/highcharts/highcharts/issues/4614
Data grouping
Some suggested to others to use HighCharts Data grouping. I checked the API but I find that there is too little explanation about this. I think that I can't implement this from scratch and I am unable to find an example http://api.highcharts.com/highstock/plotOptions.series.dataGrouping
custom exporting server with increased size limit in nginx.conf
I also found that this option could help. I tried to find instructions, but I don't understand how I need to implement this in my web application (Laravel 5.2) http://www.highcharts.com/docs/export-module/setting-up-the-server
Does someone have a new suggestion for me on how I could solve this problem? Or could someone help me out with one of the options which I have suggested?
The exporting server is something that you deploy on your server side (i.e. you have to deploy a server to do exporting for you). However, if you only need to export PNG and SVG, then you can do with client-side only solution as per their docs.
http://www.highcharts.com/docs/export-module/client-side-export
If their server seems to have a limit on how big requests it will serve. Means that you have to deploy your own server and configure it (its has to do with actual http server configuration I think) to accept larger requests. Not much you can do on the client, but to limit the amount of data you display on the chart.
P.S. it always directs you to highcharts export server because export functionality by default users their server.

How to retrieve images from database using jquery and servlet

I need to retrieve the images which is stored in my oracle 11g R2 database. I'm trying to retrive the images using Jquery and servlet, And placing into the css division. But I'm a newbie in this. I know using json objects we can do this stuff. Please anyone tell me how to do
Make a request that returns a list of the names of all images (so that you know what to retrieve)
Make a servlet that serves images - gets the name as GET parameter, looks it up in the database (e.g. via JDBC) and streams the result back into the response.getOutputStream(), and set the correct content type

Dynamically loading external data from database into d3.js

I am trying to get dynamic reloading to work in d3 and I'm having trouble trying to figure out how to refresh the data from the database.
I have an array that contains values should change every second:
var data = [1,2,3,4];
In my initial script, I had PHP pull the data from the database to set up the array, and reloading the page works fine for that, but I'd like to use d3's reload functionality to fetch new data and redraw the diagram.
I'm completely new to js and d3, so any suggestions would be very helpful.
I tried using jQuery's get command to call an external PHP script that outputs the values but that doesn't seem to work.
I'm basically trying to replicate the bar chart from Google Analytics real time display.
firstly, you need a page on the server that will output the data in JSON format*. Once you have that page, call it from the browser, and you should get the encoded data appearing on screen (this will prove that the page is hosted properly and returning data)
Next, follow the simple example on the D3 docs link that Yeco posted. You'll need to replace the dummy URL with the address to your new data page, and stick your own function call in there to redraw the chart with the new data.
*Note: I am not familiar with PHP, but it should have either a native JSON encoder, or a library will be available on the net. You'll also need to make sure you set the response mime type appropriately - a quick google should give you the correct mime type - it's something like 'application/json' I think, but can't remember of the top of my head
This might help you: https://github.com/d3/d3-request/blob/master/README.md#request
Edit: updated link to API v4

sending images in REST response(xml) from my java Web Service

I have a WEBUI (using html and DOJO) which talks to a Web Service. The data required in the WEBUI is coming from a java Web Service using REST Calls.
IE (HTML/DOJO) <------ REST CALL(xml response) ----> Java WS on tomcat.
I have a certain data for a call
<AllData>
<DataList>
<type>A</type>
<xcoord>20</xcoord>
<ycoord>20</ycoord>
<length>250</length>
<width>350</width>
<imageName>images/myPic.jpg</imageName>
</DataList>
</AllData>
But in this case, if I have a list of data, for rendering each image, I have to do a http call again to my server.
Instead, I came to know that I can embed the image itself in the REST XML response.
I know I can read the image through ImageIO/BufferedImage classes in Java. But if I use the same to send the data which is read, is it possible to render the image on Dojo?
If there is any other method where I can send the image in the REST Response (XML or JSON) and using Dojo render the same, please let me know.
One thing that I could think of is Data URL. It allows you to store the entire image in URL form. On the client, you can insert an <img> tag with src="data:image/gif;base64,R0lGOD...... and you're done.
The drawback of this is, that the encoding overhead is huge, you'll save a request, but the data to transfer is bigger. I only used this approach in CSS files for tiny icons, where it's reasonable.
But I'd think about it again. Is that one more request really that bad? If not, you can run the same approach as above, just with a normal URL (in case your images are accessible from the web).

Categories

Resources