Develop Reference

Geo Chart hover

function drawGeoChart(scope) {
var data5 = new google.visualization.DataTable();
data5.addColumn('number', 'Latitude');
data5.addColumn('number', 'Longitude');
data5.addColumn('number', 'CountryID');
data5.addColumn('string', 'CountryName');
data5.addColumn('number', 'ColorCode');
data5.addColumn('number', 'MeetingCount');
data5.addColumn({ 'type': 'string', 'lable': 'Sentence', 'role': 'tooltip', 'p': { 'html': true } });
scope.InteractiveGraphs = vdsServices.getPreference().InteractiveGraphs;
var options = {
tooltip: { trigger: 'focus', textStyle: { fontName: attrs.tooltipfontname, fontSize: attrs.tooltipfontsize }, isHtml: true, showTitle: false },
sizeAxis: { minValue: 0, maxValue: scope.data.totalMeetings },
magnifyingGlass: { enable: true, zoomFactor: 5.0 },
legend: 'none',
enableRegionInteractivity: 'false',
keepAspectRatio: 'true',
// height: 400,
displayMode: 'markers',
width: '100%',
backgroundColor: attrs.backgroundcolor,
height: '100%',
//backgroundColor: {fill : '#F9F9F9', strokeWidth : 1},
//backgroundColor.strokeWidth
//datalessRegionColor: '#dddddd' ,
datalessRegionColor: '#ffffff',
colorAxis: { colors: colorCode, values: [1, 2, 3, 4, 5, 6] },
// isStacked: true
};
var view5 = new google.visualization.DataView(data5);
view5.hideColumns([2]);
angular.forEach(scope.data.data, function (value) {
data5.addRows([[parseInt(value.Latitude), parseInt(value.Longitude), parseInt(value.CountryId), value.CountryName, value.ColorCode, parseInt(value.MeetingCount), value.CountryName + ' | '.concat(format(value.MeetingCount)) + (value.MeetingCount > 1 ? vdsServices.getPreferLanguageProperties().MeetingsLabel : vdsServices.getPreferLanguageProperties().MeetingLabel)]]);
});
var chart = new google.visualization.GeoChart(document.getElementById('geoChartDiv'));
google.visualization.events.addListener(chart, 'ready', function () {
if(scope.InteractiveGraphs == true)
{
document.getElementById('geoChartDiv').addEventListener('mouseover',onmouseoverHandler);
google.visualization.events.addListener(chart, 'select', function() {
chartObject = chart;
var selection = chartObject.getSelection();
if (selection.length) {
graphSelectLoadMeeting(data5, selection);
$('.selectedMarketGraphList').css('display', 'block');
}
else {
// do something if the user deselects a point
// alert('deselected');
// showHideMeetingList(scope.$parent,"MeetingMarket_list","expandCollapseMarket_list",1);
// scope.$parent.$parent.getMeetingList();
// jQuery('#list').jqGrid('setGridParam', {page : 1,postData : {MeetingTypeList: '',CountryList: '',VotedList : '' }, MeetingTypeList: '',CountryList: '',VotedList : ''});
// jQuery("#list").trigger("reloadGrid");
// $("#meetingDisplayGrid").show('500');
}
});
}
});
chart.draw(view5, options);
//location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
}
function onmouseoverHandler() {
$("#geoChartDiv g circle").hover(function() {
$(this).css('cursor', 'pointer')
});
}
drawGeoChart(scope);
setTimeout(function() {
$('#geoChartDiv').html('');
$('#geoChartDiv').parent().width('100%');
var widthSvg = $('#geoChartLegend svg')[0].getBBox().width;
$('#geoChartLegend').width(widthSvg);
drawGeoChart(scope);
}, 500);
Here actually this code is made to get circle in google point and now I decided to make the whole region get color so for that i removed "displayMode: 'markers'," under var options and along with that I removed latitude, longitude and country id columns and rows from data5 datatable and now i am able to see the whole region get the color but once I hover over that i am unable to get the desirable output in way that is mentioned in data5.column(basically tooltip is not coming) which i used to get when display mode is in markers. Please help me how to get displayed once I hover for this region data map. I am new to javascript.

One or more participants failed to draw() + Cannot read property 'Do' of undefined

