Svg and Highcharts? - javascript

I don't understand how operate svg with highcharts...
I want to do this 3d chart:
http://baering.github.io
I see the source code, and understand that is made with highcharts-3d.js and highcharts.js
For the same chart (but little bit small and less difficult) the code is very easy...
But if see the html code of that page, i see that there is tag svg (and its children tags...)
with svg is possible customize the 3d chart???
How???
The svg is added with code in js ?
Help me :(

The highcharts is library which creates SVG elements, but you can configure options by json.
For further information please visit the website:
http://www.highcharts.com/docs

Highcharts create SVG tags using there library, u cant not change them or its tough to change instead , you can configure chart by JSON it is simple than modification of SVG tags

Related

Javascript visualization package for multidimentional bar chart

I am looking for an open source visualization package to create a 3d bar chart similar to the one I have created in excel (see image below). I have tried vis.js, but there was no way I could tell to format the 'walls' to show gridlines and a background color. If this is possible in vis.js I could do that as well, but I didnt see anything in the documentation.
The features I need are:
Gridlines for 'walls'
background color options for 'walls'
Free movement/rotation
Ability to change individual bar color based on some logic
Ability to export image to pdf, etc..
Ideal Chart (excel):
Best I could do with vis.js:
Any help or suggestions would be greatly appreciated! Thanks!
Have a look, HighChart has great features, you can use the non-commercial version.
https://jsfiddle.net/oscjara/4mjp7egw/
here is the library
jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/3d/skewed-labels/

SVG to PNG Full SVG image

I am using the library http://www.getorgchart.com/ to produce a large organisational chart diagram. This renders the chart in <svg></svg> tags.
My problem is, the built in "print" function doesn't print the entire chart, just the visible section. As my chart has around 180 people on it, it expands horizontally quite far!
What I need to be able to do, is capture all the SVG data and export it to PDF/PNG/JPG whichever of these (PDF would be ideal with the scalability intact). I've tried several libraries to try and complete this task, and failed thus far! I've tried using canvg and also other libraries that i've found such as https://github.com/exupero/saveSvgAsPng (which worked to an extent but all the line paths were messed up and it only printed the visible section of the svg not the entire chart).
UPDATE Solution must be either client-side or easily implemented on internal servers!
Using the last library I had:
$(document).ready(function(){
$('#printme').click(function(){
saveSvgAsPng(document.getElementById("svgChart"), "diagram.png");
});
});
Does anyone have a solution for this?

can we generate Gauge charts using canvas tags....?

As Part of my project we have generated GAUGE CHARTS dynamically using svg tag..
Here im adding the url for dojo Gauge charts documentation which we have used:
http://dojotoolkit.org/reference-guide/1.9/dojox/gauges/GlossyCircularGauge.html
My Question is can we generate this Gauge charts using canvas tags....?
I'm new to this svg and cancas..
Can anyone help me?
Go to following link. You will surely get your answer.
Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)
Another hands on example link:
http://thecodeplayer.com/walkthrough/make-gauge-charts-using-canvas-and-javascript

Use Canviz to draw Graphs in HTML pages

i would like to draw complex Graphs using Canviz, and put them to a HTML page.
i downloaded the Canviz package, which includes an example. when running the example, i have a graph drawn in my HTML page.
when i'm trying to do my own test, the graph is not drown.
anyone has an idea about this ?
There are a variety of tutorials on how to use the html 5 canvas to draw graphs such as:
http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/
http://www.javascripter.net/faq/plotafunctiongraph.htm
http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/
http://www.html5laboratory.com/creating-a-bar-chart-with-canvas.php
Also see:
http://www.w3schools.com/html/html5_canvas.asp

How to create a multiple linked & directed graph with javascript?

This is my problem: For a school project we are trying to create a directed graph and make it fit in a typical html website. We figured out it had to be written in javascript, because a java applet isnĀ“t an option. So this is how it should look like: image.
The data visualised in the graph will be gathered from some xml files.
We took a look at flare and some other packages, but real thing is making a two-way link between the nodes (where the thickness of the arrow represents importance) in our graph. Making the whole thing moveable is also required.
Any ideas? Thank you.
Have a look at jsPlumb - a not featurerich but easy customizable jQuery Plugin for directed graphs
http://morrisonpitt.com/jsPlumb/html/jquery/demo.html

Categories

Resources