Diagram on a web page with Changing Values - javascript

I am trying to create a diagram which will display the IOPS between a hypervisor and a SAN on a web page (c# mvc web application), to show how much data transfer activity there is on a monitoring system.
For example something like this, however in this example the IOPS would be between the Hypervisor and the Virtual Machine:
Two part question:
1) Is there a free software package to create such a diagram where I can put dynamically changing values into a specific place?
2) If Q1 isn't feasible, is it possible to overlay the dynamic values?

My suggestion is looking at drawing the diagram out in SVG. Something like Inkscape should do just fine. It is free and open source.
You are able to add IDs and classes onto the elements in there as well so that you can access them in the standard JQuery way.
If you are feeling adventurous, you could draw it out using D3 here
which is for all your unique type charts and graphs.

I don't know about the software but it can be achieved by ws protocol HTML5 with java SSE(server send event).
On client side you can use a static image for the values which are not changing dynamically and place any html element and change its value dynamically via jquery.
Use this only when you are aware of comet technology and have extra time.

Related

Wouldn't it be possible to smoothly scroll the chart to the left in Apache ECharts dynamic data samples?

I am trying to decorate a chart using Apache ECharts dynamic data.
(https://echarts.apache.org/examples/en/editor.html?c=dynamic-data)
I want the updated data to flow naturally, not simply delete and add (shift and push).
Similar plugins exist for chart.js.
(chartjs-plugin-streaming)
Is there any way to get the same result in ECharts?
I'm still in the technical review phase, only testing through the demo site. I would like to see if the technology is feasible and if possible, I would like to obtain a sample.

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.

Javascript Flow Chart or Static Flow Chart?

Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html

Drawing arbitary pictures on a webpage

I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.

how to create plots (non-flash) with mouse-over info boxes on the fly for the web?

I'm thinking about creating a tool to visualize scientific data on a website. For this, the user enters some query string and out comes a simple (x,y)-plot (similar to this)
I know that using Matplotlib, one can generate graphics on the fly for python. However, this doesn't solve the need for some custom java-script code to display the info boxes. I also came across google chart tools, which are very close to what I need. The problem here is, that the code needs to be fetched from google, which my employer won't like.
What would be the best OSS library for python, Java, PHP (or Java-script) out there to meet my requirements?
Thanks,
Chris
If you need dynamic elements without flash or Java applet then JavaScript is the best choice. To create plots you could use HTML5 canvas element.
Capturing mouse events is JS is trivial...

Categories