Develop Reference

C3.js loosing values on x-axis labels - javascript

QUESTION:
I have created a line chart using C3.js that is updating its values every 2 seconds.
To achieve this goal i use the following code.
UPDATE:
I have noticed that this is happening when i'm swapping from a tab to another of the bowser.Let's say chart is on TAB1 and i swap to TAB2 for 5 minutes, when i get back to TAB1 i have lost some label as you can see in screenshots below and time on the X-axis is 5 minutes later too...
UPDATE2
The problem is related to setInterval almost for sure.
function drawChart1()
{
var chart = c3.generate({
bindto: '#chart11',
//Size of the chart
size: {
height: 250,
width: 952
},
data: {
x: 'x',
columns: []
},
//Color of the lines
color: {
pattern: [ '#ff9896', '#9edae5']
},
axis: {
x: {
//show: false,
label: 'Time',
type: 'timeseries',
tick: {
format: '%H:%M:%S',
//format: '%H:%M',
}
},
y: {
//http://c3js.org/samples/axes_label_position.html
label: 'Kbps'
},
},
legend: {
//position: 'right'
}
});
var chartObj = {
"chart": chart,
"redrawArgs": {},
"truncThreshold": undefined
}
var date = Date.now();
var timeInc = 2000;
//Update values every x seconds
var interval = setInterval(function () {
var dataCols = [];
date = date + timeInc;
var minX = date - 10000;
var maxX = date;
var redrawArgs = chartObj.redrawArgs;
if (!chartObj.truncThreshold) {
chartObj.truncThreshold = maxX;
} else if (minX > chartObj.truncThreshold) {
redrawArgs.length = 1;
} else {
redrawArgs.length = 0;
}
chartObj.chart.axis.range({max: {x: maxX}, min: {x: minX}});
redrawArgs.duration = 0;
var TraficDown1 = 1 + Math.floor(Math.random() * 1000);
var TraficUp1 = 1 + Math.floor(Math.random() * 1000);
dataCols.push(['x', date]);
dataCols.push(['Kbps UP', TraficUp1]);
dataCols.push(['Kbps DOWN', TraficDown1])
redrawArgs.columns = dataCols;
chartObj.chart.flow(redrawArgs);
}, 2000);
}
For some time the code is working as intended:
Problem is that after some minutes I got this strange behaviour, where values are missing on x axis.
Someone can give me some hints? I'm using c3.js and D3.js v3.

found it on here https://c3js.org/reference.html#axis-x-tick-culling
axis: {
x: {
culling: false, // <-- THIS!
//show: false,
label: 'Time',
type: 'timeseries',
tick: {
format: '%H:%M:%S',
//format: '%H:%M',
}
},

Related

In the combination of series with and without dynamic data,the series with dynamic data can be easily shifted but where as the other series which are not dynamic do not get shifted out completely.
I have reproduced the issue in the following link: https://jsfiddle.net/8uxepk21/
Here as you can see there are two series. The series with static data appears to be shifting but if you increase the size of the rang-selector,then the series with static data do not get shifted out of the chart completely but still stays unlike the other series.
Is there any option to shift data explicitly without using series.addpoint() method.
I have used series.data[0].remove() and it obviously works fine but when a new data has to arrive for the same series after some time,this remove() method would remove the arriving point aswell. Further if I provide any condition for the maximum points to be in series while shifting,even then it will cause performance issue.
EXPECTED RESULT: Both the series data have to be shifted completely irrespective of the data being static or dynamic.
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series1 = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 2000);
var series2 = this.series[1];
//setInterval(function () {
//var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 50);
//series2.addPoint([x, y], true, true);
//}, 2000);
}
}
},
time: {
useUTC: false
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
states: {
hover: {
enabled: true,
animation: {duration: 100},
enableMouseTracking: true,
stickyTracking: true
}
}
}
}
},
tooltip:{
shared: true,
split: false,
stickyTracking: true,
enableMouseTracking: true,
enabled: true,
followPointer: true,
followTouchMove: true,
formatter: function(){
var tooltip = "";
var phaseNameList = "";
//tooltip += "<b>I-unit "+ "<br/>"+ "x: "+this.x +"</b>";
tooltip += "<b>I-unit "+ "<br/>"+ "x: "+ new Date(this.x)+
"</b>";
tooltip += "<br/>"+ "y: "+this.y +"</b>";
tooltip += "<br/>"+ this + "</b>";
return tooltip;
}
},
series: [{
name: 'Random data1',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -90; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
name: 'Random data2',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -90; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 50)
]);
}
return data;
}())
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>

