I've been looking around and couldn't find an answer for it, and I don't think it's a difficult solution, but I can't figure out how to do it.
I draw a grouped bar chart with RGraph. This is done with the following code:
var tooltip = createToolTip();
bar4 = new RGraph.Bar('graph_tab1', objectSoap1.getValue());
bar4.Set('chart.colors', ['Gradient(#c01:red)', 'Gradient(#05D:blue)', 'Gradient(#0f0:green)', 'Gradient(#f0f:pink)']);
bar4.Set('chart.labels', objectSoap1.getLabel());
bar4.Set('chart.numyticks', 8);
bar4.Set('chart.ylabels.count', 6);
bar4.Set('chart.variant', '2d');
bar4.Set('chart.strokestyle', 'rgba(0,0,0,0)');
bar4.Set('chart.hmargin.grouped', 0);
bar4.Set('chart.background.grid.autofit.numhlines', 6);
RGraph.Effects.Bar.Grow(bar4);
now if I hit a button it had to change from grouped to stacked. I do this with the following code:
bar4.Set('chart.grouping', 'stacked')
RGraph.Effects.Bar.Grow(bar4);
it draws a stacked graph.. but the problem is the y-axis doesn't change.
as an example, if I have a grouped bar chart, with values 5, 10 and 15. the max y-value will be 15.
But if I stack these values, the value will be 30, and with this piece of code the barchart will grow to far, because it's going to a value 30, and the y-axis only goes to 15.
I hope it's clear what I mean and somebody can help me out.
There's an example of switching from grouped to stacked here:
http://dev.rgraph.net/fiddle/view/cfa8b72f8a9988527269abdfc7d34384
Related
I created a line chart with Flot. The Y scale reaches for example from 0 - 100. Now I have an input field where a user can enter a number from 0-100.
If he choses, lets say 80, I want to create a horizontal line on the chart at Y=80 indicating the selected value. This line should be adjustable at any time.
I haven't found anything so far but I hope somebody can help me.
Use the markings option to read the value from the input and redraw your chart when the input value changes, something like this:
var yvalue = parseInt( $('#yvalue').val());
plot.getOptions().grid.markings = [ { yaxis: { from: yvalue, to: yvalue}, color: "#0000bb" } ];
plot.setupGrid();
plot.draw();
Here is a fiddle with a similar example.
I have a barchart using the latest version of charts.js. Now I need to show the bars and at the right, a bar that actually has nothing to do with the rest. (the first bars are thre monthly values, the last bar is the forecast for this month)
See here to better understand what I mean. https://jsbin.com/diqetaxeqi/edit?js,output
The forecast bar has it's own y axis on the right. I've struggled setting the bar to the right and have solved this by creating a new dataset filling the values with 0 to make sure it is the last bar that is drawn. The problem with this is that the labels are not centered anymore as the bars with 0 value is still painted.
How can I solve this better?
Thanks
Your code requires 2 different datasets ? Or can they be all 4 like:
data: [18739460, 33056135, 36562034, 3234234] ?
Ok. stacking the bars does the trick.
do
stacking:true
at xAxis
What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.
My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?
Look at some of the options here:
http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.
You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)
I have a working linear bar chart using D3.js, which also has time-based x axis. The bars are bound to a count attribute, while the axis is bound to a date attribute. The ticks in the axis are not lining up with the bars. Any idea how to line them both up?
Here's the jsFiddle: http://jsfiddle.net/MmEjF/
This is happening because the chart has 14 bars, but 15 tick marks.
The first tick mark should be the month prior to the start of your data set.
You can fix this by pulling forward the start of xTimeDomain by one month:
xTimeDomain[0] = new Date(new Date(xTimeDomain[0]).setMonth(xTimeDomain[0].getMonth()-1));
I need my yAxis categories to be 0 = 'Poor', 0.25 = 'Below Average', 0.75 = 'Average' 1="Good"
I set the categories right, but Highcharts seems to interpret each point I plot to be equal to "1" step on the yAxis. See http://jsfiddle.net/54cFG/
Ideally, that chart should always show 4 labels on the yAxis and the plotted points should line up at "Below Average" and "Average".
Is there a setting I'm missing? I think I pretty much tried everything at http://www.highcharts.com/ref/
You could always use plot bands to display categories on the Y axis. That way you could still keep the actual values. I have demonstrated that with your code here.
EDIT
Here is another example with the grid lines taken off and the plotBands each with their own color. Here is the color chart if you wan to change any of them.
If you prefer to use the plot bands and no y-axis labels, here is an example of that. I think it works just fine. If the user really wants to see the exact value they can hover over the point.