Knowledge Base

⌘K
  2. Home
  4. Docs
  6. Knowledge Base
  8. Main Dashboard
  10. Widget Example JavaScript

Widget Example JavaScript

This guide will walk you through the process of creating a custom dashboard widget in MachinaTrader using JavaScript ES5 client-side code to integrate external data from APIs. In this example, we’ll create a cryptocurrency price tracker widget using data from the Coingecko API.

Prerequisites:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Access to a MachinaTrader account.

Step 1: Create a New Dashboard Widget

1. Log in to your MachinaTrader account.

2. In the MachinaTrader interface, navigate to the “Dashboards” section.

3. Create a new dashboard widget or select an existing one where you want to add your custom widget.

Step 3: Configure the HTML Element

1. In the configuration panel, provide a name and description for your element (e.g., “Crypto Price Tracker”).

2. In the “Content” section, paste the following code from the example below:

<style>
  #crypto-widget {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #f7f7f7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
  }

  #crypto-widget h2 {
    font-size: 1.5rem;
    color: #333;
  }

  #crypto-list {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
  }

  #crypto-list li {
    margin-bottom: 10px;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  #crypto-list li:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
  }

  #crypto-list span {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
  }

  #crypto-list span.price {
    color: #007bff;
  }
</style>
<div id="crypto-widget">
  <h2>Crypto Price Tracker</h2>
  <ul id="crypto-list"></ul>
</div>
<script>
  // Function to fetch and display cryptocurrency prices
  function fetchAndDisplayCryptoPrices() {
    var cryptoList = document.getElementById('crypto-list');

    // Array of cryptocurrency symbols to track
    var cryptoSymbols = ['bitcoin', 'ethereum', 'litecoin', 'ripple'];

    // Make an AJAX request to the CoinGecko API
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var cryptoData = JSON.parse(xhr.responseText);

        // Loop through the cryptocurrency data and display prices
        cryptoSymbols.forEach(function(symbol) {
          var listItem = document.createElement('li');
          var cryptoInfo = document.createElement('span');
          cryptoInfo.textContent = symbol.toUpperCase() + ': ';
          var priceSpan = document.createElement('span');
          priceSpan.textContent = '$' + cryptoData[symbol].usd;
          priceSpan.classList.add('price');
          cryptoInfo.appendChild(priceSpan);
          listItem.appendChild(cryptoInfo);
          cryptoList.appendChild(listItem);
        });
      }
    };
    xhr.open('GET', 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,litecoin,ripple&vs_currencies=usd', true);
    xhr.send();
  }

  // Add an event listener for when the DOM is ready
  document.addEventListener('DOMContentLoaded', function() {
    fetchAndDisplayCryptoPrices();
  });
</script>

4. Replace the CSS and JavaScript code in the provided template with your custom code as needed. Ensure that your JavaScript code fetches and displays the external data you want to integrate.

Step 4: Save and Preview

1. Save the configuration of the dashboard widget.

2. Reload the Dashboard to view your custom widget within the MachinaTrader dashboard. Ensure that it displays the external data correctly.

Step 5: Publish

1. Once you are satisfied with your custom widget and it displays the external data as expected, save the changes to your dashboard.

2. Optionally, you can share the dashboard with other MachinaTrader users by publishing it.

How can we help?