<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
//create data set on our data
var dataSet = anychart.data.set([
['P1' , '51', '125'],
['P2' , '91', '132'],
['P3' , '34', '141'],
['P4' , '47' , '158'],
['P5' , '63', '133'],
['P6' , '58', '143'],
['P7' , '36', '176'],
['P8' , '77', '194'],
['P9' , '99', '115'],
['P10' , '106', '134'],
['P11' , '88', '110'],
['P12' , '56', '91']
]);
//map data for the first series, take x from the zero column and value from the first column of data set
var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});
//map data for the second series, take x from the zero column and value from the second column of data set
var seriesData_2 = dataSet.mapAs({x: [0], value: [2]});
//create line chart
chart = anychart.line();
//set container id for the chart
chart.container('container');
//set chart title text settings
chart.title().text('Step Line Chart');
//create first series with mapped data
chart.stepLine(seriesData_1);
//create second series with mapped data
chart.stepLine(seriesData_2);
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>