A website for producing interactive charts without writing a single line of code. Built with Common Lisp and Python.
https://charts.craigoates.net
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.0 KiB
62 lines
2.0 KiB
{% extends "layouts/base.html" %} |
|
{% block title %}{{user.display-name}}: Create a new chart{% endblock %} |
|
|
|
{% block content %} |
|
|
|
<div class="dashboard-header"> |
|
<h1>Create Chart</h1> |
|
</div> |
|
|
|
<div class="flex-center"> |
|
<h1>Preparing Your Data</h1> |
|
</div> |
|
<div class="flex-center"> |
|
<article style="max-width: 800px;"> |
|
<p> |
|
For this website to build interactive charts for you, without you |
|
needing writing any code, it needs to make some assumptions about |
|
how the data is organised. Below is an example of how your |
|
spreadsheet should look. |
|
</p> |
|
<div class="flex-center"> |
|
<img style="max-width: 1200px; width: 100%;" src="/images/line-chart-overview.png"> |
|
</div> |
|
<p> |
|
The 'Title', 'X-Axis' and 'Y-Axis' sections in the form are what |
|
the chart uses to label the chart. As the form says, the are |
|
optional. The only thing you need to submit is the actual |
|
spreadsheet. |
|
</p> |
|
<p> |
|
If your files are stores in Microsoft Excel's native format (.xlsx |
|
or .xls), you will need to export them to either a Comma-Separated |
|
Value (.csv) or Tab-Separated Value (.tsv) file. This website is |
|
unable to process 'Excel files' at this moment in time. |
|
</p> |
|
</article> |
|
</div> |
|
|
|
<div class="ui-form"> |
|
<form class="ui-form-add" action="/chartify" method="post" enctype="multipart/form-data"> |
|
<input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}"> |
|
<input required type="hidden" name="METHOD" value="create-chart"> |
|
|
|
<fieldset> |
|
<legend>Chart Details</legend> |
|
<label>Title <em>(Optional)</em></label> |
|
<input type="text" name="TITLE"> |
|
|
|
<label>X-Axis <em>(Optional)</em></label> |
|
<input type="text" name="X-AXIS"> |
|
|
|
<label>Y-AXIS <em >(Optional)</em></label> |
|
<input type="text" name="Y-AXIS"> |
|
|
|
<label>Spreadsheet <em>(.csv or .tsv file)</em></label> |
|
<input type="file" name="CONTENT-FILE"> |
|
</fieldset> |
|
|
|
<input class="ui-button-add" type="submit" value="Create Chart"/> |
|
</form> |
|
</div> |
|
{% endblock %}
|
|
|