Javascript visualization package for multidimentional bar chart - javascript

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/

Related

How to create stacked progress bar chart with JS to display on HTML

I am looking for this solution. I would like to know how to recreate this style of the stacked bar chart.
I will use this to indicate the status of the machinery during the day. so the color can be used more than once like in the picture.
Show picture of Example graph
Would suggest you to use any library -
Chart.js is good one that I have used and they do support stacked-bar graph
https://www.chartjs.org/docs/3.5.0/samples/bar/stacked.html
They have a good document also on how to use it.

Alternative to Google Charts Timeline

I've been playing around with the Timeline chart from Google Charts. It's great because it's very easy to use. However, I stumbled upon quite some limitations:
It's not possible to adjust the height of the bars, or the amount of margin around them.
I cant format the labels of the hAxis. No fonts can be applied, or textcolor, or font-size. And for some reason, two of the labels are in bold. (see image below)
It's not possible to add a text column on the right containing an extra set of information (for example, the sum of all hours in this row)
I can't move the hAxis to be displayed above the graph instead of below
etc...
Here's a link to the image:
For this reason, I was hoping some of you could introduce me to an alternative tool or api that I can use. It needs to be easy to use, and free/opensource. I've Googled for numerous chart tools, but almost no tools provide this SIMPLE timeline type of chart (note that it's not a Gantt chart, but it looks like one).
There are a few Gantt chart Javascript libraries, but none seem to be close to the Google Timelines chart.
The only chart I could find that is similar is Visavail.js. It builds upon D3.js and is open source, so you can modify it to your liking. Check out the "Custom Category Data" example. It's a lot like a Google Timelines chart.
For your convenience, I've added a screenshot of the example below:
If you are familiar with d3.js, here is a d3js based example: http://bl.ocks.org/bunkat/1962173

How to create a drilleable bar graph in jsp page using open source charts API

We are developing a web application using Spring+Tiles. We have a requirement that we have to create a bar graph in a jsp page. We searched a lot on web regarding this issue. Means how we can create a bar graph using Open source Charts API. We found many suggested APIs like JFreeChart, charts4j and etc.
But we are not sure which one to use. Actually our requirement is we have to create a bar graph which can be drillable.
Please help us. If you could give any examples that will be highly appreciated.
Thank you very much in advance. Thanks a lot.
I would recommend you to use the rest services and send the json to highcharts OR D3.js OR DDChart, its the best thing to do in your case below link can do what you want :
http://www.highcharts.com/demo/column-drilldown
Highchart (licence) : http://jsfiddle.net/yPVX9/2/
D3 (free) : http://jsfiddle.net/mcuepavh/1/
DDChart (free) : http://kiersimmons.com/DDChart/index.html
You can try FusionCharts for a drill down chart.
Have a look to this and you can use this in your application : Fusion Charts Linked Charts. Regarding licensing issues,you may get in touch Sales Team.
Apart from that, you can use Raphael.js . Start from the basics say try creating a small rectangle, fill some color, opacity, binding some events,etc. With a day effort you can make a simple bar chart. Once you make a bar chart, attach an event to clear your container and redraw another bar chart with the drill down data. Thats the concept you need for your drill-down.
Having said that, I would still recommend you to use Fusion Charts because they takes care of some smart things - like space management of the bars, the intervals, the colour codes of the bars(if not hard-coded), axis part... Its a finished product which abstracts you from the technical obstructions and give your application a beautiful add-on.

Improve tooltips area chart using Grafico

I am working on a requirement-->" it is required to generate a stacked area chart with tool tips".
I am able to do it using he grafico open source js published in this url http://grafico.kilianvalkhof.com/documentation/#basics
But when I try to customize the tooltip for the area chart, tool tip starts drifting from its position.
I found Google apis provides a better tool-tip from their implementation . please find the implementation on on this url https://developers.google.com/chart/interactive/docs/gallery/areachart#Stacking( here tool-tip does not drift from its position if I change length of text in the tool tip) and tool-tips are highly customizable.
The grafico tool-tip implementation is having issues ,but the google implementation is better.
When i try to customize the tool-tip in grafico chart it starts drifting out of its position.
Also it is not possible to have multiple text with different styles inside the tool-tip.
Any clue on how to achieve this?
I could not customize Grafico since there were many issues.
So finally I used Jquery FLOT java script library and able to generate Stacked area chart with tooltip.
Jquery is really cool and easy to use, with so much help and support available online.

jQuery customizable Bar graphs

I am trying to use jquery bargraphs in my website. I need a suggestion that I can easily customize the bar graphs. Also, I need to download the bar graph into excel sheet with graph image. Please help me.
Thanks in advance!
Use http://www.highcharts.com/ you can customize the bar graphs easily here. Also you can download the graphs in csv format.

Categories

Resources