How can I change the kendo ui graph configuration so that it draws line for each integer with considering "interpolate" for missing values. In the example, I wanted a line chart for all integers from 1 to 12 even though required data is not available in the data source.
Please note that, my datasource is dynamic and it can have around 1000 records.
dataSource = [{"measurementPoint":1,"data_1":10},{"measurementPoint":2,"data_1":22},{"measurementPoint":5.5,"data_1":5},
{"measurementPoint":7,"data_1":10},{"measurementPoint":10.06,"data_1":22},{"measurementPoint":12.2,"data_1":5}];
$("#chart").kendoChart({
dataSource: { data: dataSource },
seriesDefaults: {
type: "line",
markers: { visible: false }},
categoryAxis: [{
justified: true,
field: "measurementPoint",
labels: {
step:2,
format: "###",
visible:true },
majorGridLines: { visible: false },
majorTicks: { visible: false },
crosshair: { visible: false }
}],
series: [
{ field: "data_1", name: "Pressure" }
],
tooltip: {
visible: true,
shared: true
}
});<html>
<head>
<title>Kendo Chart</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"> </div>
</body>
</html>
Use Scatter line chart instead of 'line' chart. 'Scatter line' chart properly scale chart with numeric x axis.