I have been struggling to figure out how to pass a filename variable into the $.get(....) command with highcharts. Not sure how to format the variable. Any ideas? Here is the code section with a direct input of the filename.
$(document).ready(function() {
$.get('10252017.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'area',
zoomtype: 'xy',
},
data: {
csv: csv
},
title: {
text: 'Outlook Solar Data'
},
xAxis: {
type: "datetime",
crosshair: true,
},
Related
I have a simple line chart where I am trying to display time series data which have start and end. Like this
{"beginTimeSeconds": 1626145840, "endTimeSeconds": 1626232240, "totalTimeInSeconds": 0, "uri": "/logout"}
However, as per HighChart config timeseries only accept one timestamp like this.
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: 'Test',
data: [
[1167609600000, 0.7537], // Only one timestamp
[1167696040000, 0.7537] // Only one timestamp
]
}]
});
Is there any way to pass range so that tooltip shows Start date - end date followed by value.
So by default in Highcharts, your point contains 4 main attributes which you can specify. Its x and y value, its name, and color. API reference: https://api.highcharts.com/highcharts/series.line.data
If you'd like your point to have some more attributes you can add them and e.g use one of them in the tooltip. Something like that: https://jsfiddle.net/BlackLabel/k49z8mv0/
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return 'Point value is: ' + this.y + '<br/>The total time in Second
equals: ' + this.point.totalTimeInSeconds + '<br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.point.beginTimeSeconds) + ' -
' + Highcharts.dateFormat('%Y-%m-%d', this.point.endTimeSeconds);
}
},
series: [{
type: 'line',
name: 'Test',
data: [{
x: 1167609600000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 0
},
{
x: 1167696040000,
y: 0.7537,
beginTimeSeconds: 1626145840,
endTimeSeconds: 1626232240,
totalTimeInSeconds: 1
}
]
}]
});
If that doesn't answer your question please precise what the issue is.
i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.
I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/
I want to manipulate the var series before I configure the highchart-code.
But I get 68 series!! instead of my 2 series I defined before.
What can be the error?
var series;
function refresher() {
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]";
$.getJSON(url,
function(data) {
chart = new Highcharts.StockChart
({
chart: { renderTo: 'container', zoomType: 'x', type: 'line', width: 900 },
legend: { enabled: true, verticalAlign:'bottom' },
title: { text: 'You see the data of the last measured hour!' },
credits: { enabled: false },
xAxis: { type: 'datetime', title: { text: 'time' } },
yAxis: { title: { text: 'hallo' } },
rangeSelector:{ enabled: false },
navigator : { enabled: false },
series: series,
tooltip: { xDateFormat: '%e. %b.%Y %H:%M:%S', valueDecimals: 2, },
exporting: { enabled: true },
});
// Format the y-data.
Highcharts.numberFormat(this.y, 2, '.', ',');
});
};
The problem is in the series variable.
1st of all, it's a string, and not an object.
I don't know why you are using it like that but if you really want it to be a string, you'll have to eval it when given it to the series object:
...
series: eval(series)
...
Also, it's not:
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]"
The equal signs are incorrect.
It has to be:
series = "[{ name: 'test1', data: data[0]},{ name: 'test', data: data[1]}]"
(I've replaced the equal signs by colons.)
When using a stacked colomn chart and xAxis type is datetime on the yAxis a lot of dates, although dispatched only 2 dates.
http://jsfiddle.net/jBxbe/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [[1367280000000,8],[1369872000000,26349]]
}, {
name: 'Ex2',
data: [[1367280000000,19196],[1369872000000,31213]]
},]
});
});
With such a minimal amount about data, you are probably better off using a category xaxis instead of datetime. This will give you better control on the display.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apr 2013','May 2013']
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [8,26349]
}, {
name: 'Ex2',
data: [19196,31213]
},]
});
});
Fiddle here.
You can use pointRange parameter http://api.highcharts.com/highcharts#plotOptions.column.pointRange / tickInterval (http://api.highcharts.com/highcharts#xAxis.tickInterval) two categories http://api.highcharts.com/highcharts#xAxis.categories