Develop Reference

not able ot show date in x axis in highcharts - javascript

i want to show date in x asis but not able to show. showing values like this 00.00.00.100 in the graph.unable to convert 1577844000000 to proper date,month,year in javascript to show in the x axis using dateTimeLabelFormats in highcharts.how to use ticks and how to show it in graphs.
ticks values are printing in the console like this.
sample tick data
1577844000000
1577843100000
1577842200000
1577841300000
15778404000
sample data from the response
DeviceTimeStamp: "2020-01-10T00:30:00"
code
getalldata();
function getalldata() {
var xhttp_roomlogs = new XMLHttpRequest();
xhttp_roomlogs.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(xhttp_roomlogs.responseText);
var Ch1Temp = [];
var Ch2Temp = [];
$(response).each(function (i, item) {
var date = UtcToIst(item.DeviceTimeStamp);
var ticks = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
Ch1Temp.push([ticks, item.Ch1Temp])
Ch2Temp.push([ticks, item.Ch2Temp])//
});
$('#container').empty();
var labels = response.map(function (e) {
var roomtempdata = e.Ch1Temp;
return parseFloat(roomtempdata);
})
var ch2temp = response.map(function (e) {
var roomtempdata = e.Ch2Temp;
return parseFloat(roomtempdata);
})
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: 'Chamber 1 & 2 Temp'
},
subtitle: {
text: 'in Degree Celcius'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Temperature'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
//y co-ordinates
series: [{
name: 'Chamber 1 Temp',
data: labels
},
{
name: 'Chamber 2 Temp',
data: ch2temp
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
//highcharts end
}
};
xhttp_roomlogs.open("GET", "/api/data", true);
xhttp_roomlogs.send();
}
function UtcToIst(data) {
var dt = new Date(data);
return dt;
}

