Skip to main content

Using Your Own Data

This section covers the methods and specifications to:

  • Initialise the widget in your site
  • Use the widget with your own data fed in

Create Widget Props and Parameters​

widget-props.js
const widgetProps = {
  key: CLIENT_KEY,
  parentElementSelector: ELEMENT_SELECTOR,
};

Replace CLIENT_KEY with the unique alphanumeric string that will be provided to you after successfully onboarding with us.

Replace ELEMENT_SELECTOR with the class or id of the element that will contain the widget.
(eg. ".hs-widget-class" or "#hs-widget-id")

Methods​

Once initialised, there are methods exposed by the Widget that can be used to render the graph visualisation.
We'll be focusing on the drawGraphWithCustomData method.

MethodParameters to supplyDescription
drawGraphWithCustomDataJSON graph data in this structure,
Widget Parameters		Renders the graph visualisation with the JSON data supplied. You can also use this method to "re-draw" the graph with new data based on new Widget Parameters supplied.
displayEmptyStateWidget Props, message (string, optional)Renders an empty state graphic with the text from the message. If no message is supplied, the empty state will show a default message.
loadmessage (string, optional)Renders a loading graphic animation with the text from the message. If no message is supplied, the loader will show a default message.

Initialise the Widget​

The following code snippets is used to initialise the widget.

// script to load the widget file
async function initWidget() {
  try {
    // Fetch both the widget script and JSON data
    const [scriptResponse, dataResponse] = await Promise.all([
      fetch(WIDGET_SCRIPT_URL),
      fetch(YOUR_DATA_URL),
    ]);

    const scriptContent = await scriptResponse.text();
    const data = await dataResponse.json();

    const script = document.createElement("script");
    script.text = scriptContent;
    document.body.appendChild(script);

    // initialise a widget instance from the script
    const widget = new hs_widget(widgetProps);

    // use the drawGraphWithEndpointData method to generate graph using your own data
    widget.drawGraphWithCustomData(data, widgetParametersCustomData);
  } catch (error) {
    console.log(error);
  }
}
info

Use widget.drawGraphWithCustomData instead of widget.drawGraphWithEndpointData
Widget Parameters are not needed when using your own data.

To use the Handshakes Graph widget on your web page, insert the above code snippets within a <script> tag located just before the ending <body> tag of the web page. For example:

index.html
// example of inserting the snippet onto your web page
<html>
  <head></head>
  <body>
    <script type="module">
      import { widgetProps } from "./src/data/widget-props.js";
      import { widgetParametersCustomData } from "./src/data/widget-parameters.js";

      async function initWidget() {
        try {
          // Fetch both the widget script and JSON data
          const [scriptResponse, dataResponse] = await Promise.all([
            fetch(WIDGET_SCRIPT_URL),
            fetch(YOUR_DATA_URL),
          ]);

          const scriptContent = await scriptResponse.text();
          const data = await dataResponse.json();

          const script = document.createElement("script");
          script.text = scriptContent;
          document.body.appendChild(script);

          const widget = new hs_widget(widgetProps);
          widget.drawGraphWithCustomData(data, widgetParametersCustomData);
        } catch (error) {
          console.log(error);
        }
      }

      initWidget();
    </script>
  </body>
</html>

Data Structure

To be able to have your data displayed in the Handshakes Graph Widget, it will have to be structured in a way that the widget can consume.
The JSON data fetched from YOUR_DATA_URL should be in this format.