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..
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 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 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.
This is pretty straight forward. I've been struggling to get Highcharts to display some charts in a readable manner for a while now and no one seems to be able to give me a good solution. This is a great example of what's happening:
We have a tool where we dynamically can add and remove data from a chart. This chart is clearly a very large dataset. I'm not sure what properties I need to manipulate in Highcharts to prevent this sort of chart from being generated. If anyone can shed some light, I'd be forever in your debt.
Can someone please let me know how should I implement this kind of chart? I need to use a javascript library for implementing a chart which has a big circle (100%) inside which there are small semi-circles which divide the bigger circle. Its kind of pie chart but not exaclty pie chart. I want semicircles inside a big circle It looks like a bubble chart to me but it is enclosed within a circle. I am not quite sure which library should I use for this?
Any help would be appreciated!
write your own.
you can make divs into circles with css(border-radius), even into triangles(3d transform within div dat gives no overflow) if you try hard.
then you could utilise absolute positioning to place them where you want them.
That way you dont even need javascript or a library.
By request:
http://jsfiddle.net/h6su5/
Just a small example what you can do with google and some inventive thinking ;-)