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
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.
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
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
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.