Chart Connect

Demo: https://demo.wocode.com/chart-connect

Tutorial Videos

WIDGET PLACEMENT

• Place the widget where you would like it to appear on the page.
• If you would like the chart to display full width, set the row it’s placed in to be a full bleed row (Row > Design Tab > Enable Full Bleed Row).

WIDGET OPTIONS (CONTENT)

• Unique ID: A Unique ID must be entered when using multiple instances of the Chart Connect widget.
• Data Source: Select whether you wish to use a Local .CSV file or Google Spreadsheet to populate the chart connect. 
  
  We suggest using Google Sheets for your data source, as any changes made to the Sheet will be updated live on the site, without the need to enter the builder or republish the site.
  
  If you wish to use a local .CSV file, select that option in the Data Source dropdown, then click on the Linked to page menu. In the Linked to page menu, select the "File for download" option, then select your local .CSV file.
• Google Spreadsheet URL: Enter the URL of your Google Spreadsheet here. For detailed instructions on acquiring your spreadsheet URL, see the Acquiring Your Google Spreadsheet URL section below. If you’ve used the MuseThemes Chart Connect widget in the past, note that the URL is acquired differently for this widget.
• Google Sheets Data & Styling Template: This link opens the default chart connect template spreadsheet in a new tab. This Sheet is view-only, and you must make a copy in order to enter your own data. For detailed instructions on editing your Google Sheet, see the Editing Your Google Spreadsheet section below.
• Chart Type: This will change the type of chart layout the widget will display. There are 6 layout options: Bar, Line, Pie, Doughnut, Polar Area and Radar. 
• Display Chart Title: This setting allows you to display or hide the chart title.
• Chart Title: This is where you will enter the chart title.
• Axis and Tooltips Data Prefix: Adds a prefix to the data value on the chart axis and tooltip. For example, if you want your chart value to be shown as $200 instead of simply 200, then you would add the $ symbol into this field.
• Axis and Tooltips Data Suffix: Adds a suffix to the data value on the chart axis and tooltip. For example, if you want your chart value to be shown as 50¢ instead of simply 50, then you would add the letter ¢ into this field.
  
• Labels: Labels can be added to represent chart values. For example, if your chart values are supposed to represent income for 5 specific months, then you would add a label for each of those months.
  

  

• Add Empty Labels If Needed: This setting will add empty labels to the chart, labels are required in order to allow all the content from the spreadsheet to display. If this setting is disabled and there are not an equal number of labels within the widgets option panel, as there are in the spreadsheet, then not all the content from the spreadsheet will be able to display in the widget. It is recommended to keep this setting enabled at all times. 
• Enable Animations: This will enable or disable the entrance animation for the chart content.
• Animation Duration (ms): Sets the entrance animation duration.

WIDGET OPTIONS (DESIGN)

The Design tab of the widget contains extensive styling options. Almost every element of the chart can be customized. Many of these settings are labeled with their exact function and are self-explanatory, and will not be discussed individually here. However, there are a number of unique settings we will mention.

Widget Styling Tab

• Loader Color: This will set the color of the preloader that is seen as the Chart Connect widget is first loading on the page.
• Maintain Aspect Ratio: When enabled, this will force the chart to a specific width in order to maintain a size proportionate to the widget container. When disabled, it will allow the chart content to grow/shrink with the widget container.
• Chart Canvas Alignment: This sets how the chart content is aligned within the container when the Maintain Aspect Ratio option is disabled.

Chart Title Styling:

• Title Position: This sets the position that the chart title will be displayed, either top, bottom, left side or right side of the chart.
• Title Alignment: Sets the alignment of the chart title. The options start & end are used in place of left & right as the alignment will differ depending on whether the alignment is set to top/bottom or left/right of the chart.
  

  

Chart Legend Styling:

• Display Legend: This will enable or disable whether the chart legend is visible.
• Legend Position: This sets the position that the legend will be displayed; either top, bottom, left side or right side of the chart.
• Legend Alignment: Sets the alignment of the chart legend. The options start & end are used in place of left & right as the alignment will differ depending on whether the alignment is set to top/bottom or left/right of the chart.

Tooltip Styling:

• Enable Tooltips: This will enable or disable whether the tooltip is visible when hovering over chart data.
• Background: Changes the background color of the tooltip.
• Tooltip Padding: Adds padding around all content within the tooltip.
• Display Color Boxes: Enables or disables the color of the legend being displayed in the tooltip for the specific data being hovered.
• Color Box Padding: Adds padding to the right of the color box within the tooltip.
• Title Margin Bottom (ps): Adds a bottom margin to the tooltip title.
  

  
  

Line Chart Styling:

