Commit 4e68abb3 authored by uudlo's avatar uudlo

Implement usage of plot.ly

parent 18a48e0d
......@@ -27,25 +27,17 @@ function barChart(chartID, labelList, dataSets) {
});
};
function scatterChart(chartID, dataSets) {
new Chart($(chartID)[0].getContext("2d"), {
type: 'scatter',
options: {
legend: {
display: false,
},
events: ["mousemove", "mouseenter"],
animation: {
duration: 0,
},
scales: {
yAxes: [{
}]
},
},
data: {
datasets: dataSets,
var layout = {
showlegend: false,
margin: {
l: 50,
r: 10,
b: 50,
t: 10,
pad: 4
}
});
};
Plotly.plot(chartID, dataSets, layout);
};
......
......@@ -12,15 +12,15 @@
<div class="row">
<div class="col-md-4">
<h5>{{ stat_descriptions|ldescr:'point_history' }}</h5>
<canvas id="chartpoint_history"></canvas>
<div id="chartpoint_history"></div>
</div>
<div class="col-md-4">
<h5>{{ stat_descriptions|ldescr:'elo_history' }}</h5>
<canvas id="chart_elo_history"></canvas>
<div id="chart_elo_history"></div>
</div>
<div class="col-md-4">
<h5>{{ stat_descriptions|ldescr:'glicko2_history' }}</h5>
<canvas id="chart_glicko2_history"></canvas>
<div id="chart_glicko2_history"></div>
</div>
</div>
<div class="row">
......@@ -120,48 +120,60 @@ label["False"] = "Defeat";
// prepare datasets
var dataSetsPointHistory = [
{% for player in player_list|dictsort:"stats.points" %}{
borderWidth: 3,
lineTension: 0,
pointRadius: 0.7,
fill: false,
label: "{{ player.name }}",
backgroundColor: "{{ player.color }}",
borderColor: "{{ player.color }}",
data: [{% for point in player.stats.point_history %}{x:{{ forloop.counter0 }},y:{{ point }}},{% endfor %}],
marker: {
color: "{{ player.color }}",
size: 7
},
line: {
color: "{{ player.color }}",
width: 1
},
name: "{{ player.name }}",
type: "scatter",
x: [{% for point in player.stats.point_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.point_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
var dataSetsEloHistory = [
{% for player in player_list|dictsort:"stats.points" %}{
label: "{{ player.name }}",
backgroundColor: "{{ player.color }}",
borderColor: "{{ player.color }}",
borderWidth: 3,
lineTension: 0,
pointRadius: 0.7,
fill: false,
data: [{% for elo in player.stats.elo_history %}{x:{{ forloop.counter0 }},y:{{ elo }},},{% endfor %}]
marker: {
color: "{{ player.color }}",
size: 7
},
line: {
color: "{{ player.color }}",
width: 1
},
name: "{{ player.name }}",
type: "scatter",
x: [{% for point in player.stats.elo_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.elo_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
var dataSetsGlicko2History = [
{% for player in player_list|dictsort:"stats.points" %}{
label: "{{ player.name }}",
backgroundColor: "{{ player.color }}",
borderColor: "{{ player.color }}",
borderWidth: 3,
lineTension: 0,
pointRadius: 0.7,
fill: false,
data: [{% for elo in player.stats.glicko2_history %}{x:{{ forloop.counter0 }},y:{{ elo }},},{% endfor %}]
marker: {
color: "{{ player.color }}",
size: 7
},
line: {
color: "{{ player.color }}",
width: 1
},
name: "{{ player.name }}",
type: "scatter",
x: [{% for point in player.stats.glicko2_history %}{{ forloop.counter0 }},{% endfor %}],
y: [{% for point in player.stats.glicko2_history %}{{ point }},{% endfor %}],
},{% endfor %}
];
// draw all charts, when the page is loaded
$(window).on("load", function () {
scatterChart("#chartpoint_history", dataSetsPointHistory);
scatterChart("#chart_elo_history", dataSetsEloHistory);
scatterChart("#chart_glicko2_history", dataSetsGlicko2History);
scatterChart("chartpoint_history", dataSetsPointHistory);
scatterChart("chart_elo_history", dataSetsEloHistory);
scatterChart("chart_glicko2_history", dataSetsGlicko2History);
var pattern = {}
var ctx = $("#chart0")[0].getContext("2d");
pattern['Schelle'] = ctx.createPattern(schelleImg, 'repeat');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment