Clicky

Ups And Downs
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Ups And Downs

Do you oversee a charity website? Are you responsible for an online project? If so, you may have asked yourself how to demonstrate how your project is progressing – is the project's funding going as planned – is your project nearing completion, or is there still some way to go? Well, you could add some sort of progress bar, but that doesn't really say a lot. How about a Line Graph?

Line Graph

RWExtras' Line Graph is the ideal stack to display any sort of progression. Line Graphs are boring, right? So how about an animated Line Graph? The more information you add, the more valuable the information that your visitors will ascertain from it.

Line Graph is a really simple stack to use. When you place it on your page, you won't see anything but a set of instructions. However, if you set a path to a CSV file in the settings panel and then switch to preview mode – voila – you have a chart that displays all of the information contained within that CSV. The progress of your project's donations could look like this:

You'll notice that some information is visible over 2015/6. This information is displayed for each part of the graph when your mouse hovers over it. In this case it contains details of each donation and the total reached for the date.

Have more information that you wish to show? Are your investors interested in your sales records for the current month?

This chart shows when and where a sale was made, when the customer account was created, when the customer last logged in to his account and, of course, how much was paid.

Both of the above charts were created with Line Graph with almost zero configuration.
But the settings panel allows quite a bit of configuration: First, as already mentioned, you'll need a CSV file. You can then set an URL to load the file either from your server, or from your Resources folder. Once you've read the setup instructions, you probably won't want them displayed in your layout, so deactivate Display Instructions.

Now you can decide if the curves on your chart should be filled with colour [Filled Graph], and if the curves should be smoothed [Line Smoothing]. Next come Stacked Graph, Stepped Points and Connect Separate Points. The settings can all be played with in preview mode and the changes are immediately visible.

Once you have your curves displaying as you want them, you can set your Graph Height and Title, including the titles Size and Colour. Your X and Y Axes will also require Titles and Render Grid Lines places a grid behind the chart – Now set the Colours for the Axes Titles and the Axis Lines.

The Legend that is displayed (the additional information contained within the CSV file for each project state) is set to Always by default. In this case the legend is fixed to the top right hand corner of your graph and changes as you move your mouse along the curves. With On Mouseover set, the legend is only displayed when the mouse enters the graph. Follow causes the legend to follow the mouse along the curve and None hides the legend completely.

You can add Highlight points to your chart and set their size, then you can set the colours for each of the progress lines; there are colour options for up to five different graphs. The final settings are for the Stroke Width and the Stroke Colour.

RWExtras' Line Graph will enhance the display of your financial records, your project's progress, weather data from the last ten years, or whatever else you can pack into a CSV file, in an informative fashion and has the advantage of being extremely simple to set up.

CSV To Table

While I was writing the above, Will was hard at work updating yet another stack. CSV To Table is also stack that will present project details to your visitors, but this time using a more sober display method.

RWExtras' CSV To Table does exactly what its name says, it takes a CSV file and presents the data as a table. More useful than a line chart, if you need compare details more easily.

Once again, all you need to do is link a CSV file in the settings panel and your file will be displayed in a clean table. CSV To Table automatically assumes that the first row of information is a header and underlays the first line in the table with colour, this can of course be changed in the settings panel.


This is part of the same content as the donations chart above.

The first setting in the settings panel is CSV File (set link); the second setting is (minimum) Column Width. As CSV To Table isn't a responsive stack, you'll need to play around with the Column Width, if you wish to display your data on a smaller screen. CSV TT will match its visible width to fill the container it is in; if your CSV contains mor information than can be displayed on the screen width, a scrollbar will appear underneath the table – you may want to make sure that your most important data is contained in the first columns! CSV TT's height is governed by the number of rows in the file.

The settings that follow, govern the cell Borders, The Border Size and the Border Colour. The Borders can be set to All Sides (default), Table Box Only, Horizontal, or Vertical.

The Table Fill can be set to None (default), Alternating Rows, Alternating Columns, or Solid, with options for the Colours. The (cell) Alignment is set to Left by default and the Cell Padding to 10px. The next settings are forFont Size, Line Height and (font) Colour.

Next we come to the CSV To Table Header Settings which allow for Bold Text, Disable Borders, Italic Text and the same text controls as for the cells. The First Column may also be treated as a header and has the same control settings as Header Settings once it is activated.

RWExtras' CSV To Table is a clean way to display tabular data.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required