Charts

Download

Before installing Charts onto your computer, you must first download it from the NimbleHost website.

After completing a purchase on the NimbleHost website, we will provide two ways for you to download your items:

  • Immediately after the sale is completed, you will be redirected to a special page with a download link for each item you purchased. You can use those download links to download each item to your computer.
  • After the purchase is completed, we will send you an email to the address you specified during payment. That email contains download links where you can download each item to your computer.

Install

  1. Locate the file you downloaded to your computer. It will most likely be in your Downloads file, and will be called "Charts-v1.0.0.dmg" or similar.3187
  2. Double-click on that file, and a new Finder window should appear displaying the contents of your download. If a new Finder window does not appear (if you're using Mac OS X Lion it may not automatically display), click on the Finder icon located in the Dock. The Finder window, once you've located it, should look similar to the image shown to the right here.
  3. In that new Finder window you will see a file called "Charts.stack", shown as a yellow stack icon. If the icon is a folder, rather than a yellow stack icon, see this article on the Yourhead Software support site for Stacks.
  4. Double-click on that file, and it will automatically be installed for you.
  5. Restart RapidWeaver.

After following these steps, the next time you start RapidWeaver Charts will be located in the Stacks library, which is accessible from any Stacks page.

Updating

In Stacks 2, update notifications are displayed with a small red symbol in the lower right corner of the Charts icon in the Stacks Library. Once that red symbol has appeared, select Charts, then apply the update by clicking on the small gear icon in the lower right corner of the Stacks Library, and selecting "Install Update".

Please Note: In Stacks 2, updates may take a few minutes to appear. According to Isaiah, the developer for Stacks, this is by design, so that checking for updates doesn't interrupt your workflow. You may need to restart RapidWeaver before the update will show up, and it may take 5-10 minutes before displaying.

Step 1

After installing the Charts stack, restart RapidWeaver so that it appears in your Stacks Library. Then select the Stacks page where you want the chart displayed, locate the Charts stack in your Stacks Library, and drag and drop it onto your Stacks page.

Step 2

Add your data file to the Resources section in RapidWeaver 5. The data file should be in CSV format, which Microsoft Excel, Apple Numbers and similar programs can all export spreadsheets into. If you want to display a Meter Gauge chart, the data file is optional.

  • Note: Use the data.csv file included with your download file (located in the Extras folder) for a template of what your data file should be structured like.

Once you've specified your CSV file, be sure you've selected whether it is located in RW Resources, or if you've specified a relative or absolute URL to the CSV file you want to use. More information about the "Relative URL" and "Absolute URL" options is explained in the Customizable Options support article.

Step 3

Make sure the Charts stack is selected in your Stacks page, so that the stack options are displayed. Select the type of chart you want to display (Bar, Donut, Line, Meter Gauge, and Pie), then specify the data file you added in Step 2 above (unless you want to use a Meter Gauge chart).

  • Note: If you added your data file to a folder in Resources, you must include the folder name, followed by a forward slash, then the data file name.

The Charts stack from NimbleHost is very powerful and includes a wide variety of options for customization. Some of these options are general in nature, as they can be applied to any type of chart. Other options are specific to a certain type of chart, and have their own labeled section.

General Options

The sections labeled "Charts - Configuration", "Charts - Legend", and "Charts - Layout & General Colors" are all general options that can be applied to any type of chart.

Charts - Configuration

This section contains the main settings that much be adjusted every time you add the Charts stack to a Stacks page in RapidWeaver.

3188

​The most important settings in this section are the "Chart - Type", where you choose which type of chart will be displayed, and the "Data File" field, which specifies the file containing the data that Charts will convert to a nice looking graph.

  • Note: If you select a Meter Gauge chart for the "Chart - Type" setting, a data file is not required, as all its options can be configured in stack settings.

With v2.0 of Charts you can now specify a data file at a relative or absolute URL in the "File Location" setting.

A relative URL is used when you have a file located on your server in a different folder from the current page. It could be in a sub-folder of the current page, or in a completely separate folder farther up the hierarchy.

When using a relative URL you'll need to specify the path to that file. For example, if your data file is in sub-folder of the current page called "files", and your data file is called "data.csv", the relative path to that file would be:

files/data.csv

If, however, the data file is two levels farther up the hierarchy, in a directory called "info", the relative path to that file would be:

../../info/data.csv

The "../" portion above tells the web browser to go up one level in the folder hierarchy. In our example we needed to go up two levels, so that portion is used twice.

An absolute URL is one that includes the "http://" portion. You'll want to use this if the data file you'd like to use is located on a different website completely (though you can also use it to specify a data file on the same site where you will be displaying your chart).

For example, if your website where the chart will be displayed is "yourdomain.com" and the data file you want to use is located on a complete separate site, like "http://domaintoaccess.com/resources/files/data.csv", then you would enter that entire URL for the data file in Charts, like so:

http://domaintoaccess.com/resources/files/data.csv

Be sure to also select the correct File Location in stack options, located in this same "Charts - Configuration" section.

Charts - Legend

This section contains settings for the legend that can be displayed with your chart. The legend can be toggled on and off, with options to adjust its location on the chart.

3189

The "Horizontal Offset" and "Vertical Offset" options specify how much space should be between the legend and the edges of the chart. Use larger values to increase the space, and smaller values to decrease the space.

Charts - Layout & General Colors

This section allows for customization of the chart's general appearance, including background, border, title, gridlines, and tick colors, as well as border width adjustments and toggles for the x-axis and y-axis gridlines.

3190

Please note, when selecting the "Transparent Background" option, IE8 and below may not display the chart background as transparent.

Data Set Colors

This section controls the color of the content that is displayed in the chart. For example, when selecting a Line chart, the color of the line shown on that chart is controlled by the "Data Set 1" color option.

3191

Some charts, particularly Donut and Pie charts, can display multiple colors. For example, each slice in a Pie chart is a different color, and the slice colors are customized in this section.

The first slice's color in a Pie chart is selected with "Data Set 1", the second slice by "Data Set 2", the third slice by "Data Set 3", etc. Likewise for Donut charts.

Bar and Meter Gauge charts can also display multiple colors depending on the options selected, and the same principle applies with these chart types.

​The first bar's color in a Bar chart is selected with "Data Set 1", the second with "Data Set 2", etc. Likewise, for Meter Gauge charts, the first interval's color is selected with "Data Set 1", the second with "Data Set 2", etc.

Negative Series Colors

When using Bar charts you have the option of displaying negative values with a different set colors from those specified in the "Data Set Colors" section.

3192

This can be useful as oftentimes you may want to draw attention to negative values depending on the type of data you are displaying, i.e., financial or sales-related numbers.

If you'd like to specify a different set of colors for negative values, you can do so in this section, by checking the "Use negative color values" option. After doing so, the color options available will slide into view.

With the Charts stack from NimbleHost you can choose from several different chart types: Bar, Donut, Line, Meter Gauge, and Pie. These chart types are listed in the "Chart Type" option listed in the "Charts - Configuration" section. After choosing the type of chart you want to display there are additional chart-specific options you may also want to configure, and are detailed below in alphabetical order.

Bar Charts

By default all the bars in a Bar chart are shown in the same color. If you'd like each bar to have its own color, check the "Vary individual bar color" option. Bar colors are specified in the "Data Set Colors" section. You can also select to have the value for each bar displayed via the "Display point labels" option, as well as to have bars with negative values displayed below zero.

3197

Donut Charts

For Donut charts you have the option to add some space between each slice, called the "Slice Margin". Increasing this number will increase the amount of space between each slice.

3193

You can also choose to only show the border for each slice, by unchecking the "Fill in slices" option. Slices in a Donut chart are displayed in different colors, which are controlled in the "Data Set Colors" section. ​

Line Charts

With Line charts there are several options to choose from. The "Show Line" checkbox controls whether a line is drawn between the points on the graph. If you only want to display the data points on your chart, uncheck this option.

3196

If the Line is displayed, you can choose to smooth the angles created by connecting the data points. To do this, check the "Smooth Line" option. The "Line Style" can also be customized to be dashed or dotted.

You can also choose to display the value of each point on the line chart via the "Display point labels" option.

Additionally, the data points for the line have a number of display options listed in the "Point Style" drop down: Circle, Dash, Diamond, Plus, Square, X, Filled Circle, Filled Diamond, and Filled Square. Choose the style which best suits your site here.

Meter Gauge Charts

The Meter Gauge is the only chart type that does not require a data file. If no data file is specified the Charts stack will use the values specified in the "Min Value", "Max Value" and "Measured Value" fields to create the chart.

3195

The "Min Value" is the leftmost value on the gauge, while the "Max Value" is the rightmost value on the gauge. The "Measured Value" is where the meter's arm points to.

If a data file is specified, the Charts stack will use the value it finds there for the "Measured Value". The rest of the values it needs will be taken from the "Meter Gauge Chart Options" section.

The "Intervals" field is used to specify colored sections for the Meter Gauge. The most common use for Intervals is to make it easier to understand what values are extremes.

For example, if the "Min Value" is 0 (zero) and the "Max Value" is 100, you may want the section between 80 and 100 to be displayed in a red color to help visually indicate that range as being very high. Likewise, you may want the section between 0 and 20 to be green to help visually indicate that range as low.

In the above example, you would set the "Intervals" value to the following: 20,80 There's no need to specify the "Min" or "Max" value of the Meter Gauge in the "Intervals" field, as that is already understood by the Charts stack.

The Label for the Meter Gauge helps provide context for the chart, and can tell viewers what is being measured. For example, if your Meter Gauge chart is being used to display the speed of a car, you could enter "Mph" or "km/h" as the "Label" to indicate if the value is miles per hour or kilometers per hour.

Pie Charts

Similarly to the Donut chart above, Pie charts have the ability to add space between the slices shown, which is controlled by the "Slice Margin" value.

3194

Pie charts have an additional option when choosing to show the slice with just a border, rather than a solid color. When the "Fill in slices" option is unchecked, another option will appear allowing you to set the width of the slice border.

As with Donut charts, the color of each slice shown in a Pie chart is specified in the "Data Set Colors" section.