How to put overlay text using d3.js (javascript) in html - javascript

I have a graph created in javascript (its just a d3.js graph). I thought it would be cool to have a title overlying the graph in a webpage. I understand html layouts and that overlying html can't be done this way. Is there a way I don't understand or am I going to have to try to render text on the graph as part of the javascript?

Related

Searchable label text Chartjs

I'm trying to get the label text within my Chartjs Bar chart's to be discoverable via a normal ctrl+F or cmd+F search. I'm not really sure how to approach this, as it seems that the text generated within the canvas isn't rendered as text within HTML elements.
Chartjs uses HTML5 canvas to create it's graphics. The HTML 5 canvas, by design, is a drawing board, so any text inside the canvas is considered a drawing, therefore, not searchable, unfortunately.

d3.js - how to actualize the graph data? transition?

I am trying to learn d3.js (with no JavaScript background) so I created a simple scatter plot.
Now, I am looking for how to render that graph with random data, each time the user click on the Next button.
In the link above, there is what I tried so far.
I know it's a very newbie question and there is thousands of example but I am looking for an explained solution (not just code). Thanks
PS: Please change the external ressource to this if the graphs won't show up.

Convert contents of div into an image to insert to pdf

Here's my situation. I have to make a report with graphs. I have already successfully created graphs (bar, pie, and line) using ChartJS and displayed them in my page. However, I want to put a "print" button which, when clicked, will generate a pdf containing all of the graphs created.
For my other pages (which are only forms), I have used TCPDF and it's working well. However, I can't use it again for the graphs because what I produced are widgets placed in div elements.
My plan is to convert the contents of these div elements (the graphs) into an image so I can insert it in TCPDF.
Is there a way for me to convert the contents of the div into an image?
I can't use canvas.toDataURL() like in this link because ChartJS puts their graphs in a DIV element and NOT canvas. I also found out I can't put div inside a canvas (see link).
Please help me (T^T)

Display a Excel chart in Html page

I have a EXCEL file containing multiple Tables and Charts.
I want to create a web page to display a particular Table and a Chart. I used java script to display the table.
But cant find a way to display the CHART. By chart i mean it contains a pie graph or bar graph.
Is it possible to display using java script? Or do i have to use JSP/something else?
Take a look at Google Chart Tools. Here is an example with javascript source code. If you are building the table on the server side, you may instead want to pass the data down JSON encoded and then build both the table and chart at the same time without having to pass the data twice.
An easier way would be to use a free tool like oomfo, which is a PowerPoint plugin to create charts. It lets you pull data from excel, create charts and then export the entire slide as HTML - the charts are in Flash and JavaScript (fallback). Just add a line of code in the output web page to render JavaScript charts only.

Hide HTML outside of canvas element in the JavaScript tool InfoVis

I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.
You can see the visualization here: Link
Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.
Here is a picture of the problem: The black border is the canvas border.
How can I stop this from happening?
Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.

Categories