{"id":327,"date":"2025-03-13T10:57:58","date_gmt":"2025-03-13T10:57:58","guid":{"rendered":"https:\/\/documentation.iqonic.design\/graphina\/?p=327"},"modified":"2025-03-18T10:52:26","modified_gmt":"2025-03-18T10:52:26","slug":"how-to-fetch-dynamic-data-for-wordpress-charts-using-an-api","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/graphina\/how-to-fetch-dynamic-data-for-wordpress-charts-using-an-api\/","title":{"rendered":"How to Fetch Dynamic Data for WordPress Charts Using an API"},"content":{"rendered":"
\n

Introduction<\/strong><\/h4>\n\n\n\n

If you\u2019ve been following my blog, you know how much I love creating data visualization charts<\/strong> in WordPress. But what if you could fetch live data<\/strong> from an API without writing a single line of code?<\/p>\n\n\n\n

In this guide, we\u2019ll learn how to convert a static chart<\/strong> into a fully dynamic chart<\/strong> using an API<\/strong> as a data source.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n\n

How to Integrate an API with WordPress Charts<\/strong><\/h3>\n\n\n\n

Step 1 \u2013 Select a Chart<\/strong><\/h4>\n\n\n\n
    \n
  • Open Graphina \u2013 WordPress Chart Plugin<\/strong>.<\/li>\n\n\n\n
  • Choose the chart where you want to display live API data<\/strong>.<\/li>\n<\/ul>\n\n\n\n

    Step 2 \u2013 Change Data Source to Dynamic<\/strong><\/h4>\n\n\n\n
      \n
    • In the chart data settings<\/strong>, switch the source from \u201cManual\u201d<\/strong> to \u201cDynamic\u201d<\/strong>.<\/li>\n\n\n\n
    • If you see a \u201cNo Data Available\u201d<\/strong> message, don\u2019t worry\u2014it just means the data source isn\u2019t connected yet.<\/li>\n<\/ul>\n\n\n\n

      Step 3 \u2013 Connect an API<\/strong><\/h4>\n\n\n\n
        \n
      • In the Dynamic Data Options<\/strong>, select \u201cAPI\u201d<\/strong> as the data source.<\/li>\n\n\n\n
      • A URL input box<\/strong> will appear.<\/li>\n\n\n\n
      • Copy the API endpoint URL<\/strong> and paste it into the input box.<\/li>\n<\/ul>\n\n\n\n

        Step 4 \u2013 Handling API Authorization (Header Keys & Tokens)<\/strong><\/h4>\n\n\n\n
          \n
        • Some APIs require an API key<\/strong> or authentication token<\/strong> for access.<\/li>\n\n\n\n
        • In the API settings, enter the required header key<\/strong> and header token,<\/strong> if applicable.<\/li>\n\n\n\n
        • This ensures secure and authenticated access to external data sources.<\/li>\n<\/ul>\n\n\n\n

          Step 5 \u2013 Adjust Data Elements<\/strong><\/h4>\n\n\n\n
            \n
          • In the chart data settings<\/strong>, increase the data elements<\/strong> to match the API response.<\/li>\n\n\n\n
          • The chart will update automatically<\/strong>, reflecting the latest data<\/strong> from the API.<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n

            Key Benefits of Using an API for WordPress Charts<\/strong><\/h3>\n\n\n\n

            \u2705 Live Data Integration<\/strong> \u2013 Fetch real-time data without manual updates.
            \u2705 Seamless API Authentication<\/strong> \u2013 Use API keys and tokens for secure data access.
            \u2705 Instant Updates<\/strong> \u2013 Charts auto-refresh as new API data becomes available.<\/p>\n\n\n\n

            With these simple steps, you can easily integrate live API data<\/strong> into your WordPress charts and make them fully dynamic<\/strong>! \ud83d\ude80<\/p>\n\n\n\n

            How to add Header Key and Header Token<\/h2>\n\n\n\n
            \n