В настоящее время я использую Flask и диаграмму. js для создания графики. В основном, у меня есть база данных (sqlite), в которой хранятся результаты соревнований по плаванию. Время указывается в формате «ЧЧ: ММ: СС.ССС». Например, на дистанции 50 метров вольным стилем у меня нет проблем, поскольку время указано в формате «СС.СС» (пример 26.94), и я могу сгенерировать график в * 1013. * с диаграммой. js, потому что я могу преобразовать 26,94 в число и получить график с осью X для месяцев и осью Y для времени (например, 26,94). Однако в случае таких времен, как «00: 08: 23.78», мне нужно отобразить это время на оси Y относительно месяцев на оси X, в которых было достигнуто время. Я до сих пор не могу представить решение с помощью диаграммы. js. Любое руководство будет очень признателен. 
Раздел исходного кода в Flask и Python, который генерирует график, выглядит следующим образом:
@app.route("/simple_chart")
def chart():
legend = 'Monthly performance at 50m Freestyle'
labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dic"]
values = [26.94, 26.70, 26.80, 27.40, 26.45, 26.43, 26.30, 26.25, 26.20, 26.35, 26.00, 25.00]
return render_template('chart.html', values=values, labels=labels, legend=legend)
Исходный код Диаграмма. html Файл выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<!-- import plugin script -->
<script src='static/Chart.min.js'></script>
</head>
<body>
<h1>50 m. Free Style</h1>
<!-- bar chart canvas element -->
<canvas id="myChart" width="600" height="400"></canvas>
<p id="caption">Data obtained from swimming competitions.</p>
<script>
// Global parameters:
// do not resize the chart canvas when its container does (keep at 600x400px)
Chart.defaults.global.responsive = false;
// define the chart data
var chartData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [{
label: '{{ legend }}',
fill: true,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : [{% for item in values %}
{{item}},
{% endfor %}],
spanGaps: false
}]
}
// get chart canvas
var ctx = document.getElementById("myChart").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'line',
data: chartData,
});
</script>
</body>