I am trying to create a timeline chart in a different way. Looking for suggestions on which one to use to get the best out of it in javascript world.
My problem is to plot clickable milestones with some text on the Y axis and months on X axis. I also have to show horizontal bars against text strings filled with colour and those milestones plotted on the bar as small circles or diamonds.
Hope I am clear. Can any one throw light on plotting this kind of map either in Excel or Javascript.
Thanks in advance.
It may be overkill, but this looks like the best solution, but it does neatly fit your request of timing on x axis, label on y, TimelineJS
It's pretty customize-able too to get it how you want.
Finally wrote excel based chart and started filling cells with colors etc based on custom logic. Thanks everyone for all your responses.
Related
I got a problem while using ApexChart and struggling so much on how do I could remove the one that I give 'X'?
So basically, what I want to achieve is like the light blue line that I draw.
On ApexChart, there's a specific styling for this - Curve's Stroke.
I want to use Stepline and Straight at the same time but I don't know how. So what I did is using 2 different series (dummy random data) with line and area chart type, then the first one using stepline curve and the second one is using straight.
It turned out I almost achieving what I need to do but, the problem is the 'X' blue mark.
I didn't want it like that. I want it just start a straight line after that specific last value/category/you know what I mean.
Is there any workaround for me to look? Can anyone help me?
I've been struggling about this for days and I'm getting crazy about it.
Reference: Apex Chart Demo's Docs
I have a d3 stacked column and for the way I'm doing this viz it makes sense to add a separation (effectively a white line) between each element in the stacked column. Is there an easy way to do this on the Y axis with padding? The other way I can think of would be to add tiny blocks in between each column element, but that seems tedious.
Thanks for any advice. PS I'm using d3 V4.
The answer that #danimal is giving would work, I think. However, in the end I went with "injecting" rows of empty rectangles. You can see the solution here: http://bl.ocks.org/mgoold/88f6f798dac245b3261ed1a543b04415 .
The only thing with doing it this way is that a y axis ceases to make sense. So I had to do left side call-outs for the volume amts instead.
HTH
I am fairly new to JavaScript, let alone charting. I'd appreciate any help in accomplishing the following. I have browsed many JavaScript charting libraries and examples but have not seen any that solve my problem:
I need to create dynamic stacked bar charts as shown in the attached picture. Horizontal axis is time axis. The chart should scroll to left with time along with time-markings on x-axis. Each horizontal stacked bar is for a different item on Y-axis. There will be many items on y axis. Each section of bar will have text as shown. The information about each section and its text is received dynamically.
Thank you!
See the desired end result in this image
I have found the Google Charts to be very, very easy to use (https://developers.google.com/chart/?hl=en)
However, in order to have dynamic content, you'll need to have some data source to read from so that you can use something like ajax to constantly ping it for updated data. The Google Charts library will give you a good starting point but it won't be dynamic. You'll have to program that portion but Google Charts is very great in providing you with the basic pie, graph, bar, etc.. 'chart templates' so switching between a bar and a pie chart is super easy.
I have a DC.js pie chart with some really small values comparatively. I'm trying to adjust the labels so they aren't on the actual chart. I want them to be off preferably with lines drawn to the slices. (something like this http://www.telerik.com/help/aspnet-ajax/media/htmlchart-piechart-simple-example.png)
I'm can't find any examples of this with DC.js and the only thing close is this (Label outside arc (Pie chart) d3.js), with d3.js, but I'm a little confused as how to implement in dc.
Anything to point me in the right direction would be greatly appreciated.
I think currently you would have to suppress the built in titles with .renderTitle(false) and then implement the custom titles in a renderlet. You would reselect the slices and then apply pretty much the code in that other question. The data will already be attached to the slices.
The titles would appear a moment later, as that's how renderlets work, but perhaps that wouldn't be such a bad effect.
Of course, I haven't tried this, just a suggestion..
I'm using jqPlot for some charting. I would like to highlight regions of the background of the chart. I would like to specify rectangles bounded by the values on an axis that are the entire length of the opposite axis.
Is this do-able out of the box, or must I alter the code? Would this be a good usage for a plugin? Is there documentation on how to write one?
Update: Looks like the fill option on the series might be helpful.
Update 2: Or maybe the GridCanvasRenderer or the ShapeRenderer.
I implemented it myself with about 20 lines of code in CanvasGridRenderer. Works pretty well.