Graphly - API documentation

Graphly is designed to facilitate creating charts for your personal use or for your website dashboards. Learn everything about how to get started using our API below.

You should NEVER send a request from the client. Always send a request to our API from your server. This is due to the fact that we require a secret API key to authenticate your request.

Generate your API key

Using our Node Library

Install graphly-api library from NPM

npm install graphly-api

Add your secret API key to your .env file

Generate your API key

.env

GRAPHLY_API_KEY=YOUR_API_KEY_HERE

Example registering data to a chart (Using NextJS in this example)

route.ts

import {NextResponse} from "next/server";
import graphly from 'graphly-api';


export async function POST() {

    const response = await graphly.sendData({
        chartId: "3ee9fb71-9634-445b-aa0a-9b3b57eb4269", // You can find this in your chart configuration panel
        value: 1299,
        date: new Date(),
        dataKey: "sales",
        apiKey: process.env.GRAPHLY_API_KEY!,
    });
    
    if (response.error) {
        return NextResponse.json({ message: response.error }, { status: response.status });
    }

    return NextResponse.json(response.data, {status: response.status});
}

Example deleting data from a chart (Using NextJS in this example)

route.ts

import {NextResponse} from "next/server";
import graphly from 'graphly-api';


export async function POST() {

    const response = await graphly.deleteData({
        chartId: "3ee9fb71-9634-445b-aa0a-9b3b57eb4269", // You can find this in your chart configuration panel
        dataId: "a12c7d89-f54e-4bcd-b321-7e8f65dca982", // You can find this in your chart configuration panel
        apiKey: process.env.GRAPHLY_API_KEY!,
    })
    
    if (response.error) {
        return NextResponse.json({ message: response.error }, { status: response.status });
    }

    return NextResponse.json(response.data, {status: response.status});
}

Example fetching data from a chart (Using NextJS in this example)

route.ts

import {NextResponse} from "next/server";
import graphly from 'graphly-api';


export async function POST() {

    const response = await graphly.deleteData({
        chartId: "3ee9fb71-9634-445b-aa0a-9b3b57eb4269", // You can find this in your chart configuration panel
        dataId: "a12c7d89-f54e-4bcd-b321-7e8f65dca982", // You can find this in your chart configuration panel
        apiKey: process.env.GRAPHLY_API_KEY!,
    })
    
    if (response.error) {
        return NextResponse.json({ message: response.error }, { status: response.status });
    }

    return NextResponse.json(response.data, {status: response.status});
}

Using our API endpoints

Registering data to a chart
Send a POST request to our API endpoint at: https://www.graphly.tech/api/chart/data/add
Request data
- chartId
  You can find the ID of your charts inside their configuration panel at the top.
- value
  Here, you need to provide the value of the data to enter in the chart. Ex: 599 will equal $5.99 if the chart is set to display money, otherwise it will be 599.
- date
  The date for which you want to add the data. If you don't provide a date, the data will be added to the current date.
- dataKey
  The data key you want to add the data to. To manage your data keys, visit your specific chart configuration.
- apiKey
  This is your secret API key that will be used to confirm your request. You can find your API key here.
Example using NextJS with fetch
route.js
1export async function POST(req) { 2 try { 3 const response = await fetch("https://www.graphly.tech/api/chart/data/add", { 4 method: "POST", 5 headers: { 6 'Content-Type': 'application/json', 7 }, 8 body: JSON.stringify({ 9 chartId: "3ee9fb71-9634-445b-aa0a", 10 value: 599, 11 date: new Date(), 12 dataKey: "sales", 13 apiKey: "my-api-key", 14 }), 15 }); 16 17 if (!response.ok) { 18 return NextResponse.json({ message: "Error sending data" }, { status: response.status }); 19 } 20 21 return NextResponse.json({ message: "Data sent successfully" }); 22 } catch (error) { 23 return NextResponse.json({ message: "Error sending data" }, { status: 500 }); 24 } 25} 26
Deleting data from a chart
Send a POST request to our API endpoint at: https://www.graphly.tech/api/chart/data/delete
Request data
- chartId
  You can find the ID of your charts inside their configuration panel at the top.
- id
  You can find the ID of your data entry in the configuration panel of the specific chart.
- apiKey
  This is your secret API key that will be used to confirm your request. You can find your API key here.
Example using NextJS with fetch
route.js
1export async function POST(req) { 2 try { 3 const response = await fetch("https://www.graphly.tech/api/chart/data/delete", { 4 method: "POST", 5 headers: { 6 'Content-Type': 'application/json', 7 }, 8 body: JSON.stringify({ 9 chartId: "3ee9fb71-9634-445b-aa0a", 10 id: "8a4dec72-15b7-489c-bb22" 11 apiKey: "my-api-key", 12 }), 13 }); 14 15 if (!response.ok) { 16 return NextResponse.json({ message: "Error deleting data" }, { status: response.status }); 17 } 18 19 return NextResponse.json({ message: "Data deleted successfully" }); 20 } catch (error) { 21 return NextResponse.json({ message: "Error deleting data" }, { status: 500 }); 22 } 23} 24