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

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.