Connect points from two different series with an vertical line (DevExtreme chart) - charts

Question

I've got follow chart, wich I made with DevExtreme charts:
// Add your javascript here
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.value + " mmHg"
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
export: {
enabled: true,
printingEnabled: true
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
name: "Blutdruck systolisch",
type: "scatter",
valueField: "sys",
axis: "sysAxe",
point: {
color: "black",
symbol: "triangleDown"
}
}, {
name: "Blutdruck diastolisch",
type: "scatter",
valueField: "dia",
axis: "diaAxe",
point: {
color: "black",
symbol: "triangleUp"
}
}],
valueAxis: [{
name: "sysAxe",
title: "Blutdruck systolisch",
position: "left",
max: 170,
min: 140,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}, {
name: "diaAxe",
title: "Blutdruck diastolisch",
position: "left",
max: 99,
min: 90,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%; height: 440px"></div>
I've got two different y-axis (systolic and diastolic blood pressure) with two different ranges (sys= 140-170 and dia= 90-99). When you measure the blood pressure of a human, you have to place the systolic value in one scale and the diastolic value in a second. This are two different values but they are still together. And the medical persons must see this, with a vertical connection between the two values something like this:
So they can see fast enough which measured blood pressure values are together and what is the value of each. For us "normal" users this is a little bit confusing, but for the medical persons, doctor and the healthcare it's simply logical. So this is a chart for the healthcare. Is it possible to connect two different points of two series with each other like in the picture?
Thanks and cheers.

Answer 1

This worked for me:
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$(".chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.highValueText + "/" + obj.lowValueText + " mmHg"
}
}
},
legend: {
visible: false,
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
type: "stock",
lowValueField: "dia",
closeValueField: "dia",
openValueField: "sys",
highValueField: "sys",
}],
valueAxis: [{
name: "bdAxe",
title: "Blutdruck",
position: "left",
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div class="chartContainer" style="width:100%; height: 440px"></div>
I used the stock chart for this: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout
Thanks & Cheers.