Skip to content

Commit

Permalink
Updated example pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@burkmarr
burkmarr committed Dec 3, 2024
1 parent 86a7eac commit 969deb5
Show file tree
Hide file tree
Showing 18 changed files with 498 additions and 1,803 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
The BRC Charts library is a Javascript library for producing various charts tailored to biological records.

## Installing
You can get the javscript amd css builds from
You can get the javscript and css builds from
the [GitHub repo](https://github.com/BiologicalRecordsCentre/brc-charts/tree/master/dist)
or include them in code directly from a CDN, e.g:
```
Expand Down
172 changes: 18 additions & 154 deletions docs/example-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,126 +12,18 @@
</head>
<body>
<div class="content">
<h1>Using the BRC Charts Library</h1>
<h2>Show a pie or donut chart</h2>
<p>
Include the required Javascript libraries and CSS in the page. We need the BRC Charts JS libary, the associated
CSS and the D3 library which is an external
external dependency of the BRC Charts library. In this example they are all included from CDNs.
</p>
<pre>
<code class="html">&lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-charts/dist/brccharts.umd.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-charts/dist/brccharts.umd.css&quot;&gt;&lt;/script&gt;</code>
</pre>
<h1>Using the BRC Charts Library - pie</h1>
<p>
First we create a div element which will contain the chart.
Explore the source of this page and examine the code comments to see how it works.
</p>
<pre>
<code class="html">&lt;div id=&quot;chart1&quot;&gt;&lt;/div&gt;</code>
</pre>

<h2>Show a pie or donut chart</h2>
<p>
In the page's Javascript we call the <em>brccharts.pie</em> method, passing in the configuration options
which include the data we want to display. (The data used for this chart is shown below the chart.)
The first example shows a donut chart of the kind used to illustrate the UK Pollinator Monitoring Scheme
website: https://ukpoms.org.uk/flower-charts. It illustrates how the chart can be interactive, including
associating images with the different categories in the chart.
</p>
<pre>
<code class="javascript">brccharts.pie({...})</code>
</pre>

<div id="chart1"></div>

<p>
The data passed into the <em>brccharts.pie</em> method for this chart is shown below. URLs of images
(in this case relative URLs) have been provided. The chart will show these images when the mouse moves
over the assocated pie or legend item. See further examples below for other options associated with
this behaviour.
</p>
<p>
Text passed to the chart (title, subtitle, footer) is wrapped to fit within the bounds of the chart
which is calculated from the width of the legend and radius of the pie/donut chart (which can both
be specified in options). However, you can force line breaks in text by using the sting <em>\n</em>
within your text (with spaces either side) as in this example.
</p>

<pre>
<code class="javascript">{
selector: '#chart1',
innerRadius: 100,
radius: 200,
title: 'FIT Counts: insects counted on hawthorn flowers \n 2017 to 2020',
data: [
{
name: "bumblebees",
number: 3,
colour: '#5A99D3',
image: 'images/Bumblebees.png'
},
{
name: "honeybees",
number: 10,
colour: '#EB7C30',
image: 'images/Honeybees.png'
},
{
name: "solitary bees",
number: 7,
colour: '#A3A3A3',
image: 'images/Solitary bees.png'
},
{
name: "wasps",
number: 4,
colour: '#FFBF00',
image: 'images/Wasps.png'
},
{
name: "hoverflies",
number: 12,
colour: '#4472C3',
image: 'images/Hoverflies.png'
},
{
name: "other flies",
number: 34,
colour: '#70AB46',
image: 'images/Other flies.png'
},
{
name: "butterflies and moths",
number: 1,
colour: '#1F5380',
image: 'images/Butterflies and moths.png'
},
{
name: "beetles",
number: 6,
colour: '#9D480E',
image: 'images/Beetles.png'
},
{
name: "small insects",
number: 17,
colour: '#626262',
image: 'images/Aphid_BHL.png'
},
{
name: "other insects",
number: 6,
colour: '#977200',
image: 'images/Other insects.png'
},
]
}</code>
</pre>

<p>
For full documentation on various options, see here:
<a href='https://biologicalrecordscentre.github.io/brc-charts/docs/api/module-pie.html'>
https://biologicalrecordscentre.github.io/brc-charts/docs/api/module-pie.html</a>
Further examples are given below to illustrate some of the features of the pie method.
</p>

<h2>Other options</h2>

<div>
Expand All @@ -149,17 +41,21 @@ <h2>Other options</h2>
The API documentation describes the options used and you can view the source of this
page to see how they are implemented here.
</p>
<p>
Text passed to the chart (title, subtitle, footer) is wrapped to fit within the bounds of the chart
which is calculated from the width of the legend and radius of the pie/donut chart (which can both
be specified in options). However, you can force line breaks in text by using the sting <em>\n</em>
within your text as in the second example above.
</p>

<h2>Transitions</h2>

<p>
When you call the <em>brccharts.pie</em> method, it returns an API object which you
can assign to a variable and then use to change properties of the chart, notably
text and data.
text and data. The example below has been implemented with transitions that engage
the user's attention.
</p>
<pre>
<code class="javascript">var chart = brccharts.pie({...})</code>
</pre>

<div id="chart4"></div>
<br/>
Expand All @@ -174,50 +70,18 @@ <h2>Transitions</h2>
<button onclick="chart.saveImage(true, 'donut')">Download image</button>
<button onclick="chart.setChartOpts({data: []})">Clear</button>

<p>
The pie/donut chart has been implemented with transitions that engage the user's attention

</p>
<p>
In this demonstration, the buttons above are associated with code like
that shown below.
</p>

<pre>
<code class="javascript">function button1Click() {
chart.setChartOpts({title: 'Original data', footer: '', data: items})
}
function button2Click() {
chart.setChartOpts({title: 'Original data reduce 1', footer: '', data: itemsDataReduced1})
}
function button3Click() {
chart.setChartOpts({title: 'Original data reduce 2', footer: '', data: itemsDataReduced2})
}
function button4Click() {
chart.setChartOpts({
title: 'Typology of walkers on the Pennine Way',
footer: 'As classified by Simon Armitage in his book Walking Home - Travels with a Troubadour on The Pennine Way',
data: armitage
})
}
</code>
</pre>

<!--JS and CSS required for highlighting inline example code-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/a11y-light.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


<!--Page CSS-->
<link rel="stylesheet" href="example.css" />

<!--D3 JS required exernal dependency of BRC Charts library-->
<script src="https://d3js.org/d3.v5.min.js"></script>

<!--BRC Charts library JS and CSS-->
<!--BRC Charts library JS and CSS
Here we get the resources in this package-->
<script src="./../dist/brccharts.umd.js"></script>
<link rel="stylesheet" type="text/css" href="./../dist/brccharts.umd.css">
<!--But you can get them from the CDNs as shown below-->
<!-- <script src="https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-charts@latest/dist/brccharts.umd.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/biologicalrecordscentre/brc-charts@latest/dist/brccharts.umd.css"> -->

Expand Down
Loading

0 comments on commit 969deb5

Please sign in to comment.