1. The first step
Referencing the DevExtreme CDN
The first step was to add the DevExtreme charting JavaScript files to the website. I was pleasantly surprised to find that DevExtreme had a CDN (Content Delivery Network) that provided the JavaScript files I needed.
|
1
|
<script type=
"text/javascript"
src=
"http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js"
></script>
|
2. The second step
Create chart, static
$(
"#gamesChartContainer"
).dxPieChart({
dataSource: [
{
game:
"Test game 1"
,
viewers: 50,
channels: 1,
image:
"test-game-1.jpg"
},
{
game:
"Test game 1"
,
viewers: 50,
channels: 1,
image:
"test-game-1.jpg"
}
],
series: [
{
argumentField:
"game"
,
valueField:
"viewers"
,
label: {
visible:
true
,
connector: {
visible:
true
,
width: 1
}
}
}
]
});
3. The third step
Read data from Twitch.tv, dynamic
Now that the pie chart can display static data, to display real-time data, call
Twitch.tv's REST API. This API supports JSONP, so services can be called directly from JavaScript using jQuery.
var
ds = [];
for
(
var
i = 0; i < json.top.length; i++) {
ds.push({
game: json.top[i].game.name,
viewers: json.top[i].viewers,
channels: json.top[i].channels,
image: json.top[i].game.box.large
});
}
});
interactive chart
Next I'm going to create an area chart that shows the number of views a video game has increased over time. The chart starts with no data, but every few seconds the Twitch API is called and returns the number of views, while dynamically updating the area chart:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
"#streamChartContainer"
).dxChart({
title:
"Viewers"
,
commonSeriesSettings: {
type:
"splineArea"
,
argumentField:
"date"
},
series: [
{ valueField:
"viewers"
, name:
"Viewers"
}
],
argumentAxis: { valueMarginsEnabled:
false
},
legend: { visible:
false
},
animation: { enabled:
false
}
});
|
Note that there is no data source in the code above, the data is retrieved from the Twitch API.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var
dataSource = [];
function
getStreamData() {
var
viewers = json.stream.viewers;
dataSource.push({
date:
new
Date(),
viewers: viewers
});
$(
'#streamChartContainer'
).dxChart(
'option'
,
'dataSource'
, dataSource);
});
}
setInterval(
function
() {
getStreamData();
}, 5000);
|
Area chart:
