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]
]]
}
}
Related
I have a dataset that has data something like this
var data =[10,30,20,50,80,60,120,40,20,90,30,10];
var labels = [moment("12:00:00", 'HH:mm:ss'),moment("12:00:01", 'HH:mm:ss'),moment("12:00:02", 'HH:mm:ss'),moment("12:00:03", 'HH:mm:ss')];
I fed the data to chartJS like this
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
data: [10,20,30,40,50],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
hour: 'HH:mm:ss'
}
}
}]
},
}
});
However, I'm only getting data for the first four points i.e for each label.
Here's the JSFiddle
I want the data to be distributed for all the labels, in this case one data point for every (4/12)seconds and adjust the graph accordingly.
Is there any possible way I can achieve that without hardcoding it by converting the labels to milliseconds format?
I went ahead and hardcoded the entire thing by chopping seconds into milliseconds in order to create arrays of equal length
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
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
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...)
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