Correlation examples shows how different widgets can comunicate by passing props on element click.
All following examples use universal click callback function - "onItemClick". Callback function recieves two arguments:
| Name | Type | Description |
|---|---|---|
| type | ENUM | Defines type of target (clicked) element. Can be one of the following: match, player, team, season, realCategory, tournament, uniqueTournament |
| obj | object type | Object is unique to each widget. Use example below to get available properties (replace player.selector with widget you want to integrate). |
<div class="container"></div>
<script>
(function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
)})(window,document,"script","https://widgets.sir.sportradar.com/sportradar/widgetloader","SIR", {
language: 'en'
});
alert('Click on any player to get correlation info.');
SIR('addWidget', '.container', 'player.selector', {
onItemClick: function(type, obj) {
alert('Clicked item type:\n"'+ type +'"\n\nObject:\n' + JSON.stringify(obj, null, '\t'));
}
});
</script>
Match
Link to example: MATCH SELECT
Click on any match from MatchList (left) to redirect to LMT demo page. LMT is automatically shown for chosen match. For best presentation of LMT solution, please choose live match.
| Input widget | Output widget | Correlation |
|---|---|---|
| match.matchlist | LMT demo page |
Widgets communicates through:
|
Player
Link to example: PLAYER SELECT
Click on any player from PlayerSelector (left) to show Player information (right) for chosen player.
| Input widget | Output widget | Correlation |
|---|---|---|
| player.selector | player.info |
Widgets communicates through:
|
Soccer team
Link to example: SOCCER TEAM SELECT
Click on any team from TeamSelector (left) to show Team information (right) for specific team. TeamSelector lets you choose between tournaments for easier team selection. Team data is conditioned by tournament and season.
| Input widget | Output widget | Correlation |
|---|---|---|
| team.selector | team.info |
Passed props:
|
Team/Player
Link to example: TEAM/PLAYER SELECT
Click on any team from liveTable (left) to show Team Leaderboard widget (top-right) for chosen team. Click on any player from Team Leaderboard to show PlayerInfo widget (bottom-right) to show information for chosen player.
| Input widget | Output widget | Correlation |
|---|---|---|
| season.liveTable | team.leaderboard |
Widgets communicates through:
|
| team.leaderboard | player.info |
Widgets communicates through:
|
Basketball team
Link to example: BASKETBALL TEAM
Click on any team from LiveTable (left) to show Team information (right) for specific team.
| Input widget | Output widget | Correlation |
|---|---|---|
| season.liveTable | team.basketball.info |
Passed prop:
|