I'm using dc.js to develop crossfilter charts. Such as rowcharts, barcharts, etc. I'm trying to figure out of how to screen shot the whole page so a user can save and email with all their filters as a gif file. I'm using html2canvas js file to screen shot the whole page. The challenge is that I have to use IE11 and I'm aware its limitation (implement promise.js and polyfill.min.js). As a test, i created a button that will screenshot the page and append the body. The screenshot appears but I dont see any dc charts and the title or text appear different vs my actual page. It seems that it screenshot without any css changes or html2canvas.js file doesn't read SVGs. Im not sure if i'm doing this correctly. Is there a specific way in order to have the charts appear in the screenshot and how to make html2canvas recognize external CSS file or dc.js charts? Is that possible or are there any other js library similar to html2canvas that can capture the whole page with dc.js charts in them?
Please I need help. Deadline is coming and I'm still researching on this.
Related
I have a system build in PHP where I take a pdf and place it as a background and then on a second layer place text on top of it with coordinates. This makes that managing the two different parts are easy. Because the initial pdf is difficult to reproduce in html. So html2pdf is not an option. I tried it but because of all the different lines and sections and text the library cannot manage it.
Base PDF example
Because of reasons I am now looking to replicate this functionality in javascript. So I was wondering if something similar is possible in jsPDF. Or any other library.
After a long and tedious search I found that PDF-LIB is what I needed. They allow to pull in a existing pdf and alter it by writing ontop of it.
I did experience some issues with pulling in the pdf but that can be solved. It was mostly because of fetch() method. But they allow Base64 inport.
I am working on a custom widget for Jupyter Notebook. The widget does not automatically load when a user opens their notebook, due mainly to the widget state not being found in the kernel. The feature at hand is to display an image instead, until the notebook loads.
I have determined that a cell containing the following:
from IPython.display import Image
img = Image(filename="eggsnspam.png", width=500)
display(img)
will reload its image properly when the user loads the notebook.
The widget has code in it to generate a PNG "snapshot" image of the widget. I want to show this image such that:
When the user loads the notebook and the widget state is not available, the user sees the serialized image.
When the user runs the cell that generates the widget, the user sees the widget and not the image.
I have tried researching several ways of dynamically showing or hiding the image, but nothing has worked. I believe the most promising untried approach is to show the Image and the widget at the same location in the output cell, rendering the widget in front of the Image in the Z order. However I don't know how to lay out the two to accomplish this.
It is necessary to manage this in the widget JS and/or Python code, and not from code cells in the notebook. Additionally, the widget has no background attribute, and I have not yet learned how to create one. (Discussions prior to my involvement in this project liked the idea of setting the background to the desired image.)
The jp_doodle canvas widget has a "snapshot" feature
which stores an image of the canvas. I think you could
use it do do what you are describing.
Please see:
https://nbviewer.jupyter.org/github/AaronWatters/jp_doodle/blob/master/notebooks/Feature%20demonstrations/Snapshot.ipynb
from the jp_doodle widget implementation
https://github.com/AaronWatters/jp_doodle
which has many examples of displaying images in canvases.
I need to use javascript-visualization packages in R like plotly and dygraphs and show the generated plots in my web page. The generated plot needs to be updated whenever the user interacts with other HTML elements in the webpage.
I have considered and have been disappointed in the Shiny server way to integrate the UI with plotting because it limits the developer's way of having full control over the UI using javascript, otherwise it's great.
Until now I have found that I can embed the htmlwidgets file in an IFrame to show the plot, but as discussed in this post: Embedding an R htmlwidgets into existing webpage, and in general, Iframes are considered bad practice, and thus would like to do this: Answer to the above-linked question.
But the problem is that every time I regenerate a plot using plotly or dygraph and save them using saveWidget() function of htmlwidgets package the generated plot file has a different id for the div of the plot generated. How can I embed a div present in an external HTML file(with srcs to even more html/css/js files) whose id is changing every time I generate the plot file?
I would suggest I frame to pass form and using Shiny. That would not result in recreating the wheel effort in using a ready made server.
One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin
I have seen websites that use jquery chart programs and if you do a right click -> view source you cannot see the data for their charts.
How do I do this with highcharts?
Since the code is javascript I figure it's a matter of hiding javascript. Can you load it from an external file? Or if ther is any other way of keeping the data from appearing in the source in highcharts how do you do it?
What is the purpose of hiding code, when someone can compare your chart with i.e public and reproduce your chart ?
Best bet is to load the chart via ajax.
But this is not anything that can be considered remotely 'secure', nor is there any way to present your data on the web and yet not let people see your data on the web...
In fact, the concept is quite silly...