To achieve it you can add points with null values to the second series. Check the code and demo posted below.
Code:
chart: {
events: {
load: function() {
var chart = this,
series1 = chart.series[0],
series2 = chart.series[1],
x, y;
setInterval(function() {
x = (new Date()).getTime();
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], false, true);
series2.addPoint([x, null], false, true);
chart.redraw();
}, 2000);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6vp5cbt8/

I'm using highcharts and am I trying to develop a chart, which can handle live data.
Here is my first try:
var data = [],
chart_interval = undefined;
Highcharts.setOptions({
global: {
useUTC: false
}
});
function addRandomData(dataSet, frequency, yMax, count) {
for (var i = 1; i <= count; i++) {
var x = new Date((new Date()).getTime() + i * frequency),
y = Math.random() * yMax;
dataSet.push({
x: x,
y: y
});
}
return dataSet;
}
function addDataInterval(dataSet, frequency, yMax) {
return setInterval(function() {
var x = new Date(dataSet[dataSet.length - 1].x.getTime() + frequency),
y = Math.random() * yMax;
dataSet.push({
x: x,
y: y
});
}, frequency);
}
// Parameters: dataSet, frequency, yMax, count
addRandomData(data, 1000, 10000, 60);
// Parameters: dataSet, frequency, yMax
addDataInterval(data, 500, 10000);
// Create the chart
Highcharts.stockChart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
series.update({
data: data
}, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: data
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Problem: If already existing data has different time intervals, such as the newly generated data, the freely selectable zoom don't work.
Have I somewhere make mistake or is this a bug of highcharts?

Highcharts wants time values as timestamps in milliseconds instead of Date objects:
What format does the highcharts js library accept for dates?
Highcharts X-Axis time from JS date
Change how you generate your x values, and the zooming magically starts working again:
var x = (new Date()).getTime() + i * frequency,
...
var x = dataSet[dataSet.length - 1].x + frequency,
https://jsfiddle.net/74zdsvbo/

I have a zoomable area chart and an x-axis label for every datapoint. When the chart loads, there is way too many labels, therefor I set the step option:
categoryAxis: {
name: 'CatAxis',
categories: graphLabels,
step: 30
}
But when the user zooms in, I need to decrease the amount of steps, otherwise no labels will be shown at all.
Therefor I subscribed to the zoomEnd event and calculate the desired amount of step:
function onZoomEnd(e) {
var xRange = e.axisRanges.CatAxis;
if (xRange) {
var diff = xRange.max - xRange.min;
var step = 1;
while (diff / step > 6) {
step++;
}
e.sender.setOptions({ categoryAxis: { labels: { step: step } } });
}
But setting the options here causes the chart to refresh and thereby losing its zoom level. The ultimate goal is to show a reasonable amount of labels without them overlapping or disappearing when zooming in and out. Any ideas how to achieve this?

you can maintain the zoom level of the chart using the following example from documentation
https://docs.telerik.com/kendo-ui/knowledge-base/maintain-pan-zoom-state
<button id="rebind">Rebind Chart</button>
<div id="chart"></div>
<script>
// Sample data
var data = [];
for (var i = 0; i < 100; i++) {
var val = Math.round(Math.random() * 10);
data.push({
category: "C" + i,
value: val
});
}
function createChart() {
var axisMin = 0;
var axisMax = 10;
function updateRange(e) {
var axis = e.sender.getAxis('axis')
var range = axis.range()
axisMin = range.min;
axisMax = range.max;
}
function restoreRange(e) {
e.sender.options.categoryAxis.min = axisMin;
e.sender.options.categoryAxis.max = axisMax;
}
$("#chart").kendoChart({
renderAs: "canvas",
dataSource: {
data: data
},
categoryAxis: {
name: "axis",
min: axisMin,
max: axisMax,
labels: {
rotation: "auto"
}
},
series: [{
type: "column",
field: "value",
categoryField: "category"
}],
pannable: {
lock: "y"
},
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
},
zoom: updateRange,
drag: updateRange,
dataBound: restoreRange
});
}
$("#rebind").click(function() {
$("#chart").data("kendoChart").dataSource.read();
});
$(document).ready(createChart);
</script>

I am trying to chart 1000 meters run, data is given via mySQL Database and brings MeterTime and urDate. urDate is on the x-axis and y-axis should hold seconds. But the chart either plots nothing at all, or everything on the zero line.
I understand I need to change how the charts interprets the time, but only the minutes, seconds and milliseconds are provided. Not sure how I can convert it.
Any anyone see on the jsfiddle and check what i might be doing wrong please?
jsfiddle
var chart;
var data = [{"urDate":"2015-03-04","urTime":"00:02:05","MeterTime":"00:15:534250"},{"urDate":"2015-03-06","urTime":"00:02:25","MeterTime":"00:18:019730"}];
var options = {
chart: {
backgroundColor: '#34495e',
plotBackgroundColor: '#2b3c50',
renderTo: 'container',
type: 'line'
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
name: 'Time'
},
type: 'datetime',
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: []
};
var dataXAxis = [],
dataSeries = [{
data: []
}];
data.forEach(function (va) {
dataXAxis.push(formatDate(va.urDate));
dataSeries[0].data.push(formatDate(va.MeterTime));
});
// And assign the correct format to highcharts
options.xAxis.categories = dataXAxis;
options.series = dataSeries;
// create the first chart
chart = new Highcharts.Chart(options);
function formatDate(d) {
d = new Date(d);
var month = d.getMonth();
var day = d.getDate();
month = month + 1;
month = month + "";
if (month.length == 1)
{
month = "0" + month;
}
day = day + "";
if (day.length == 1)
{
day = "0" + day;
}
return (day + '-' + month + '-' + d.getFullYear());
}
UPDATE
I have changed the jsfiddle to include how the data is now loaded from the mySQL query. Thanks to One, below, who gave me the idea to change how the data came in, rather than changing it once it arrived.
New Code looks like this:
var options = {
chart: {
backgroundColor: '#34495e',
plotBackgroundColor: '#2b3c50',
renderTo: 'container',
type: 'line'
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
name: 'Seconds'
},
//type: 'datatime', //y-axis will be in milliseconds
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: []
};
var dataXAxis = [], dataSeries = [{data: []}];
data.forEach(function (va) {
dataXAxis.push(formatDate(va.urDate));
console.log('t ' + va.MeterTime);
dataSeries[0].data.push(parseInt(va.MeterTime));
})
// And assign the correct format to highcharts
options.xAxis.categories = dataXAxis;
options.series = dataSeries;
options.yAxis.title.text = 'Seconds';
// create the first chart
chart = new Highcharts.Chart(options);
});
The main difference is how the data comes in:
[{"urDate":"2015-03-04","MeterTime":"15.5343"},{"urDate":"2015-03-06","MeterTime":"18.0197"}]
This comes from a mySQL Query that looks like this:
$isql = "SELECT urDate, time_to_sec(urTime) / (urMiles / 0.00062137) * 1000 AS MeterTime FROM results WHERE uid = " . $_POST['uid'] . " ORDER BY urDate ASC;";
$ires = $mysqli->query($isql);
while ($irow = $ires->fetch_array(MYSQLI_ASSOC)) {
$data_result['userChart'][] = $irow;
}
echo json_encode($data_result);
And the end result, apart from some better styling, is this:
Hope this helps others in the future.

Plotted millisecond as Y axis.
http://jsfiddle.net/kjjn6tn3/3/
secondd = _.map(data , function (v) {return _.reduce(_.map(_.zip(_.map(v['urTime'].split(":"), function(v) {return parseInt(v);}), [60*60,60,1]), function (value , key) {return value[0]*value[1];}), function (x ,y ){ return x+y;})});
dataY = {
name :"pump",
data : secondd
}
same you can do with meter time and plot as Y axis.

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