You can convert the json date using:
var jsonDate = "\/Date(1577844000000)\/".substr(6);
var dateObject = new Date(parseInt(jsonDate ));
var stringDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
console.log("Dat Object:" + dateObject);
console.log("String Date:" + stringDate);
sample hightchart code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['1/1/2020', '1/2/2020', '1/3/2020', '1/4/2020', '1/5/2020']
},
plotOptions: {
column: {
stacking: 'normal'
}
},
legend: {
labelFormatter: function () {
if(this.data.length > 0) {
return this.data[0].category;
} else {
return this.name;
}
}
},
series: [{
data: [{x:0,y:1}],
name: '1/1/2020'
},{
data: [{x:1,y:1}],
name: '1/2/2020'
},{
data: [{x:2,y:1}],
name: '1/3/2020'
},{
data: [{x:3,y:1}],
name: '1/4/2020'
},{
data: [{x:4,y:1}],
name: '1/5/2020'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

Related

I tried to make a graph between two variables instead of graphinh time but I couldn't. So I want to know I this is available by the way?
var chartT = new Highcharts.Chart({
chart: { renderTo: "chart-temperature" },
title: { text: "DHT22 Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
series: { color: "#059e8a" },
},
xAxis: { type: "datetime", dateTimeLabelFormats: { second: "%H:%M:%S" } },
yAxis: {
title: { text: "Temperature (Celsius)" },
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false },
});
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if (chartT.series[0].data.length > 40) {
chartT.series[0].addPoint([x, y], true, true, true);
} else {
chartT.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 30000);
var chartH = new Highcharts.Chart({
chart: { renderTo: "chart-humidity" },
title: { text: "DHT22 Humidity" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: { second: "%H:%M:%S" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if (chartH.series[0].data.length > 40) {
chartH.series[0].addPoint([x, y], true, true, true);
} else {
chartH.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 30000);
I wanted to make a graph between humidity on y axis and temperature on x axis. I tried changing the x variable ,of the humidity chart, to be like the y variable ,of the temperature chart, but the chart of the humidity didn't work.

You have to synchronize the received data from the two API requests. Here's a solution that records partial data (either temperature or humidity) - pending array and identifies corresponding requests by registering the time of the requested - tRequest.
This may be a starting point for your more elaborate solution. Please let me know if this is not exactly what you wanted.
The data is simulated (random points) as I don't have access to your API, but there are real XMLHttpRequests (to highcharts on cdn).
The same in this fiddle
var chartT = new Highcharts.Chart({
chart: { renderTo: "chart-temperature" },
title: { text: "DHT22 Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
series: { color: "#059e8a" },
},
xAxis: { type: "datetime", dateTimeLabelFormats: { second: "%H:%M:%S" } },
yAxis: {
title: { text: "Temperature (Celsius)" },
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false },
});
var chartH = new Highcharts.Chart({
chart: { renderTo: "chart-humidity" },
title: { text: "DHT22 Humidity" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: { second: "%H:%M:%S" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});
var chartTH = new Highcharts.Chart({
chart: { renderTo: "chart-temperature-humidity", type: "scatter" },
title: { text: "DHT22 Humidity vs Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
//line: { animation: false, dataLabels: { enabled: true } },
scatter: {marker: {fillColor: '#ce4a05'}}
},
xAxis: {
title: { text: "Temperature (Celsius)" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});
function requestTemperature(whenReceived) { // whenReceived is a handler to be called when a data point was received
var tRequest = new Date().getTime();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = Math.floor(Math.random()*100)/4;//parseFloat(this.responseText);
whenReceived(x, y, tRequest);
}
};
xhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js", true);
xhttp.send();
}
function requestHumidity(whenReceived) {
var tRequest = new Date().getTime();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = Math.floor(100+Math.random()*250)/4;//parseFloat(this.responseText);
whenReceived(x, y, tRequest);
}
};
xhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js", true);
xhttp.send();
}
function addToChart(chart, [x, y]){
if (chart.series[0].data.length > 40) {
chart.series[0].addPoint([x, y], true, true, true);
} else {
chart.series[0].addPoint([x, y], true, false, true);
}
}
var pending = []; // pending array will contain values received for only one of the variables
function afterTemperatureReceived(x, y, tRequest){
addToChart(chartT, [x, y]);
var humidityReceived = pending.findIndex(o => Math.abs(o.tRequest - tRequest) < 100);
if(humidityReceived >= 0){ // a humidity value was received with a call time very close to this
var H = pending.splice(humidityReceived, 1)[0].H; // delete from pending and retain H value
addToChart(chartTH, [y, H]); // current y is temp, the first (x) coordinate of chartTH
}
else{ // humidity not yet received
// add temperature to pending, waiting for its humidity to be received
pending.push({T: y, tRequest});
}
}
function afterHumidityReceived(x, y, tRequest){
addToChart(chartH, [x, y]);
var temperatureReceived = pending.findIndex(o => Math.abs(o.tRequest - tRequest) < 100);
if(temperatureReceived >= 0){ // a temperature value was received with a call time very close to this
var T = pending.splice(temperatureReceived, 1)[0].T; // delete from pending and retain T value
addToChart(chartTH, [T, y]); // current y is humidity, the second (y) coordinate of chartTH
}
else{ // temperature not yet received
// add humidity to pending, waiting for its humidity to be received
pending.push({H: y, tRequest});
}
}
function mainTick(){
requestTemperature(afterTemperatureReceived);
requestHumidity(afterHumidityReceived);
}
mainTick();
setInterval(mainTick, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="chart-temperature" style="height:20vh;min-height:350px"></div>
<div id="chart-humidity" style="height:20vh;min-height:350px"></div>
<div id="chart-temperature-humidity" style="height:20vh;min-height:350px"></div>

I have an API at https://gmlews.com/api/data. And my code for highstock charts in http://jsfiddle.net/estri012/b5nhezLs/8/ .
My problem is my timestamp look like this "2020-03-15T11:46:10+07:00". So on the chart it should shows 15 March 11:46 instead of 15 March 04:46. But the chart show UTC time. How to fix it, so the chart show the local same time with mine? And the last three data on the chart show 18 March instead of 19 March. In my API, the last three data must be 19 March not 18 March.
$(function () {
$.getJSON('https://gmlews.com/api/data', function (data) {
console.log(data);
function format_two_digits(n) {
return n < 10 ? '0' + n : n;
}
var accelero_x = [], timestamp = [];
for (var i=0; i<data.length; i++){
let inArr = [];
inArr.push(Date.parse(data[i].timestamp));
inArr.push(data[i].accelero_x);
accelero_x.push(inArr);
timestamp.push(data[i].timestamp);
}
console.log(accelero_x);
console.log(timestamp);
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
inputEnabled: true,
buttons: [{
type: 'day',
count: 1,
text: '1D',
},
{
type: 'week',
count: 1,
text: '1W',
},
{
type: 'month',
count: 1,
text: '1M',
},
{
type: 'year',
count: 1,
text: '1Y',
}, {
type: 'all',
count: 1,
text: 'All',
}],
inputDateFormat: '%d-%m-%Y',
inputDateParser: function (value) {
value = value.split('-');
return Date.UTC(
parseInt(value[2]),
parseInt(value[1]) - 1,
parseInt(value[0])
);
},
},
title: {
text: 'Accelero X'
},
xAxis: {
type: "datetime",
labels: {
/* format: '{value:%Y-%m-%d}', */
formatter: (currData) => {
const currDate = new Date(currData.value);
return format_two_digits(currDate.getHours()) + ':' + format_two_digits(currDate.getMinutes());
},
rotation: 45,
align: 'left'
}
},
series: [{
name: 'Accelero X',
data: accelero_x,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker();
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy',
beforeShow: function() {
var date = $(this).val().split('-');
$('input.highcharts-range-selector').datepicker("setDate", new Date(parseFloat(date[0]), parseFloat(date[1]) - 1, parseFloat(date[2])));
},
onSelect: function (dateText) {
this.onchange();
this.onblur();
}
});
});

Try to set time.useUTC to false - https://api.highcharts.com/highcharts/time.useUTC
Demo: http://jsfiddle.net/BlackLabel/avhw7km8/
time: {
useUTC: false
},

Not sure why because I have done it in the past, but I have a Highcharts bar chart and it won't animate. This is the declaration of the chart,
function initializeData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push({
name: setName($scope.jsondata[x].name),
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 5000);
}
function updateData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
console.debug("here");
for (x = 0; x < 5; x++) {
$scope.chart.series[0].data[x].update({
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '11px'
}
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Total Score',
align: 'high'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Total Score <b>{point.y:.3f}</b>'
},
series: [{
name: 'Active Users',
data: [],
dataLabels: {
enabled: true,
rotation: 30,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
format: '{point.y:.3f}', // one decimal
}
}]
});
And as you can see I have animate : true, so I am not sure what is the problem here. I have this older plunker where all of the data is in separate series, but it animates fine. But this is the plunker I am working on and having trouble with. They are like identical basically. In the newer one I broke out the initialization of data into its own method, but that is the only real main difference.
Some edits:
So as I was saying, I have done things this way with an areaspline chart (I know it was said they work a bit different but they are set up identically).
function initializeData() {
$interval.cancel(mainInterval);
$scope.previousPackets = '';
$http.get("https://api.myjson.com/bins/nodx").success(function(returnedData) {
var newdata = [];
var x = (new Date()).getTime();
for (var step = 9; step >= 0; step--) {
newdata.push([x - 1000 * step, 0]);
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 2000);
}
function updateData() {
$http.get(url + acronym + '/latest').success(function(returnedData) {
var x = (new Date()).getTime();
if ($scope.previousPackets != returnedData[0].numPackets) {
$scope.chart.series[0].addPoint([x, returnedData[0].numPackets], true, true);
$scope.previousPackets = returnedData[0].numPackets;
} else {
$scope.chart.series[0].addPoint([x, 0], true, true);
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Packets'
},
plotLines: [{
value: 0,
width: 1,
color: '#d9534f'
}]
},
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Packets',
data: []
}]
});
I also updated the first chunk of code with the initializeData() method and updateData() method which are seemingly identical in both different charts.

It looks like it plays an important role if you provide your data at chart initialization or after. For simplicity I refactored your code a little
function initializeChart(initialData, onload) {
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: onload
}
....
series: [{
name: 'Active Users',
data: initialData,
dataLabels: {
enabled: true,
format: '{point.y:.3f}', // one decimal
}
}]
});
}
function getData(callback) {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push([setName(ret[x].name), ret[x].data]);
}
callback(newdata);
});
}
As a result your two planks are in essense reduced to two methods below. The first initializes chart with preloaded data and the second updates data in existing chart.
function readDataFirst() {
getData(function(newdata) {
initializeChart(newdata);
});
}
function initializeChartFirst() {
initializeChart([], function() {
getData(function(newdata) {
$scope.chart.series[0].setData(newdata);
})
});
}
The first one animates fine while the second does not. It looks like highcharts skips animation if dataset is not initial and is treated incompatible.
However if you really want to have animation in your current plant (chart first workflow) you can achieve that by initializing first serie with zeros and then with the real data. This case it will be treated as update
function forceAnimationByDoubleInitialization() {
getData(function(newdata) {
initializeChart([]);
var zerodata = newdata.map(function(item) {
return [item[0], 0]
});
$scope.chart.series[0].setData(zerodata);
$scope.chart.series[0].setData(newdata);
});
All these options are available at http://plnkr.co/edit/pZhBJoV7PmjDNRNOj2Uc

The code of my graph is this (take data from a php page and then adds some series):
$('#grafico_1').highcharts({
chart: {
type: 'line',
zoomType: 'xy',
animation : false,
events: {
selection: function(event) {
if(event.resetSelection){
setTimeout(function(e){
var chart = $('#grafico_1').highcharts();
var extreme = chart.yAxis[0].getExtremes();
var mio_min = parseFloat(proprieta_temperatura_aperto[34]);
var mio_max = parseFloat(proprieta_temperatura_aperto[35]);
if(extreme.dataMin < mio_min){
mio_min = extreme.dataMin;
}
if(extreme.dataMax > mio_max){
mio_max = extreme.dataMax;
}
chart.yAxis[0].setExtremes(mio_min,mio_max);
$("#temperatura_min_max_rilevato").html("Min "+extreme.dataMin+"°C - Max "+extreme.dataMax+"°C");
//console.log("zoom - ");
}, 10);
}else{
setTimeout(function(e){
var chart = $('#grafico_1').highcharts();
var extreme = chart.yAxis[0].getExtremes();
$("#temperatura_min_max_rilevato").html("Min "+extreme.dataMin+"°C - Max "+extreme.dataMax+"°C");
//console.log("zoom + "+JSON.stringify(extreme));
}, 50);
}
}
},
},
credits : {
enabled : false
},
title: {
text: 'Grafico di Oggi'
},
xAxis: {
type: 'datetime',
title: {
text: false
}
},
yAxis: [
{
title: {
text: false
},
labels: {
format: '{value}°C',
},
//ceiling : parseFloat(proprieta_temperatura_aperto[35]),
//floor: parseFloat(proprieta_temperatura_aperto[34]),
max : parseFloat(proprieta_temperatura_aperto[35]),
min: parseFloat(proprieta_temperatura_aperto[34]),
},
{
title: {
text: false
},
min: 0,
max : 1,
ceiling:1,
floor : 0,
//tickLength : 1,
opposite: true,
tickInterval: 1,
labels: {
formatter: function() {
if (this.value == 0 || this.value == 1){
return this.value;
}else{
return null;
}
}
}
}
],
tooltip: {
formatter: function() {
var s = '<b>Data</b> '+Highcharts.dateFormat('%H:%M:%S', this.x) + '<br><b>Temperatura</b> ' + this.y + '°C<br/>';
$.each(this.points, function(i, point) {
if(point.series.name != "Temperatura"){
s += '<b>' + point.series.name +'</b> : '+ point.y + '<br>';
}
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
plotOptions: {
line : {
turboThreshold: 0,
},
series: {
animation: false,
marker: {
enabled: false
}
}
},
series: []
});
the problem occurs when run one (or more) zoom on the graphs , and on the y-axis the values ​​are listed with more than two decimal places. I would like to limit to two the maximum number of decimal places.
I think i have to change this field (format)
yAxis: [
{
labels: {
format: '{value}°C',
},
but I do not know how.

Try to write the value as {value:.2f}, as proposed here: link

Please look at following example:
<script type="text/javascript">
var $j = jQuery.noConflict();
function recalculateUTCValue(startingUTC, add) {
zeit = new Date(startingUTC);
zeit.setDate(zeit.getDate()+add);
return zeit;
}
function calcDateFromUTC(utc) {
d = new Date(utc);
return d;
}
function getDaysUntilEnd(utc) {
var currentTime = new Date();
var endTime = calcDateFromUTC(utc);
var diff = Math.floor(( Date.parse(endTime) - Date.parse(currentTime) ) / 86400000);
return diff;
}
</script>
<script type="text/javascript">
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
var TaskChart; // Chart-Objekt
var container = $j('#chart01')[0];
var TaskDuration = new Array();
var startingKW = 298;
// Save starting points to javascript variables for HighCharts
var startingUTC = 1288087223364;
// For a given time point id
var startTimePoint = 0;
var endTimePoint = 0;
TaskDuration = [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,216.0,216.0,216.0,198.0,134.0,134.0,134.0,171.0,171.0,171.0,149.0,160.5,160.5,160.5];
// Get first value which is not "0"
var firstValue = 0;
for(var i = 0; i < TaskDuration.length; i++) {
if(TaskDuration[i] != 0) {
firstValue = i;
break;
}
}
// Get largest Y-Value; need for automatically zooming (setExtremes method)
var largest = Math.max.apply(Math, TaskDuration);
var myStartDate;
var myEndDate;
// Check if we have a time point in the query
if(startTimePoint != 0) {
var myStartDate = calcDateFromUTC(startTimePoint);
var myEndDate = calcDateFromUTC(endTimePoint);
} else {
// Otherwise we use the time of first created work item
var myStartDate = recalculateUTCValue(startingUTC, firstValue);
var myEndDate = new Date();
}
</script>
<script type="text/javascript">
$j(document).ready(function() {
TaskChart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
renderTo: "chart01",
defaultSeriesType: 'line',
zoomType: 'x',
events: {
load: function(event) {
this.xAxis[0].setExtremes(myStartDate, myEndDate);
this.yAxis[0].setExtremes(0,largest);
}
}
},
title: {
text: "Task Burn Down Chart"
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
week: '%e. %b %Y'
},
labels: {
align: 'right',
rotation: -60,
x: 5,
y: 15
},
offset: 10
},
yAxis: {
title: {
text: "Number of Hours"
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>' + Highcharts.dateFormat('%d.%m', this.x) +': '+ this.y;;
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [
{
name: 'Hours',
pointStart: startingUTC,
pointInterval: 24*60*60*1000,
data: TaskDuration
},
{
type: 'line',
name: 'Regression Line',
data: [[myStartDate, 216], [myEndDate, 50]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}]
});
});
</script>
http://jsfiddle.net/JwmuT/8/
The goal is to create a Highchart line with starting point from X-Value 26th January and with the end point on the X-Value 7th February. Corresponding Y-Values are "260" and "0".
How to create a simple line with these to points in HighCharts? Maybe Highcharts is able to do a linear regression on the fly?!
I have found this demo but I do not know how to pass correctly X-Values in the Date format.

Highcharts doesn't calculate any type of regression or trend lines. In example you have posted, data is calculated before, and Highcharts just displays that. However there is known plugin for trendline: https://github.com/virtualstaticvoid/highcharts_trendline