This is a Google chart that I worked with by importing data with ajax. The chart that was working fine suddenly pops up and doesn't work.
What should I do to solve it? Below is the source I worked on.
One or more participants failed to draw() Cannot read property 'Do' of undefined
Errors occur at the same time
What can be done to solve it?
code
var chartDrowFun = {
chartDrow : function(){
var app_tot = new Array();
var app_mode = $('#app_mode').val();
// console.log(month);
$.ajax({
type : "POST",
url : "app/test.php",
async : false,
data : {'year' : year, 'month' : month, 'app_mode' : app_mode},
dataType: "json",
success : function(response) {
// console.log(response);
app_tot = response;
var and_c = app_tot["and_c"];
var ios_c = app_tot["ios_c"];
// console.log(jhs[0]['and_c']);
}
});
// console.log(app_tot);
var chartData = '';
//날짜형식 변경하고 싶으시면 이 부분 수정하세요.
var chartDateformat = 'yyyy년MM월dd일';
//라인차트의 라인 수
var chartLineCount = app_tot.length;
//컨트롤러 바 차트의 라인 수
var controlLineCount = 0;
function drawDashboard() {
var data = new google.visualization.DataTable();
//그래프에 표시할 컬럼 추가
data.addColumn('datetime' , '날짜');
data.addColumn('number' , 'IOS');
data.addColumn('number' , 'ANDROID');
data.addColumn('number' , '전체');
//그래프에 표시할 데이터
var dataRow = [];
for(var i = 0; i < app_tot.length; i++){ //랜덤 데이터 생성
// console.log(jhs[i]['ios_c']);
var ios = getNum(parseFloat(app_tot[i]['ios_c']));
var and = getNum(parseFloat(app_tot[i]['and_c']));
var total = getNum(ios + and);
console.log(and);
dataRow = [new Date(year, month-1, i+1, 0 ), ios, and , total];
data.addRow(dataRow);
}
var chart = new google.visualization.ChartWrapper({
chartType : 'LineChart',
containerId : 'lineChartArea', //라인 차트 생성할 영역
options : {
isStacked : 'percent',
focusTarget : 'category',
height : 500,
width : '100%',
legend : { position: "top", textStyle: {fontSize: 13}},
pointSize : 5,
tooltip : {textStyle : {fontSize:12}, showColorCode : true,trigger: 'both'},
hAxis : {format: chartDateformat, gridlines:{count:chartLineCount,units: {
years : {format: ['yyyy년']},
months: {format: ['MM월']},
days : {format: ['dd일']},
hours : {format: ['HH시']}}
},textStyle: {fontSize:12}},
vAxis : {minValue: 10,viewWindow:{min:0},gridlines:{count:-1},textStyle:{fontSize:12}},
animation : {startup: true,duration: 1000,easing: 'in' },
annotations : {pattern: chartDateformat,
textStyle: {
fontSize: 15,
bold: true,
italic: true,
color: '#871b47',
auraColor: '#d799ae',
opacity: 0.8,
pattern: chartDateformat
}
}
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'controlsArea', //control bar를 생성할 영역
options: {
ui:{
chartType: 'LineChart',
chartOptions: {
chartArea: {'width': '60%','height' : 80},
hAxis: {'baselineColor': 'none', format: chartDateformat, textStyle: {fontSize:12},
gridlines:{count:controlLineCount,units: {
years : {format: ['yyyy년']},
months: {format: ['MM월']},
days : {format: ['dd일']},
hours : {format: ['HH시']}}
}}
}
},
filterColumnIndex: 0
}
});
var date_formatter = new google.visualization.DateFormat({ pattern: chartDateformat});
date_formatter.format(data, 0);
var dashboard = new google.visualization.Dashboard(document.getElementById('Line_Controls_Chart'));
window.addEventListener('resize', function() { dashboard.draw(data); }, false); //화면 크기에 따라 그래프 크기 변경
dashboard.bind([control], [chart]);
dashboard.draw(data);
}
google.charts.setOnLoadCallback(drawDashboard);
}
}
$(document).ready(function(){
google.charts.load('current', {'packages':['line','controls']});
chartDrowFun.chartDrow(); //chartDrow() 실행
});

CSV file not reloading (Google GeoCharts)

I am loading csv file using https://github.com/evanplaice/jquery-csv. Everything works okay until I try to reload the .csv file and load new data into GeoCharts. I know its a problem with reloading the file but how to deal with it? Here is the example code:
function load(file, colorForSex){
var region = $('select[name="region"] option:selected').val();
setTimeout(1000);
$.get(file, function(data) {
var newData = $.csv.toArrays(data);
var j = 1;
for (var i = 1; i < newData.length; i++) {
newData[i][j] = parseFloat(newData[i][j]);
}
}, 'text');
console.log(newData[1][1]);
setTimeout(1000);
var data = google.visualization.arrayToDataTable(newData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd', colorForSex]},
datalessRegionColor: 'white',
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Verdana',
color: '#ff1a1a',
fontSize: 14
}
}
};
setTimeout(1000);
chart.draw(data, options);
}

