LineGraph was created as a "spin off" from the older SeyDesign / Nimblehost Charts stack, which later got moved over to Stacks4Stacks. The purpose of the LineGraph stack is to focus solely on the creation of line graphs. Therefore it has a wider choice of style and colour settings specifically for line graphs. Plus a faster and more modern underlying codebase. If you are only interested in creating line graphs (as opposed to bar charts, pie charts, doughnuts and meter gauges) then LineGraph could be a better stack to use.
The line graphs generated by the LineGraph stack may admittedly not look quite as "fancy" as those produced by other methods. But of note, our line graphs are fully mobile responsive and have some powerful options like mouseover annotations. So if you are seeking to deploy professional-grade line graphs in financial, education or scientific contexts, the LineGraph stack could be a better choice. Not forgetting that you can still enhance your graphs with borders, background images and box shadow effects.
LineGraph converts a CSV spreadsheet file into line graphs. Why CSV? This is the most widely available and easiest data format to create. Almost any spreadsheet software and code editor is able to generate data in CSV format. CSV is a human-readable file format and widely regarded as an "industry standard". Using CSV saves you from manually having to code data into complex arrays or objects. Although the option to supply data as an array is still available in the stack for those wanting it!
Another benefit of LineGraph is that this stack uses pure HTML, CSS and Javascript. It has no dependencies on any outside services or functionality such as PHP, R, Python or jQuery. Therefore this stack is also great to use for static websites or webapps you are building to view offline.
The line graphs generated by the LineGraph stack may admittedly not look quite as "fancy" as those produced by other methods. But of note, our line graphs are fully mobile responsive and have some powerful options like mouseover annotations. So if you are seeking to deploy professional-grade line graphs in financial, education or scientific contexts, the LineGraph stack could be a better choice. Not forgetting that you can still enhance your graphs with borders, background images and box shadow effects.
LineGraph converts a CSV spreadsheet file into line graphs. Why CSV? This is the most widely available and easiest data format to create. Almost any spreadsheet software and code editor is able to generate data in CSV format. CSV is a human-readable file format and widely regarded as an "industry standard". Using CSV saves you from manually having to code data into complex arrays or objects. Although the option to supply data as an array is still available in the stack for those wanting it!
Another benefit of LineGraph is that this stack uses pure HTML, CSS and Javascript. It has no dependencies on any outside services or functionality such as PHP, R, Python or jQuery. Therefore this stack is also great to use for static websites or webapps you are building to view offline.
Example
Here is an example of the LineGraph stack. This example uses sample maximum and minimum temperature data, which is also available for you to test within the stack. The box shadow effect is achieved using the free Shady stack.Setup
Install LineGraph into Stacks and RapidWeaver in the normal way. Start by setting the link to your CSV spreadsheet file (containing the graph data) in the stack settings. Once you've "fed" LineGraph some CSV data, you should see your line graph rendered in RapidWeaver Preview mode. You can continue to configure the style and behaviour of your generated line graph, in the stack settings. Mouseover each individual setting to see an informational tooltip about what it does. It is recommend that LineGraph is placed in simple webpages; outside of animation, toggle or sliding effects.Using data from Google Sheets
It is possible to create a spreadsheet with Google Docs, which you or a client are able to edit remotely. This data can be fed into LineGraph and used to render a line graph with on your website. Please note that this feature is not officially supported by Google, so there is a chance it may break or periodically become unavailable. Also to note, the loading of data from Google Docs can be very slow at times. There is typically a 5 minute delay between the spreadsheet being edited and the changes showing in LineGraph. So it would be wise to treat this functionality as "experimental" and not to buy LineGraph purely on it being able to do this! If you want to try it, the setup procedure is roughly as follows:- Create a new Google Sheet or import an existing spreadsheet.
- Be sure that the spreadsheet only contains numerical data (numbers). Other than the spreadsheet heading, words in columns or rows are not supported by LineGraph and risk breaking the graph.
- In the File menu on Google Sheets, click the option to publish to the web.
- Select the sheet and set the format to CSV.
- Copy the resulting URL. Use this in LineGraph, with its data source set to Custom.
- Preview the page. After short delay, the graph should hopefully render.
If no graph is shown, check the browser console for error messages. These may hold clues as to why your data is not showing. And a reminder again that changes made on Google Sheets may take several minutes before they become available in the CSV file, which LineGraph uses.
