<!-- Pie -->
<div class="chart js-chart">
<script type="application/json" data-script>
{
"type": "pie",
"options": {
"title": {
"text": "Pie Chart Title"
}
},
"data": {
"labels": ["Dataset One", "Dataset Two", "Dataset Three", "Dataset Four", "Dataset Five", "Dataset Six", "Dataset Seven", "Dataset Eight"],
"datasets": [{
"data": [25, 40, 15, 25, 30, 35, 20, 7],
"backgroundColor": ["#00005A", "#175BF1", "#00C6F5", "#00D4A8", "#0C5E38", "#FFAD17", "#FF6F61", "#FF3B36"]
}]
}
}
</script>
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
Cras Sit Amet
</h2>
<div class="chart_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
</div>
</header>
<div class="chart_content">
<div class="chart_container chart_pie">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Doughnut -->
<div class="chart js-chart">
<script type="application/json" data-script>
{
"type": "doughnut",
"options": {},
"data": {
"labels": ["Dataset One", "Dataset Two", "Dataset Three", "Dataset Four", "Dataset Five", "Dataset Six", "Dataset Seven", "Dataset Eight"],
"datasets": [{
"data": [25, 40, 15, 25, 30, 35, 20, 7],
"backgroundColor": ["#00005A", "#175BF1", "#00C6F5", "#00D4A8", "#0C5E38", "#FFAD17", "#FF6F61", "#FF3B36"]
}]
}
}
</script>
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
Cras Sit Amet
</h2>
<div class="chart_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
</div>
</header>
<div class="chart_content">
<div class="chart_container chart_doughnut">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Line -->
<div class="chart js-chart">
<script type="application/json" data-script>
{
"type": "line",
"options": {
"scales": {
"xAxes": [{
"scaleLabel": {
"labelString": "MONTH"
},
"gridLines": {
"zeroLineColor": "#00005a"
}
}],
"yAxes": [{
"scaleLabel": {
"labelString": "VALUE"
},
"gridLines": {
"zeroLineColor": "#00005a"
}
}]
}
},
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"label": "Dataset One",
"data": [0, -30, -20, 35, -20, -40, -20],
"backgroundColor": "transparent",
"borderColor": "#00005A",
"pointBackgroundColor": "#000",
"pointRadius": 4
}, {
"label": "Dataset Two",
"data": [-95, -90, -30, 75, -20, -90, -45],
"backgroundColor": "transparent",
"borderColor": "#175BF1",
"pointBackgroundColor": "#000",
"pointRadius": 4
}, {
"label": "Dataset Three",
"data": [-85, -95, -80, -45, -60, -85, -100],
"backgroundColor": "transparent",
"borderColor": "#00C6F5",
"pointBackgroundColor": "#000",
"pointRadius": 4
}]
}
}
</script>
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
Cras Sit Amet
</h2>
<div class="chart_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
</div>
</header>
<div class="chart_content">
<div class="chart_container chart_line">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Horizontal Bar -->
<div class="chart js-chart">
<script type="application/json" data-script>
{
"type": "bar",
"options": {
"indexAxis": "y",
"scales": {
"xAxes": [{
"scaleLabel": {
"labelString": "Percentage of Vote"
},
"gridLines": {
"zeroLineColor": "#00005a"
}
}],
"yAxes": [{
"scaleLabel": {
"labelString": "Political Figure"
},
"gridLines": {
"zeroLineColor": "#00005a"
},
"ticks": {
"suggestedMin": 0,
"suggestedMax": 40
}
}]
}
},
"data": {
"labels": ["Raisi", "Ahmadinejad", "Ghalibaf", "Zarif", "Khatami", "Saeed Mohammad", "Hassan Khomeini", "Mohsen Rezayi", "Saeed Jalili", "Azari Jahromi", "Ali Larijani", "Other", "No one", "Don't know"],
"datasets": [{
"label": "% open-ended responses",
"data": [27, 13, 8, 4, 4, 1, 1, 1, 0.9, 0.7, 0.5, 2, 1, 35],
"backgroundColor": "#00005A"
}]
}
}
</script>
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
Cras Sit Amet
</h2>
<div class="chart_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
</div>
</header>
<div class="chart_content">
<div class="chart_container chart_bar">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bar -->
<div class="chart js-chart">
<script type="application/json" data-script>
{
"type": "bar",
"options": {
"scales": {
"xAxes": [{
"scaleLabel": {
"labelString": "Percentage of people polled"
},
"gridLines": {
"zeroLineColor": "#00005a"
}
}],
"yAxes": [{
"scaleLabel": {
"labelString": "Opinions"
},
"gridLines": {
"zeroLineColor": "#00005a"
}
}]
}
},
"data": {
"labels": ["Preventing Iran from developing nuclear weapons capability", "Preventing North Korea from developing nu'clear weapons capability", "Limiting the buildup of nuclear weapons in both countries"],
"datasets": [{
"label": "Americans",
"data": [71, 71, 69],
"backgroundColor": "#00005A"
}, {
"label": "Russians",
"data": [61, 60, 70],
"backgroundColor": "#00c6f5"
}]
}
}
</script>
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
Cras Sit Amet
</h2>
<div class="chart_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat leo, porta quis arcu in, sollicitudin porttitor sem. Cras et neque lobortis, interdum nisi vitae, mattis felis. In odio lorem, tempor vel pellentesque at In odio lorem, tempor vel pellentesque at.</p>
</div>
</header>
<div class="chart_content">
<div class="chart_container chart_bar">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chart js-chart">
<script type="application/json" data-script>
{{ chart_json|json_encode }}
</script>
<div class="fs-row">
<div class="fs-cell {{ cell }}">
<div class="chart_inner">
<header class="chart_head">
<h2 class="chart_title">
{{ title }}
</h2>
{% if description %}
<div class="chart_description">
<p>{{ description }}</p>
</div>
{% endif %}
</header>
<div class="chart_content">
<div class="chart_container chart_{{ chart_json.type }}">
<canvas data-canvas></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.