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
Related
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 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.
i do have a chart in my application with many x-values. The labeling doesnt seem to work fine because there is e.g. no space between the labels like this:
I know i could make the labels vertical, though is there an other option to scale/place the labels mor intelligent? Or is doing it vertically the way to go?
I guess my first thought is are your labels the same length every time?
Vertical labeling is often preferred because in many of the examples given we are using variable lengths for things like names.
Does your chart scroll off the screen because of all the columns? just curious.
Now you could try creating the grid with a set width to the columns, something like this and see how it does.
series: [{
....
renderer: function(sprite, storeItem, barAttr, i, store) {
// set a width that gives you enough space
barAttr.width = 60;
return barAttr;
},
....
now looking over my code I often use the Ext.String.ellipsis function to set the length of my labels under my columns. so something like this below where I trim at 8 characters:
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 8);
},
}
....
It work for me
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Time',
style: {
textAlign: 'center',
},
label: {
rotate: {
degrees: 270
}
}
}
enter image description here
Highcharts has an example using irregular time intervals, I want to do the same on highstock howeverthere is no parameter for the xAxis-type.
JSFiddle code
My options are
$(function() {
$.getJSON('http://184.173.195.228/~ktwsn/temp2.php?action=get_sensor&sensor_serial%5B%5D=3B74F41400000069&sensor_serial%5B%5D=3BB2FA14000000E6&sensor_serial%5B%5D=3B91F11400000079&sensor_serial%5B%5D=3BC7F114000000E5&sensor_serial%5B%5D=3BC0F314000000E3&callback=?',
{action: "get_sensor"},
function(data) {
var seriesOptions = [];
$.each(data, function(key, val) {
seriesOptions.push({
name: val.name,
data: val.samples,
marker : {
enabled : true,
radius : 3
}
});
});
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
},
xAxis: {
type: 'datetime'
},
rangeSelector: {
selected: 4
},
series: seriesOptions
});
});
});
Found it. The nomenclature between highcharts and highstock are different.
For Hightstock it's
xAxis: {
ordinal: false
}
The company really needs to combine highcharts and highstock. A single API documentation would be easier to follow.
I would verify that the output data is actually using the same time stamp.
Many cases like this include time stamps for the same date, but different times, which will always result in different x axis placement.
(I know that may be an obvious check, but I have seen it many times...)
I'm plotting a chart where the x axis is a datetime. My data contains lots of sample from each day, and the resulting chart is jittery.
Is there an easy way to get highcharts to only display 1 or 2 datapoints from each day, to make the chart smoother?
http://jsfiddle.net/RjPRd/72/
var data = [[1354282654000,13],[1354285785000,13],[1354289387000,14],[1354292990000,15],[1354296592000,13],[1354419090000,20],[1354422692000,21],[1354426295000,20],[1354435425000,19],[1354438087000,19],[1354538087000,24]];
var options = {
chart: { renderTo: 'graph' },
xAxis: { type: 'datetime' },
series: [{data: data}]
};
var chart = new Highcharts.Chart(options);
If you are asking if HighCharts can do interpolation/projections then the answer is no.
What you can do is pre-process your data or use HighStock with dataGrouping. Here is a very basic example.
This is the code that does it:
plotOptions: {
series: {
dataGrouping: {
approximation: 'average', //default
units: [[
'day',
[1]
]]
}
}