Hello,
I am trying to create multiple series in a scatter chart using the datasource property.
However I am not able to make it work, maybe I'm missing something?
Here's the code, using data fro jquery example from the page:
<html>
<head>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo/styles/kendo.common.min.css"></link>
<link rel="stylesheet" href="kendo/styles/kendo.default.min.css"></link>
<script>
angular.module("chartApp", ["kendo.directives"])
.controller("ScatterChart", ["$scope", function($scope){
$scope.dataSource = {
title: {
text: "Rainfall - Wind Speed"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "scatter"
},
series: [{
name: "January 2008",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "January 2009",
data: [
[6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "January 2010",
data: [
[21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1, 0], [16.4, 0], [16.4, 0]]
}],
xAxis: {
max: 35,
title: {
text: "Wind Speed [km/h]"
},
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
},
yAxis: {
min: -5,
max: 25,
title: {
text: "Rainfall [mm]"
},
axisCrossingValue: -5,
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
}};
}]);
</script>
</head>
<body ng-app="chartApp">
<div ng-controller="ScatterChart">
<div kendo-chart
k-data-source="dataSource"></div>
</div>
</body>
</html>
5 Answers, 1 is accepted
Kendo UI Chart can be feeded with data either by using inline data or by binding it to a dataSource (documentation link). Please check this online demo which demonstrates how to integrate Kendo UI Scatter Chart with Angular JS.
Regards,
Iliana Nikolova
Telerik
Rank 1
Thanks for the reply.
I have tried using the DataSource object by instantiating it with the new keyword.
However this object does (from what I have tried) not support the data format for the series as in the example I posted.
Instead you have to use the k-series attribute on the directive, the problem then becomes that this attribute apparently is not two-way bound.
The scenario I need is that the graph updates as I switch out the data of the series property.
So the flow is as such:
1. Load graph data and generate graph
2. Something changes and triggers a load of new graph data.
3. The new graph data is bound to the kendo chart by switching the old series data with the newly loaded.
4. Graph updates automatically to reflect the new data.
Can you provide and example where I can have multiple series of data in a scatter plot where the data is two-way bound?
Whether it's a DataSource object or something else is all the same to me, as long as the series data is two-way bound.
When bound to a dataSource, Kendo UI Chart will automatically refresh when this dataSource is changed. Take a look at this updated dojo and let me know if I am missing something.
Regards,
Iliana Nikolova
Telerik
Rank 1
Hello,
The main goal for me is to have the dataformat as I posted:
series: [{
name: "January 2008",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "January 2009",
data: [
[6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "January 2010",
data: [
[21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1, 0], [16.4, 0], [16.4, 0]]
}],
Where the data comes in an array of arrays of [x,y]. This is not compatible with the DataSource object as far as I have tried.
So my question is if there is a way to make this data format two-way bound on the chart so that it updates automatically. I don't need to change the individual points but I replace the whole data set for a series at a time (if that makes any difference).
Thank you for the details. In order to update the chart when inline data is used you should either use the chart options:
var chart = $(".k-chart").data("kendoChart");var newData = [[1, 1], [2, 2]];chart.options.series[0].data = newDatachart.refresh()or use the k-rebind attribute.
Regards,
Iliana Nikolova
Telerik