NEWS Score Chart Example with Scatter and Date Time X Axis

by Simon Gamester

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<script src="http://dima117.github.io/Chart.Scatter/Chart.Scatter.min.js"></script>
<body>
    <h3>NEWS Chart - XY Scatter</h3>
    <canvas id="canvas" height="427" width="828"></canvas>
    <div id="targetDiv">Click Event Appears Here</div>
    <div id="chartjs-tooltip"></div>
</body>

CSS

h3, #targetDiv { font-family: arial; }
canvas { background-color : #eee; }
#targetDiv { margin: 20px 0; font-size: 12px; }
#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  padding: 3px;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.chartjs-tooltip-key {
  display:inline-block;
  width:10px;
  height:10px;
}
.chartjs-tooltip-label {
  display:inline-block;
  width:40px;
  height:10px;
}

JavaScript

/* Colours
#ec6d1c - SBP
#ec6d1c - DBP
#dd2b08 - Temp
#467cae - HR
#0d8d05 - Resp
#db0078 - SpO2
*/

var data = [
    {
      label: 'DBP',
      strokeColor: '#ec6d1c',
      pointColor: '#ec6d1c',
      pointStrokeColor: '#fff',
      data: [
        { x: new Date('2015-03-24T08:00:00'),
					y: 52 },
        { x: new Date('2015-03-24T16:00:00'),
					y: 52 },
        { x: new Date('2015-03-25T00:08:00'),
					y: 52 },
        { x: new Date('2015-03-25T08:00:00'),
					y: 52 },
        { x: new Date('2015-03-25T16:00:00'),
					y: 52 }, 
        { x: new Date('2015-03-26T00:08:00'),
					y: 60 }, 
        { x: new Date('2015-03-26T08:16:00'),
					y: 61 }, 
        { x: new Date('2015-03-26T16:00:00'),
					y: 60 }
      ]
    },
    {
      label: 'SBP',
      strokeColor: '#ec6d1c',
      pointColor: '#ec6d1c',
      pointStrokeColor: '#fff',
      data: [
        { x: new Date('2015-03-24T08:00:00'),
					y: 108 },
        { x: new Date('2015-03-24T16:00:00'),
					y: 98 },
        { x: new Date('2015-03-25T00:08:00'),
					y: 90 },
        { x: new Date('2015-03-25T08:00:00'),
					y: 105 },
        { x: new Date('2015-03-25T16:00:00'),
					y: 113 }, 
        { x: new Date('2015-03-26T00:08:00'),
					y: 90 }, 
        { x: new Date('2015-03-26T08:16:00'),
					y: 94 }, 
        { x: new Date('2015-03-26T16:00:00'),
					y: 119 }
      ]
    }
];

var apiCalls = ["/api/1/", "/api/2/", "/api/3/", "/api/4/"];

var options = {
    bezierCurve: false,
    showTooltips: true,
		scaleShowHorizontalLines: true,
		scaleShowLabels: true,
		scaleType: "date",
		scaleLabel: "<%=value%>",
    responsive: false,
    tooltipTemplate: "<%=argLabel%>", // Our custom tooltip function uses this
}

Chart.defaults.global.customTooltips = function(tooltip) {
		
    if( allPoints[tooltip.text] ){

      var tooltipEl = $('#chartjs-tooltip');

      if (!tooltip) {
          tooltipEl.css({
              opacity: 0
          });
          return;
      }

     ...