html flow charts/ workflow diagram - javascript

I have large set of flow charts and workflow diagrams. I want to draw them and convert them into a webpage, I also need every object in the flow chart to be clickable. I tried Visio and it does save the flow chart diagram as webpage. But I find the structure to be to be too complicated, with different level of file hierarchy with lot of javascript files and css files.
I just know some basic html and javascript and I need just a simple static clickable flow chart. Is there a program to do such? I know that there are few javascript libraries like Raphel which can draw interactive flowcharts. But I donot want such fancy stuff, my flowcharts are very complex and I have to manually draw them and convert them into webpage.

If all you need is just an image of the flowchart embedded in a webpage, with clickable areas, then an imagemap might just work for you.
You can save the flowchart image from Visio, powerpoint, photoshop or any such tool and then create an imagemap (it is a simple html code that allows you to execute code on click etc)
http://www.image-maps.com/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Related

Looking for video timeline functionality like clideo

I'm looking to implement a video editing feature like that of featured here https://clideo.com/video-editor.
I'm planning to use Vue 3 with a Laravel backend, but is there an ideal framework to use for a web application like this, or should I just try to reverse engineer/hack my way to a working implementation?
Sorry if this is the wrong place to ask, I just haven't been able to find an answer.
Thanks
Video editor consist of two important parts
1)A Timeline that represents sequence.
2)A Output window to show output of timeline.
-Clideo uses div and html elements positioning to generate timeline but a better alternative is to use Canvas and draw a timeline on it just like in veed.io
-For video output again you have to use canvas and webGL to draw each and every frame one by one.
you wont be able to edit video on backend and send edited multimedia for each change user makes you need to find a way to do in on client using webcodec.
For the choice of framework if you are having canvas and webGL do all the rendering of timeline and output then it dosent matters you will spend more time with drawing functions.
Almost every video editor has a timeline. But only in some of it (https://wave.video/tools/video-marketing/promo-video-maker) is divided into several ranges. An additional advantage will be the grid on the line. You can also easily manage layers and frames.

Unknown content in the html div

I know this question is not a good one but I have stumbled upon on website called Tradingview.com which has awesome charts. I was interested so got into the html code of the website and I discovered that div which should have contained desired chart was empty. I get that the chart is generated by JavaScript but I am interested how it is possible to draw something like that without any html elements and If it is possible could you tell me what "library" do they use?
Here is the link to Apple Stock Chart
https://www.tradingview.com/chart/BRuYnW6t/
Basically Javascript literally Draw chart inside that div on local end.
like JS will make rectangular shapes. circles, lines and everything.
for details please visit this site.
https://www.w3schools.com/tags/ref_canvas.asp
drawing div will be empty but shapes and everything in it will be there because of JS.
Looks like tradingview has an API for their library available upon request. I would also encourage you check out chart.js, a popular solution for implementing charts in javascript.
Normally drawing in HTML is done with canvas (WebGL for 3D drawings) or SVG. Additionally, you may use plugins like Flash ActionScript and Java Applets. For charts, a superb library would be Google Charts.
If you inspect carefully enough (F12), you will realize TradingView actually uses canvas for the drawing.

editing individual lines in svg file with javascript

Not really sure if this can be done- but I've made an image as a google drawing, and downloaded it as an svg file. The drawing only consists of individual lines connected at the ends, some of the lines being kind of oddly skewed. I am including the entire svg into an html doc using <img src="my_svg">
I was hoping to edit some of these lines based on user input so the backend will just be scaling some of these lines. But the image needs to stay connected.
Is there away to maybe grab the individual lines in the image and adjust their size? I know it can probably be done in Illustrator or something but I'm not using it, I would like this to completely be done in Javascript (open to suggestions using other languages/methods, I just initially planned for this to be a webapp)
I've seen that editing svg with jquery seems to be a powerful way to interact with svg's but nothing specific to what I am trying to do.

Generate PDF from SVG/paper js

I'm using paper.js to generate SVG-files in the browser.
Is there a way to generate PDF's from these SVG's?
I have javascript and .NET in my toolbox and using third party components for generating the PDF documents is not a problem. I'm currently looking at SelectPDF as a possible candidate for generating the PDF's. It works great with HTML but I'm not sure it handles SVG's that well.
Look at http://www.cloudformatter.com/CSS2Pdf
Down the left side navigation there are many samples of SVG to PDF charts. The one item to check is if your implementation code inserts the appropriate SVG namespace. Some of the samples show doing so if the charting library doesn't.
API guide is here http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage and shows both formatting div with content or even just specific SVG.

Creating a complex interactive wheel as a web app

How would you do to create a chart like this, interactive (i.e. with links and tooltips), in an HTML page?
From what I know about SVG I think it's the right direction to take (no Flash anyway), but I'd like to know what would be the path you'd take first in order to have an interactive chart looking like this on a web page.
I'm not asking for the details but just where to begin to look. I know JavaScript quite well, but I have never dealt with any SVG libraries.
checkout d3.js examples, this example looks very close to your pic.
I offer to use Raphael library (http://raphaeljs.com/) and if you like to make more complex or using 3d objects you can use webgl with treejs library (http://threejs.org/) .. you can find example and demo for charts or other documents in websites..

Categories