Better User Experience for Polls Using Chart
In today's post we are going to explain how to configure a Poll tag to use the Chart tag, as the means of displaying the voting data with some additional functionality and out-of-the-box look and feel.
The Poll documentation already describes the basic usage and properties available on a Poll tag, so we won't get much into that. We will just explain how you can make the Poll interact with the Chart tag to provide a better user experience.
View the demo
You can view a sample of the poll here. For better results, open it on two different browsers.
Just think how powerfull it is having a chart plotted and ready to receive data in real time without page refreshes...
First, as in all xRTML tags, we need to add a Connection to the real time server.
<xrtml:config debug="false">
<xrtml:connections>
<xrtml:connection appkey="myAppKey" authenticate="false"
authtoken="myDevToken" url="http://developers.realtime.livehtml.net">
<xrtml:channels>
<xrtml:channel name="myChannel" permission="write"/>
</xrtml:channels>
</xrtml:connection>
</xrtml:connections>
</xrtml:config>
Then we add a Chart tag to the page.
<xrtml:chart id="chart1" channelid="myChannel" active="false" chartingplatform="highcharts" configfunction="getChartConfig">
<xrtml:triggers>
<xrtml:trigger name="Process_Chart"/>
</xrtml:triggers>
</xrtml:chart>
As you might have noticed there is a mention to getChartConfig in the configfunction attribute, we will define it next (If you decide to choose highcharts as the chart type, we recommend you take a look at the Highcharts website to see what types of chart are available). This function should return all the chart configuration values such as the title and names for the voting items.
As an aside, it does not reflect the usual xRTML code style, but we left it with exactly the same structure as the Highcharts guys, so that users familiar with that platform can benefit (actually, we made the other types of charts in the Chart tag use the same structure as well, so that we can keep things nice and coherent).
<script type="text/javascript">
function getChartConfig() {
return {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'WHERE ARE YOU FROM?'
},
subtitle: {
text: 'To Get Everyone Familiar'
},
xAxis: {
categories: [
'Items'
]
},
yAxis: {
min: 0,
title: {
text: 'Number Of Votes'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' + this.x + ': ' + this.y + ' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'USA',
data: [0]
}, {
name: 'CANADA',
data: [0]
}, {
name: 'EUROPE',
data: [0]
}, {
name: 'ASIA',
data: [0]
}, {
name: 'LATIN AMERICA',
data: [0]
}]
}
}
</script>
Now we need a container for the chart.
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
All done with the chart tag! Not difficult at all is it? Just think how powerfull it is having a chart plotted and ready to receive data in real time without page refreshes...
Now, to add the Poll tag. This time we will have a lot less to configure than if we were not using the Chart tag to support it.
<xrtml:poll id="poll1" channelid="myChannel" target="#container" active="false" getdataurl="http://mywebsite.com/myData.ext" savevoteurl="http://mywebsite.com/myVote.ext" votesallowed="1" usecharttag="true" charttagid="chart1">
<xrtml:triggers>
<xrtml:trigger name="Process_Poll"/>
</xrtml:triggers>
</xrtml:poll>
Note that we just told the Poll tag that it should use the Chart tag to manipulate the voting data, and specified what the charttagid was.
We also instructed the Poll tag to get the initial voting data from a server-side handler or controller http://mywebsite.com/myData.ext (again, we reffer you to the Poll documentation to check what the required format is). We also said that the savevoteurl to persist the votes was http://mywebsite.com/myVote.ext.
Instead of this method, if your data is already available in your page as a JavaScript object or if you want to get it yourself using any other method, just process the data to have the required format and return it in a function that you can specify with getdatafunction attribute instead of getdataurl.
And instead of savevoteurl, use the savevotefunction attribute to tell the tag what function it should use to persist a vote.
Let me show you what I'm talking about by exemplifying how the two JavaScript functions could look like.
<script type="text/javascript">
function getData(tag) {
//if you were using jQuery:
//$.get('ajax/testData.html', function(data) {
//tag.updateData(data);
//Where data could look like "{\"votingItems\":[{\"numberOfVotes\":8},{\"numberOfVotes\":2},{\"numberOfVotes\":5},{\"numberOfVotes\":12},{\"numberOfVotes\":1}]}".
//});
tag.updateData("{\"votingItems\":[{\"numberOfVotes\":8},{\"numberOfVotes\":2},{\"numberOfVotes\":5},{\"numberOfVotes\":12},{\"numberOfVotes\":1}]}");
}
function vote(index, tag) {
//if you were using jQuery:
//$.post('ajax/testVote.html',{index:index} ,function(result) {
//if(result == 'OK')
tag.registerVote(index);
//});
}
</script>
Maybe you can use this to experiment a little before implementing a final solution persisting to your database. To do this, instead of the Poll configuration above, use the code below to test the JavaScript functions.
<xrtml:poll id="poll1" channelid="myChannel" target="#container" active="false" getdatafunction="getData" savevotefunction="vote" votesallowed="50" usecharttag="true" charttagid="chart1">
<xrtml:triggers>
<xrtml:trigger name="Process_Poll"/>
</xrtml:triggers>
</xrtml:poll>
Here is how it should look like:
Right, all done! Now open up 2 browsers and try voting on one of the browser windows. You will see the bar sky roofing on the other!! (actually it will just go up a little bit... but points for enthusiasm...) Have fun!