We Keep Coding

Highcharts yAxis Categories with string values: error 14

Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.

You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis

Highcharts: how to define x-axis for dynamic chart

I am using Highcharts to automatically plot an array which is output from a sensor and is updated every second or so. The array is x elements long. This particular sensor measures the light intensity at x steps between some min and max wavelengths (that is, it measures the intensity at increments of (max-min)/x--in my case this increment is not an integer). I also have a static data set that is plotted on the same axes with the same x-axis requirements.
I am able to successfully graph this data dynamically, but the x-axis scale is wrong. Instead of ranging from min to max, Highcharts defaults to a range of min to min+x. I'd like to change the x-axis increment so that the scaling is correct.
Can a min, max, and number of data points or step be defined to generate the x-axis? Or is there a way to define the x- and y-axis values as individual arrays that are plotted against each other? Some other way? I have done lots of searching and experimenting but have come up short.
The relevant snippet of my code is below.
function showData(result) { // 'result' is an array that comes from the sensor
var numbers = int(split(resultString, ","));
chart.series[1].setData(numbers);
socket.send('a'); // send a byte to tell it to start sending new data
loop++; //increase loop every time the server receives data
chart.setTitle({ text: 'Spectrum, reading #' + loop });
} //showData
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
load: function() {
chart = this;
showData();
}
},
title: {
text: 'Spectrum, reading 0'
},
xAxis: {
title: {
text: 'Wavelength [nm]',
allowDecimals: false,
},
},
yAxis: {
title: {
text: ''
},
},
tooltip: {
pointFormat: '{point.x}'
},
plotOptions: {
area: {
pointStart: 340,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '404 nm laser spectrum',
data: [130,130,114,113,113,116,112,111,112,112,115,113,113,115,
112,114,113,113,114,115,113,114,113,114,115,115,117,119,124,
136,145,164,190,217,252,363,482,491,417,285,188,156,140,132,
127,122,117,118,117,115,116,115,116,118,116,116,117,116,117,
116,113,117,114,113,115,112,116,114,114,116,114,114,116,113,
116,115,114,115,115,114,115,115,115,116,114,115,116,114,118,
114,116,116,115,118,114,113,117,113,116,116,115,116,115,115,
115,114,117,116,117,118,120,118,122,119,128,127,130,134,136,
138,140,137,139,134,136,134,132,133,134,131,132,130,130,131,
128,128,131,129,131,131,134,136,134,140,139,137,143,140,138,
141,136,134,132,127,126,126,123,123,118,119,122,118,120,117,
116,118,116,118,116,115,117,116,115,116,115,115,116,114,119,
113,114,116,115,116,114,114,116,116,113,117,116,114,118,112,
115,114,113,116,115,114,115,113,116,114,114,116,115,115,114,
112,114,114,113,114,115,113,117,114,115,112,114,114,113,115,
114,114,115,113,112,115,112,113,115,112,116,113,113,115,116,
113,116,113,115,113,114,115,115,114,116,114,116,113,116,117,
113,115,116,115,117,115,114,117,113,115,118,114,116,115,115,
116,114,113,116,114,117,115,114,117,115,114,115,116,116,116,
117,117,114,0],
color: '#36D39F'
}, {
name: 'Current measured spectrum',
data: numbers,
color: '#4A235A'
}]
});
});
EDIT: here's a demo showing how mine currently functions: https://jsfiddle.net/bgzgc1d9/2/. The x-axis should range from 340 to 850 with 288 data points evenly spaced on this interval

Bar Chart Highchart.JS to C3.JS

I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/

Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow

How to force Highcharts to show last label on xAxis?

It seems that in a stepped xaxis the normal "showLastLabel" doesn't work. In my case, I am displaying every tenth year only; but if I want to see in any case the latest year, it doesn't work. Here is a fiddle.
$(function () {
var chart = new Highcharts.Chart(
{
chart:
{
renderTo: "container",
type: "line"
},
title:
{
text: "Emissions of CO2 - from Fossil Fuels - Total (CDIAC)"
},
xAxis:
{
categories: ['1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010'],
labels:
{
step: 10
},
showLastLabel: true,
endOnTick: true
},
yAxis:
{
min: 0
},
series:
[ {
data: [836290,884698,947139,970623,961804,953139,937905,986489,1053841,1027857,1039329,1043832,1088357,1065419,1005220,1094115,1055965,1082764,1121897,1104068,1052479,1019684,1015786,1037513,1048350,1051961,1036999,1033773,1017926,1014450,930734,892705,878363,866267,864817,890342,862982,856064,823133,830657,854361,829449,834088,826572,807363,809521,784657,784000,732848,745994],
name: "Germany"
}]
});
});
Thanks for any hints!

http://jsfiddle.net/grg4b6xk/5/
This is the best way I could find:
chart:
{
renderTo: "container",
type: "line",
events:{
load:function(){
var ticks = $.map(this.axes[0].ticks, function(t){return t;});
ticks[ticks.length-2].render(0);
}
}
}
Add load event handler. In this event handler take ticks of axes x (axes[0] is x and axes[1] is y). ticks is an array-like object so you need to map it to an array to access it by index. The last item in that array is some tick with position -1 so the real last tick is in position before it (so it is length - 2). Then call the render function passing a number that divides by 10. I used 0. So the tick rerenders on the last position.

If you know you want data to end on 2011, then add that category:
categories: ['1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011']
Then force xAxis to display that label:
min: 0,
max: 50
And demo: http://jsfiddle.net/grg4b6xk/6/

Highcharts accepts null values, so in your case, I appended null and 2011 to their respective arrays. I'd show you the 'code' but that is literally all I did, and considering the key values are JSON code...I guess there you have it. Here's a fork of your fiddle functioning as you desired.

jQuery Flot xaxis elements number

Im trying to generate graph with jquery Flot.
This is the script Im using:
var plot = $.plot("#placeholder", [
{ data: data2, label: observation_obj.concept_name}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
},
xaxis: {
mode: "time",
timeformat: "%d.%m"
}
});
The result I'm getting is this:
http://i62.tinypic.com/25uk51z.png
My data is contains of two points, I dont know why in the x axis I see 4 points,
Can anyone help?
Thanks

The ticks on the x-axis are automatically generated so that they are evenly spaced on the axis. If you want to change that you can give flot an array of (in your case) timestamps which match the timestamps from your data (only examples here):
xaxis: {
mode: "time",
timeformat: "%d.%m",
ticks: [1383582043000, 1383682043000]
}
See the documentation for more infos / examples.