I need to create a data visualization in a web application, I wanted to use Highcharts since I have some previews experience, the problem is that the visualization I need to create is more custom, based on my investigation I'd need to use something like D3 which allows to do more things, but maybe someone has done something similar using a library with a smaller learning curve.
Is it possible to create a visualization like this (the image to the right) without using D3? Each of the small boxes inside the bars is an element that should be clickable to show it's details inside a card-like HTML element.
I saw this example with Highcharts, but it's not quite what I want and I'm not sure if what I need can also be done.
Thanks in advance for any help.
Related
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.
I am looking for tips on how to approach creating an editable graphic that looks like a pie chart and can be modified by sliding nodes along specific axes. The resulting graphic would look like the image below (created in illustrator).
The closest I have come to finding something similar is a windrose chart.
I have thought of using Bezier.js or something similar but wondering if anyone might know of an existing library that might get close to what I need.
Thank you.
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.
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
Has anyone seen an open-source library that produces charts similar to Github.com's commit timeline charts? Check out this profile (picked one at random) and note the bar graphs below each project.
I've been trying to dominate Flot into behaving correctly but it just doesn't have the flexibility of formatting options to come up with a decent clone. Personally, I'd prefer a Javascript implementation but I'm open to looking at server-side stuff as well.
Definitely has to be a stand-alone implementation, the application is headed to a network separated from the Internet, so Google Charts API is out of the question.
I'd suggest using jQuery Sparklines. You'll need to create two separate graphs and position them on top of one another (one for the blue bars, another for the gray bars). You'll also need to make the dotted line/legend an image, but github also uses an image for that.
Here are some decent values to get you started:
EDIT: I originally overlapped two separate sparklines with relative positioning, but it would be better to use the "composite" option to draw two graphs on the same canvas.