tabler-ui/src/_includes/js-charts.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

{% 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.fill %}
				classes: {
                    {% for serie in data.series %}
					data{{ forloop.index }}: 'filled'{% unless forloop.last %},{% endunless %}{% endfor %}
				},
        		{% endif %}

				{% 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 %}
				}
			},

        	{% if data.remove-padding %}
			axis: {
				y: {
					padding: {
						bottom: 0,
					},
					show: false,
						tick: {
						outer: false
					}
				},
				x: {
					padding: {
						left: 0,
						right: 0
					},
					show: false
				}
			},
			{% else %}
			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 %}
			},
        	{% endif %}


			{% if data.type == 'bar' %}
			bar: {
				width: 16
			},{% endif %}


			legend: {
                {% if data.hide-legend %}show: false, //hide legend
                {% else %}
				{% if data.legend-position == 'top' %}
				position: 'inset',
				padding: 0,
				inset: {
                    anchor: 'top-left',
					x: 20,
					y: 8,
					step: 10
				}
				{% else %}
                padding: 16,
                {% endif %}
                {% endif %}
			},

        	{% if data.hide-tooltip %}
			tooltip: {
				format: {
					title: function (x) {
						return '';
					}
				}
			},
        	{% endif %}

        	{% if data.remove-padding %}
			padding: {
				bottom: 0,
				left: -1,
				right: -1
			},
			{% else %}
			padding: {
				{% if data.hide-legend %}bottom: 0,{% else %}bottom: 16,{% endif %}
				top: 0
			},
       		{% endif %}

			{% if data.hide-points %}
			point: {
				show: false
			}
			{% endif %}
		});
	});
});
</script>
{% endif %}
{% endremoveemptylines %}