I have a chart - I want to group values by month, and stack the numbers for each month by category.
This is the data. The idea here is there is values that have dates, categories, and costs.
I'd like to display a stacked combo chart where the Y is month, the X is cost, but the bar displayed is stacked in sections by category.
Similar to something that looks like:
Here's my attempt -- I'm close, I just can't get the categories to show/stack.
Code from attempt:
var options = {
title: "Cost By Month/Category",
tooltip: {
showColorCode: true
},
isStacked: true,
yAxis: {
format: 'MMMM'
},
bars: 'vertical',
seriesType: 'bars'
};
Any help?
You have only one category and because of that it looks like normal combo chart if you have more than one category it will appear as stacked, for stacked chart isStacked: true will display combo chart into stacked chart.
Related
I have three Y axis and two of which has got multiple spline series to be shown. My data is a time series data and it is all working as expected. Just that the labels of one of the Y axis is mixing up with chart area.
https://codesandbox.io/s/github/ismusidhu/yaxis_alignment_issue_highcharts/tree/master/
You can resolve it by setting appropriate yAxis.offset:
yAxis: [{
title: {
text: "POAI [W/m2]"
},
opposite: true,
offset: 70,
min: 0,
labels: {
format: "{value} W/m2"
}
}]
Demo:
https://codesandbox.io/s/alignment-of-highcharts-tertiary-y-axis-issue-bo7h4
I have a chart that is being generated using flot. Due to large variation in data and a lot of columns I get following:
where some names are longer when columns and they start covering them. I am trying now to move names so they would stay under the chart.
mechanism I am using ATM
function onCancellationAgentsReceived(series) {
$("#agentcancellations").empty();
$.plot("#agentcancellations", [series], { bars: { show: true, align: "center" }, xaxis: { mode: "categories", tickLength: 0, position :"bottom", } });
}
How do I move labels under the chart?
I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?
See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example:
EDIT: Here's a fiddle, thanks to JordanD for getting it displaying something:
jsfiddle.net
EDIT(2): From what I can tell, this is how a single series chart displays. Adding a second series (a second element in the data array) causes the chart to display as I expected it to, but with one series, it is basically centered instead of justified. Therefore, it's not 'broken', it just doesn't behave as I expected it to.
The data series is in the form of an array of objects in the form of:
name: 'string'
data: ['array', 'of', 'data']
As can be seen in the image, my x-axis categories are displaying as a string. It's being set as
categories: dates
Where dates is an array with an array of dates in the first index. It appears that the only thing displaying in the categories is the first element of the array. Even if I try
categories: ['this', 'is', 'a', 'test']
the only thing that will show is 'this'.
and here is the console log to accompany it with a small sample of the data:
and here is the call to instantiate the chart:
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
What I'm trying to get is for the x-axis labels (and the columns themselves) to be spaced out to take up the full width of the chart.
The problem is that you have 9 series and each point have the same x, so each serie starts on the same tick and you have result which you have.
Solutions:
use one serie and set up a color for each point
use pointStart for each serie
set data as pairs [x,y] but xAxis should be category type.
If I understand your problem correctly an easy fix might be to add a data type to your axis.
type : 'datetime'
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date,
type : 'datetime'
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
Is it possible to use categories as x-values in Highstock?
I don't need a time bar as x-axes, but something like numbered ratings.
This works in Highcharts, but i need the scrollbar functionality from Highstock.
You can use highstock release, but use highcharts and scrollbar.
Take look at example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis:{
min:0,
max:2,
categories:['first','second','third','fourth']
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled:false
},
series: [{
name: 'USD to EUR',
data: [1,3,4,6]
}]
});
http://jsfiddle.net/b826C/
You may be able to get the functionality you want using Highstock and the following workaround:
The x-axis is a datetime and your series date ranges from datetime 0 to datetime x, here x is the number of categories you have.
Then when you format the xAxis label use:
labels: {
formatter: function() {
return categoryText[this.value];
}
}
Similarly you can format, the text in the navigator,
categoryText is a local variable that contains the text names of your categories.
Here is the fiddle: https://jsfiddle.net/b826C/98/
One of the developers of Highcharts/Highstock answered to my support request:
It's not possible to switch the navigator to something else than time intervals.
The only solution to my problem is a navigation with a master and detail chart like in this sample: http://www.highcharts.com/demo/dynamic-master-detail