Upgrade to Chart.js 2.0-beta2

This commit is contained in:
Fabian Vogler 2016-03-17 09:21:05 +01:00
parent 71d6e692eb
commit cc37fcfa78
2 changed files with 34 additions and 25 deletions

View File

@ -4,7 +4,7 @@
"animate-sass": "~0.6",
"autosize": "~3.0.15",
"bootstrap-sass": "~3.3",
"chartjs": "~1.0.2",
"chartjs": "~2.0.0-beta2",
"eonasdan-bootstrap-datetimepicker": "~3.1",
"humane-js": "~3.2",
"ionicons": "~2.0",

View File

@ -35,22 +35,9 @@
</ul>
<script>
(function () {
Chart.defaults.global.pointHitDetectionRadius = 1;
Chart.defaults.global.scaleBeginAtZero = true;
Chart.defaults.global.legend.display = false;
var charts = {},
defaultData = {
showTooltips: false,
labels: [],
datasets: [{
fillColor: "{{ $theme_metrics }}",
pointColor: "{{ color_darken($theme_metrics, -0.1) }}",
pointStrokeColor: "{{ color_darken($theme_metrics, -0.1) }}",
pointHighlightFill: "{{ color_darken($theme_metrics, -0.2) }}",
pointHighlightStroke: "{{ color_darken($theme_metrics, -0.2) }}",
data: []
}],
};
var charts = {};
$('a[data-filter-type]').on('click', function(e) {
e.preventDefault();
@ -70,7 +57,6 @@
});
function drawChart($el) {
var chartConfig = defaultData;
var metricId = $el.data('metric-id');
var metricGroup = $el.data('metric-group');
@ -85,19 +71,42 @@
$.getJSON('/metrics/'+metricId, { filter: metricGroup }).done(function (result) {
var data = result.data.items;
chartConfig.labels = _.keys(data);
chartConfig.datasets[0].data = _.values(data);
if (chart.chart !== null) {
chart.chart.destroy();
}
chart.chart = new Chart(chart.context).Line(chartConfig, {
tooltipTemplate: $el.data('metric-name') + ": <{{ '%' }}= value %> " + $el.data('metric-suffix'),
scaleShowVerticalLines: true,
scaleShowLabels: true,
responsive: true,
maintainAspectRatio: false
chart.chart = new Chart(chart.context, {
type: 'line',
data: {
labels: _.keys(data),
datasets: [{
label: result.data.metric.name,
data: _.values(data),
backgroundColor: "{{ $theme_metrics }}",
pointBackgroundColor: "{{ color_darken($theme_metrics, -0.1) }}",
pointBorderColor: "{{ color_darken($theme_metrics, -0.1) }}",
pointHoverBackgroundColor: "{{ color_darken($theme_metrics, -0.2) }}",
pointHoverBorderColor: "{{ color_darken($theme_metrics, -0.2) }}"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 0.1
}
}]
},
tooltips: {
callbacks: {
afterLabel: function(tooltipItem, data) {
return " " + result.data.metric.suffix;
}
}
}
}
});
});
}