I am having kinda a hard time to find a solution for a special type of bar chart.
The graph:
https://i.stack.imgur.com/wIHWz.png
After a long time of searching the web, I wasn't able to find a good solution for this. I was using chart.js and the first thing I tried was to fill a bar with .svg, but sadly it is possible to fill it only with pattern. Another thing I thought may work was to design my own bar via two separate stacked line graphs, but there I wasn't successful becouse of the dependency on xAxis (to create a triangle I would need three labels, and the result was still total ****).
I would really appreciate if anybody would be helpful and suggest an idea how to go around this as I am absoulutely out of ideas.
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
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.
I am new to D3 and am hoping to show a range of prices (lowest price, median price, highest price) for different services using a graph similar to what Glassdoor uses (see this example: http://bit.ly/1koKeLL).
It's a horizontal bar chart that has a variable margin on the right and left so that it graphically shows the low, median, and high data points. Does anyone know the best way to implement this, especially for someone just learning D3?
I think this guy implemented very well a chart that is more complex than your chart:
Bullet Chart in D3
However, if you want to get to know D3, and to use it in an intelligent and productive way, my strong advice is:
Don't take shortcuts.
This means that before you start implementing anything, you go through at least one good tutorial, and take at least brief look at D3 documentation.
A good tutorial is here. Go through ALL 20 lessons. Implement ALL examples on your local machine. You can do it in several days. And only then you come back to your example.
Don't be seduced by stories that you can find on the net like "I started with D3 yesterday, and now I create craziest visualizations". They are either lies or profound ignorance.
Any ideas on where to even begin with making a violin chart using d3? Does it exist already?
I've looked around and have figured out how to do it using ggplot2 and was hoping there'd be a ready-made example that I could learn from but haven't found one yet.
I suppose I could do a really painful process of making various size bars on top of each other, or taking a distribution, rotating it and mirroring it. But surely there's a better way.
I needed that for myself so here it is: violin plot
As far as I know, nobody has done this before, but it shouldn't be too hard. I would start as if I was making a line chart (or boxed instead of lines) for one half of a violin. That is, create the appropriate x and y scales and add the data in. The result of this I would rotate and translate to the correct position. Then do the same thing again and mirror it as well to get the other half of the violin.
This may sound complex, but SVG has built-in support for these operations (rotating and mirroring). You should be able to approach this pretty much like drawing a line graph of the distribution with 2-3 simple operations on top of that. Wrap everything in a function and you've got something you can call to create a violin.
It of course also depends in what form you have the data to make the plot. A line plot might not be feasible because of too few data points, but then you can easily use bars instead.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-