214 lines
8.6 KiB
HTML
214 lines
8.6 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Chart JS{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/chart.js/dist/chart.umd.js' %}"></script>
|
|
<script src="{% static 'js/demo/chart-js.demo.js' %}"></script>
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Chart</a></li>
|
|
<li class="breadcrumb-item active">Chart JS</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Chart JS <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="chart-js-1">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Line Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
A line chart is a way of plotting data points on a line.
|
|
Often, it is used to show trend data, and the comparison of two data sets.
|
|
</p>
|
|
<div>
|
|
<canvas id="line-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-1.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="chart-js-2">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Bar Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
A bar chart is a way of showing data as bars.
|
|
It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
|
|
</p>
|
|
<div>
|
|
<canvas id="bar-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-2.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="flot-chart-3">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Radar Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
A radar chart is a way of showing multiple data points and the variation between them.
|
|
They are often useful for comparing the points of two or more different data sets.
|
|
</p>
|
|
<div class="w-75 mx-auto">
|
|
<canvas id="radar-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-3.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="chart-js-4">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Polar Area Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment
|
|
differs depending on the value.
|
|
</p>
|
|
<div class="w-75 mx-auto">
|
|
<canvas id="polar-area-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-4.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="flot-chart-5">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Pie Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
|
|
</p>
|
|
<div class="w-75 mx-auto">
|
|
<canvas id="pie-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-5.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="chart-js-6">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Doughnut Chart</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p>
|
|
Pie and doughnut charts are registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.
|
|
</p>
|
|
<div class="w-75 mx-auto">
|
|
<canvas id="doughnut-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/chart-js/code-6.json' %}"></code></pre>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
{% endblock %} |