Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

var series = [
  {
    "name": "SQL Injection Attack: SQL Tautology Detected.",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 34),12]",
      "[Date.UTC(2018, 6, 20, 12, 33),12]",
      "[Date.UTC(2018, 6, 20, 12, 32),10]"
    ]
  },
  {
    "name": "TestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 27),2]"
    ]
  },
  {
    "name": "aTestEvent",
    "data": [
      "[Date.UTC(2018, 6, 20, 12, 28),1]"
    ]
  }
]

series.forEach(series => {
	series.data = series.data.map(point => {
  		var parsedData = point.split(/\D+/).splice(1, 6).map(value => { return parseInt(value, 10) })
      var value = parsedData[5]
      parsedData.splice(-1, 1)
      
			return [Date.UTC(...parsedData), value]
  }).reverse()
})

var chart = Highcharts.chart('container', {
    series: series,
    xAxis: {
    	type: 'datetime'
    }
});