Need to display charts on your site? Then Chart Connect is exactly what you need. Use a simple Google spreadsheet to enter data, and view the results in a beautiful, interactive chart. Like the other widgets in our Connect series, Chart Connect is perfect for providing remote management of live charts on your website.
Chart Connect features 5 chart types: line, horizontal and vertical bar, pie and donut. These stylish charts are fully responsive, and include animation, legends with live category filtering, and tooltips displaying pertinent data upon mouse hover.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.2: Fixes error in accessing Google Sheets data (08/26/2021)
1.1: Adds option to Bar Chart and Line Chart for using an X-Axis starting value of zero (02/17/2017)
Download the widget package and extract the .zip file. You will find a Muse library file, along with several .csv template files.
Once you’ve installed the library file, you will find 4 separate widgets in the library folder:
Bar Chart: A classic bar chart, displayable vertically or horizontally
Donut Chart: A circular chart with a custom-sized cutout in the center. Offers animation and a real-time filterable legend.
Line Chart: A non-linear line chart with x and y data points. Offers color fill with opacity below lines, as well as real time filtering.
Pie Chart: Same as Donut Chart, except solid with no center hole
Drag a widget from the library and drop into your project in Design mode.
The widget container represents the size of the chart when previewed or published. Size appropriately for your project.
These widgets are responsive. You many want to check all breakpoints to ensure that the widget is where you like, and sized appropriately.
Each widget is functional as soon as you drop it into Muse. Feel free to preview in browser to take a look.
Open the widget option panel.
If you plan to use multiple Chart Connect widgets on the same page, be sure that they have unique ID’s entered in the Unique ID field.
Choose a CSV File Type:
Google Spreadsheet - Using Google's Sheets web app, you can manage your charts remotely and update in realtime. Click the link at the bottom of the widget option panel to go to our Google Sheets web-based templates (the web versions are identical to the .csv files in the download package). See below for details on acquiring your Google Spreadsheet Keys and editing the web-based template.
Local File - This option uses a CSV file that can be saved and stored locally on your computer. CSV files can be edited using any spreadsheet editor such as Excel, Numbers, and Google's Sheets web app. The CSV files included with the widget are templates that can be updated however you like (please see guidelines on editing CSV files below)
The CSV files are where you will enter chart data: labels, values, colors, etc. The Line Chart is a bit different from the others in that the column labels are entered in the widget option panel. All other charts pull all data from the spreadsheets.
Unike other Connect series widgets, you will find color option settings in the spreadsheets. This is because the number of data components in the charts is variable. Use the color selection tool to choose a color, then copy and paste the hex code or RGBA value into the spreadsheet. There is a link to the color selection tool at the bottom of every widget option panel.
The Chart Setup section contains various settings unique to each chart type. Some settings to note:
Border Width: Border width always refers to the outline (similar to a stroke) of a chart component. These have unique color settings in the spreadsheets
Animation Settings - found in Donut And Pie Charts: When animation is enabled, the Donut and Pie Charts will animate when the page loads and when they come into view. This is handy on long scrolling pages.
Fill Under Line Area - Line Chart only: This setting creates a solid color fill under the lines in the chart. Since a solid fill option means that lower lines can be obscured from view, we've used RGBA color settings so that opacity can be used. When entering the 3-value RGB code into the spreadsheets, the 4th number is the opacity settings. The default setting is 0.75, wich is 75% opaque. "1" is fully opaque, while "0" is fully transparent.
The Styling section contains the basic style settings for the charts, along with the tooltips that are revealed upon hover.
Editing the web-based Google Spreadsheet templates
You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
Follow the link in the bottom of the widget panel to open the template.
The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
Name the new copy.
The new copy can now be edited.
When ready, you will need to publish the spreadsheet in order to use it with Sidebar Menu. Go to File > Publish to the web...
Click the "Web Page" dropdown and select comma-separated values (.csv).
Copy the long set of random characters in the browser's URL field, or in the link shown in the Publish To Web pop-up.
Paste this Google Spreadsheet Key into the Widget option panel in Muse (you will need keys for both the Content and the Presets spreadsheets).
Tips for editing CSV files
Once you've published your Google Spreadsheet, ANY change made to the spreadsheet will be updated on your website. This is handy and quick, though you will want to be careful to make sure that your changes are exactly what you want.
The data within the CSV must be entered carefully:
Spaces are not supported in most entries
Be careful if you're cutting and pasting (be sure not to include extra characters or spaces)
Do not create empty rows
In the Presets Spreadsheets, the only fields that need to be updated are the cells in the "option_value" column. Values in this column may be numbers or letter text. For basic enable/disable options, 1=enable, 0=disabled. We've built in dropdowns wherever possible for common variables.
Check your progress often while editing CSV files. Small errors such as spaces or typos can make it so that your sidebar menu does not appear. If you’re working with a local file, save and load the file into the widget, then publish to check for functionality. If you’re working in Google Sheets, simply preview your sidebar and refresh the browser to see ongoing updates. If you do have an issue, use the “undo” function in your spreadsheet editor to back up to a point where the widget was working.
Commonly Asked Questions
What is a .csv file?
A .csv file is a basic spreadsheet file that can be edited in Excel, Numbers, Google Sheets, or similar.
Should I use the web-based template, or the local file? What's the difference?
Ultimately, there's no difference in the functionality of the sidebar menu, whether you use the web template or the local template. Local files allow for traditional editing and backup in your favorite spreadsheet editor. The web template option allows for immediate remote updates for you or your client.