mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
86 lines
2.0 KiB
HTML
86 lines
2.0 KiB
HTML
{% removeemptylines %}
|
|
{% assign data = site.data.charts[include.data] %}
|
|
{% if data %}
|
|
<script>
|
|
require(['c3', 'jquery'], function(c3, $) {
|
|
$(document).ready(function(){
|
|
var chart = c3.generate({
|
|
bindto: '#{{ include.id }}', // id of chart wrapper
|
|
data: {
|
|
columns: [
|
|
// each columns data
|
|
{% for serie in data.series %}
|
|
['data{{ forloop.index }}', {{ serie.data | join: ', '}}]{% unless forloop.last %},{% endunless %}{% endfor %}
|
|
],
|
|
|
|
{% if data.show-labels %}
|
|
labels: true,
|
|
{% endif %}
|
|
|
|
type: '{{ data.type }}', // default type of chart
|
|
|
|
{% if data.types %}
|
|
types: { {% for type in data.types %}
|
|
'data{{ type[0] }}': "{{ type[1] }}",{% endfor %}
|
|
},
|
|
{% endif %}
|
|
|
|
{% if data.groups %}
|
|
groups: [
|
|
[ {% for group in data.groups %}'data{{ group }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
|
|
],
|
|
{% endif %}
|
|
|
|
colors: { {% for serie in data.series %}
|
|
'data{{ forloop.index }}': tabler.colors.{{ serie.color | default: 'blue' }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
|
},
|
|
|
|
names: {
|
|
// name of each serie
|
|
{% for serie in data.series %}
|
|
'data{{ forloop.index }}': '{{ serie.name }}'{% unless forloop.last %},{% endunless %}{% endfor %}
|
|
}
|
|
},
|
|
|
|
axis: {
|
|
{% if data.type != 'pie' and data.type != 'donut' %}
|
|
x: {
|
|
type: 'category',
|
|
// name of each category
|
|
categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}]
|
|
},
|
|
{% endif %}
|
|
{% if data.rotated %}
|
|
rotated: true,
|
|
{% endif %}
|
|
},
|
|
|
|
|
|
{% if data.type == 'bar' %}
|
|
bar: {
|
|
width: 16
|
|
},{% endif %}
|
|
|
|
|
|
legend: {
|
|
{% if data.hide-legend %}show: false, //hide legend
|
|
{% else %}padding: 16,{% endif %}
|
|
},
|
|
|
|
|
|
padding: {
|
|
{% if data.hide-legend %}bottom: 0,{% else %}bottom: 16,{% endif %}
|
|
top: 0
|
|
},
|
|
|
|
{% if data.hide-points %}
|
|
point: {
|
|
show: false
|
|
}
|
|
{% endif %}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endremoveemptylines %} |