need to include the rest of the chart code in the $.get function
$.get is asynchronous
as such, the code after the $.get function runs before the $.get function finishes
see following snippet...
function loadData(file, colorForSex){
var region = $('select[name="region"] option:selected').val();
var file = file + '?q=' + Math.random();
$.get(file, function(data) {
var processedData = $.csv.toArrays(data);
var j = 1;
for (var i = 1; i < processedData.length; i++) {
processedData[i][j] = parseFloat(processedData[i][j]);
}
var data = google.visualization.arrayToDataTable(processedData);
var options = {
region: region,
backgroundColor: 'none',
chartArea: { width: '100%', height: '100%' },
colorAxis: {colors: ['#ddd', colorForSex]},
datalessRegionColor: 'white',
legend: {
numberFormat: '.##',
textStyle: {
fontName: 'Verdana',
color: '#ff1a1a',
fontSize: 14
}
}
};
chart.draw(data, options);
}, 'text');
}

You can just add to file some parameter to cache disable
replace:
$.get(file, function(data) {
to:
var d = new Date();
$.get(file + '?' + d.getTime(), function(data) {

Two different google charts on one page

I initially had a columnchart on page1 and a linechart on page2. They both display fine when on their own page. When I try combine the two on one page, they both display but they both are columncharts. I'm not sure what I am doing wrong. This is my code so far:
google.load('visualization', '1.0', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);
function drawchart() {
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Arm');
chartData.addColumn('number', 'Weight');
for (var i = 0; i < chartdatax.length; i++) {
chartData.addRow([parseFloat(chartdatax[i]),
parseFloat(chartdatay[i])]);
};
var options = {
height: 500,
hAxis: {
title: 'Arm C.G',
gridlines: {
count: 10
}
},
vAxis: {
title: 'Weight',
gridlines: {
count: 10
}
},
chartArea: {top:40, width: "70%", height: "75%"},
animation:{
duration: 1000,
easing: 'out',
startup: true,
},
legend: { position: 'none' },
pointSize: 5
};
myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));
myLineChart.draw(chartData, options);
}
function drawchart2(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
if (status !== google.maps.ElevationStatus.OK) {
// Show the error code inside the chartDiv.
chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
status;
return;
}
var chart = new google.visualization.ColumnChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < elevations.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
chart.draw(data, {
height: 200,
legend: 'none',
titleY: 'Elevation (m)'
});
}

The code you have looks like it should work...
Would need to see where drawchart2 is called, the HTML elements, and any other code to be sure...
In this example, I add callback function drawcharts to start drawing...
google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawcharts});
function drawcharts() {
drawchart();
drawchart2();
}
function drawchart() {
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Arm');
chartData.addColumn('number', 'Weight');
for (var i = 0; i < 10; i++) {
chartData.addRow([
parseFloat(i),
parseFloat(i * 1.5)
]);
};
var options = {
height: 500,
hAxis: {
title: 'Arm C.G',
gridlines: {
count: 10
}
},
vAxis: {
title: 'Weight',
gridlines: {
count: 10
}
},
chartArea: {top:40, width: "70%", height: "75%"},
animation:{
duration: 1000,
easing: 'out',
startup: true,
},
legend: {position: 'none'},
pointSize: 5
};
myLineChart = new google.visualization.LineChart(document.getElementById('chart1'));
myLineChart.draw(chartData, options);
}
function drawchart2(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
var chart = new google.visualization.ColumnChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < 10; i++) {
data.addRow([
'',
i * 100
]);
}
chart.draw(data, {
height: 200,
legend: 'none',
titleY: 'Elevation (m)'
});
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart1"></div>
<div id="elevation_chart"></div>

Create Line in Highcharts with start and end point

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