• Show Line:  This will enable or disable lines between the data dots when using the Line chart layout.
• Dashed Lines: Changes whether the lines are displayed as solid or dotted.
• Line Curve Tension: Adjusts how hard or smooth the lines curve between each data point on the chart. For the smoothest curves, we recommend the default setting of 3.
• Begin Chart Scale at Zero: If your spreadsheet's "Chart Values" column has no value that begins with 0, this setting when enabled, will force the chart to display zero on the bottom left scale. If disabled, then the scale will begin at the smallest number in the "Chart Value" column of the spreadsheet.
• Fill Under Line Area: This setting fills the spaces between each line with the color from the "Background Color" column, within the spreadsheet.

  
  

Bar Chart Styling:

• Bar Direction: Sets whether the bars are displayed vertically from the bottom, or horizontally from the left side of the chart.
• Group Data: When enabled, there will be a single bar displayed for each label. That bar will be divided into multiple colors that represent the different data for that label. When disabled, each label will have its data displayed separately as its own bar.
• Begin Chart Scale at Zero: If your spreadsheet's "Chart Values" column has no value that begins with 0, this setting when enabled, will force the chart to display zero on the bottom left scale. If disabled then the scale will begin at the smallest number in the "Chart Value" column of the spreadsheet. 
  

  

Pie / Doughnut Chart Styling:

• Arc Spacing (px): Applies spacing between the data on the chart. 
• Circle Circumference (deg): Sets how circular the chart data is displayed. An example is that 360 would display the chart as a full circle, whereas 180 would display the chart as a half circle.
• Initial Chart Rotation (deg): The angle in which the chart is displayed relevant to a circle. For example, if your circle circumference is 180deg (half circle), setting the initial chart rotation to 0 will display the chart vertically, whereas setting the chart rotation to 90 will rotate the chart and display it horizontally.

  

• Animate Rotation on Start: Applies an entrance animation to the chart.
• Animate Scale on Start: Applies an animated scale effect to the chart when the widget is loaded.

Polar Area Chart Styling:

• Circular:  Applies a round arc instead of using straight lines.
• Circle Circumference: Sets how circular the chart is displayed. An example is that 360 would display the chart as a full circle, whereas 180 would display the chart as a half circle.
• Animate Rotation on Start: Applies an entrance animation to the chart.
• Animate Scale on Start: Applies an animated scale effect to the chart when the widget is loaded.

Radar Chart Styling:

• Fill Inside Area: This setting fills the spaces within each line with the color from the "Background Color" column, within the spreadsheet.
• Dashed Line: Changes the lines within the chart from solid lines to dashed lines.
• Line Cure Tension: Applies a curve to the lines between each point on the chart.
• Point Hover Border Width (px): Changes the size of the points on the chart when they are hovered.

EDITING YOUR GOOGLE SPREADSHEET

• 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 Google Sheets Data & Styling Template link in the widget panel to open the template. Or click here.
• 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. A couple of notes on editing the spreadsheet:
• Spreadsheet Format: It is very important to maintain the original spreadsheet format for the first two rows. Spreadsheet data should only be added in rows 3 and below.
• Chart Values: Chart values are the values that will be displayed on the widget (ie: bars or dots, depending on which chart type is being used). Multiple chart values can be added for each label by using a semicolon between each value (ie: 200; 95; 65; 80; 90 )
  
• Adding Color: Colors can be added into the spreadsheet by using any of the following formats: rgba value, hex code, color name (ie: red).
• Multiple Colors / Assigning Colors: Multiple colors can be used in the spreadsheet. Each color will be separated by a semicolon (ie: #FFB75E; #93D38D). The order the colors are added in will correlate to the order in which the chart values are added. Meaning that the first color will be assigned to the first chart value, the second color to the second chart value and so on.
  
  For example, if your chart values were: 200; 95; 65
  
  and you wanted:
  
  200 to use: #ff605f
  95 to use:  #edc832
  65 to use: #ed329f
  
  Then within the column that you're adding colors, those hex codes would be added in this order: #ff605f, #edc832, #ed329f
  
  The only column that cannot accept multiple colors is the Hover Background Color column. If more than one color is added into this column, then the widget will automatically use the last color added to the field.

• 

• Please refer to the next section “Acquiring your Google Spreadsheet URL”. 

ACQUIRING YOUR GOOGLE SPREADSHEET URL

This section explains the very important process of acquiring the Google Spreadsheet URL, which is pasted into the widget options. Note that if you’ve used the Chart Connect widget from MuseThemes in the past, the process of acquiring the spreadsheet link is a little different. It must be acquired as described below.

• Click the green Share button in the upper right corner of the page.
  
• Under General Access set access to Anyone with the link.
• Next click the Copy Link button. This will copy the shareable link to your clipboard, at which point you can then paste this shareable link to the Google Spreadsheet field of your Chart Connect widget.
• Note that this is the only valid link to use with the widget. The browser URL or the URL provided when you publish your page will NOT work. The widget will display an error message when an invalid link is used.