I have many signals recorded and i want to show them on a Chart using Google Charts. These signals share the same x-axis (time) but have very wide data range for y-axis (value). Some of them go from 0 to 10, while some others go from 1000 to 20000. Therefore, it's impossible to display them in the same chart.
Yes, You can use the vAxes property, to show them in the same chart but it limits the graph to 2 signals. And I have more than 2.
Therefore i thought about something like this:
Many charts sharing the same X axis, but with dedicated Y axis. Also, the crosshair is only one for all the charts.
I've searched the Google Chart documentation, but i couldn't find anything like that.
The question is, is it possible to do it with Google Chart? Is there a function or option to do that?
We are working on object oriented solution for charts and we are thinking to make it open source. You can have a look and you can use chart skelton to fulfill your needs. Here is the link
(click on the first chart)
http://grafitome.github.io/advanced-charts.html#
I'm not biased here, but want to recommend plottable.js. Have a look at their examples section for the Synchronized Charts and Finance, as well as their tutorials section, specifically "Building flexible layouts". Their API provides a high degree of customization.
Related
I'm trying to setup a graph that looks somewhat like this:
The graph consists of two data series, one for the stacked and another for the averages. Pay attention that is has two x-axis (multiaxis).
Looking at the ChartJS documentation, mixed graph types are possible, but not for stacked horizontal bars. Other articles seem to outline this as well, like this one on Alligator.io. I've yet to see any chart library to showcase such an example even.
Question is therefore if this is even possible, or if I should look into alternate approaches instead.
Currently it's not possible (only proof I could find right now).
The next version of chart.js will be 3.0 which has many major impovements, including changes to the horizontal bar chart, verbatim "Remove horizontalBar and make all charts capable of being horizontal". I think it will be possible with this version. But unfortunately not now.
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
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.
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.
Does any one know if it is possible to use the Default Google Scatter Chart in the Google Visualizations Gallery to draw a scatter chart that has both a series with points only, a series with a line of best fit and on top of this a set of lines across the chart indicating limits. i.e. at +/- 20% etc.
The chart we need is actually a Control Chart with multiple series and individual formatting of each series displayed on the chart. i.e some series with only points other series with a line of best fit.
Does any one know of a Control Chart that has already been done using the Google Visualization API?
After working with the google visualization api for a while and searching the web I would have to say that the answer here is no.
You would have to build your own custom chart and from working with the api for a while I would rather do this with another charting library like jqPlot.
You can make separate line sets in the google scatterchart. The examples are on the scatterchart page.
http://code.google.com/apis/chart/docs/gallery/scatter_charts.html