I have a bubble chart and read data using ajax with getData() method. It is ok for first time but i woukd like to add new incoming data to chart in setInterval method. There are the way chart.dataSource.add(dataSource1) to add data but it is not working for me. I would like to update series[0] data and also add only new coming data without refresh all data. Is it possible?
function create(){
var config = {
chartArea: {
width: 550,
height: 370
},
seriesDefaults: {
rangeArea: {
color: "red",
opacity: 0.2
}
},
series: [{
type: "bubble",
data: getData(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
{
type: "bubble",
data: getData2(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
],
yAxis: {
name: "yAxis",
},
xAxis: {
name: "xAxis",
reverse: true,
min: roundMinutes(new Date().addHours(-2)),
max: roundMinutes(new Date().addHours(2)),
plotBands: plotData,
labels: {
template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
},
baseUnit: "hours",
majorUnit: 1
}
};
$("#chart").kendoChart(config);
}
$(document).ready(function () {
createChart();
setInterval(function () {
createChart();
}, 60000);
});
chart.dataSource.add() works fine. Here is an example. Try this in the DOJO. This is based on Telerik's example. It adds a bubble every couple of seconds without refreshing data.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
dataSource: {
data: jobGrowth
},
series: [{
type: "bubble",
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
}, 2000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
}, 4000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
}, 6000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>Ok. Here's another example. The data is bound to the series this time. This example shows only one series but this should give you an idea on how to go about your requirement. The outcome is the same as above but this time it's not using a DataSource instance.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
series: [{
type: "bubble",
data: jobGrowth,
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
jobGrowth.push(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
bubbleChart.redraw();
}, 2000);
setTimeout(function() {
jobGrowth.push(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
bubbleChart.redraw();
}, 4000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
bubbleChart.redraw();
}, 6000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
bubbleChart.redraw();
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>