Guide to using Custom Widgets with Excel

We have a handful of visualizations only available in our Custom Widgets:

If you're not a programmer but want to use one of these widgets to display data on your dashboard, this article is for you! We'll use a basic Excel spreadsheet to create two example Custom Widgets, breaking down the process into easy, manageable steps.

Note

If you're not an Excel user or have some programming experience, you may also be interested in an alternative method of pushing data to Custom Widgets from a Google Sheet.

Building a custom Pie Chart

Note

Though Pie Charts are a commonly requested visualization, we don't really recommend using them for a variety of reasons.

Example_Pie_Charts.png

To create a Pie Chart using Custom Widgets with Excel, follow these steps:

Step 1: Create the Excel spreadsheet with XML tags

  1. Navigate to the Geckoboard API Docs.
  2. Select XML from the top left drop down as this format works best for this method of creating Custom Widgets.
  3. Navigate to the Pie Chart widget and copy the XML example at the right of the screen, or copy it from the following code block:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <item>
    <value>100</value>
    <label>May</label>
    <color>13699c</color>
    </item>
    <item>
    <value>160</value>
    <label>June</label>
    <color>198acd</color>
    </item>
    <item>
    <value>300</value>
    <label>July</label>
    <color>60b8ec</color>
    </item>
    <item>
    <value>140</value>
    <label>August</label>
    <color>a4d7f4</color>
    </item>
    </root>
  4. Paste the XML example into cell A1 of a blank Excel spreadsheet.XML_to_spreadsheet.png
  5. Format the spreadsheet so that each XML tag is in its own cell. The data between each set of tags should also be in its own cell:Format_spreadsheet.png
  6. Now it's time to change the example data in between the XML tags to your own data.

    Tip

    To add another Pie Chart segment, copy and paste everything from <item> to </item>, making sure that the </root> tag stays at the very end of your file.

    Tip

    To delete a Pie Chart segment, delete everything from <item> to </item>.

    In the example below, we've increased the Pie Chart to 6 segments by adding 2 extra items.Create_pie_chart_segment.png

Step 2: Save and upload your file

  1. Go to File > Save As. Give your file a meaningful name and change the File Format to Tab Delimited Text (.txt).Save_file.png
  2. Choose an online location to save your Excel file to and click Save.

    In this example we're saving the file to Dropbox. Learn more about saving to Dropbox.
  3. You'll be prompted with the message shown below. Click Continue.Excel_Message_Box.png
  4. Make a note of the public URL of the .txt file you just saved, as you'll need it for the next step.

Step 3: Create a Custom Widget in Geckoboard

  1. From your Geckoboard dashboard, click Add widget.
  2. Navigate to Custom Widgets and select Pie Chart.
  3. Specify your desired widget Title.
  4. Leave the method as Polling

    In the URL Data feed field, paste the URL of the .txt file you just created and saved in Step 2.
  5. Click Add widget.Add_pie_chart_widget.png
  6. View the resulting Pie Chart, shown below in both our Dark and Light themes.Example_Pie_Charts.png

Step 4: Update the data and the Custom Widget

  1. From Excel, go to File > Open.
  2. Open your .txt file from the online location where you saved it in Step 2.
  3. Excel's Text Import Wizard will appear. Click Finish straight away without going through the steps.Text_import_wizard.png
  4. Update the data in your file as necessary.Update_data_in_file.png
  5. Go to File > Save.
  6. When prompted by the popup message that appears, click Continue.
  7. Your Geckoboard Pie Chart dashboard will immediately reflect the changes you just made.Pie_chart_updated.png

Building a Custom Mapping Widget

The Custom Mapping widget provides a way to display geographical locations as points on a map. Each Mapping widget is configured for a particular region of the world, include the entire world map. Points that are located outside the bounds of the chosen region will simply be ignored.Custom_Mapping_Widget.png

Locations may be specified as:

  • Latitude/Longitude pairs.
  • City names.
  • Hostnames.
  • IP addresses.

To create a Custom Mapping Widget with Excel, follow these steps:

Step 1: Create the Excel spreadsheet with XML tags

  1. Navigate to the Geckoboard API Docs.
  2. Select XML from the top left drop down.
  3. Navigate to the Mapping widget and copy the XML example at the right of the screen, or copy it from the following code block:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
    <points>
    <point>
    <city>
    <city_name>London</city_name>
    <country_code>GB</country_code>
    </city>
    <size>10</size>
    </point>
    <point>
    <city>
    <city_name>San Francisco</city_name>
    <country_code>US</country_code>
    <region_code>CA</region_code>
    </city>
    </point>
    <point>
    <latitude>51.526263</latitude>
    <longitude>-0.092429</longitude>
    <color>d8f709</color>
    </point>
    <point>
    <latitude>-33.94336</latitude>
    <longitude>18.896484</longitude>
    </point>
    <point>
    <host>geckoboard.com</host>
    </point>
    <point>
    <ip>178.125.193.227</ip>
    </point>
    </points>
    </root>.
  4. Paste the XML example into cell A1 of a blank Excel spreadsheet.
  5. This example gives all the possible options for entering locations: latitude/longitude pairs, city names, hostnames or IP addresses.

    Decide on the method(s) you'd like to use and delete the rest from <point> to </point>.
  6. Format the spreadsheet so that each XML tag is in its own cell. The data between each set of tags should also be in its own cell:Format_spreadsheet_2.png
  7. Now it's time to change the example data in between the XML tags to reflect your own data.

    Tip

    To add another point to the map, copy and paste everything from <point> to </point>, making sure that the </points> and </root> tags stay at the very end of your file.

    Tip

    To specify the size and/or color of a point, place this information between the <point> </point> tags but outside of <city> </city> tags, as shown in the example below. Click here for more details on sizes and colors.

    In the example below, we've added 10 cities to the map and specified the color and size of each point.Create_points_on_map.png

    Note

    The XML code from the screenshot above can be found here in case you would like to copy it and paste it into your Excel spreadsheet.

    </div

Step 2: Save and upload your file

  1. Go to File > Save As. Give your file a meaningful name and change the File Format to Tab Delimited Text (.txt).Save_file.png
  2. Choose an online location to save your Excel file to and click Save.
  3. You'll be prompted with the message shown below. Click Continue.
  4. Make a note of the public URL of the .txt file you just saved, as you'll need this in the next step.

Step 3: Create a Custom Mapping Widget in Geckoboard

  1. From your Geckoboard dashboard, click Add widget.
  2. Navigate to Custom Widgets and select Mapping.
  3. Specify your desired widget Title.
  4. Leave the method as Polling

    In the URL Data feed field, paste the URL of the .txt file you just created and saved in Step 2.
  5. Click Add widget.Add_mapping_widget.png
  6. View the resulting Mapping Widget, shown below in both our Dark and Light themes.Custom_Mapping_Widget.png

Step 4: Update the data and the Custom Widget

  1. From Excel, go to File > Open.
  2. Open your .txt file from the online location where you saved it in Step 2.
  3. Excel's Text Import Wizard will appear. Click Finish straight away without going through the steps.Text_import_wizard_2.png
  4. Update the data in your file as necessary (in this example we've changed the color and size information).Update_data_in_file_2.png
  5. Go to File > Save.
  6. When prompted by the popup message that appears, click Continue.
  7. Your Geckoboard Mapping widget will immediately reflect the changes you just made.Mapping_widget_updated.png
Was this article helpful?

Awesome! 👍  Thanks so much for your feedback!