Introducing Adashta: Server-Side Real-Time Charting & More

We are thrilled to announce the launch of Adashta, an advanced SDK designed to simplify real-time communication for developers. With Adashta, you can focus on your core business logic while we handle the intricacies of real-time data streaming. Our goal is to make it easier than ever to integrate real-time functionalities into your applications.

Why Adashta?

In the ever-evolving landscape of web development, real-time communication has become a critical component for delivering dynamic and responsive user experiences. Whether you're building a live data dashboard, a collaborative tool, or a real-time notification system, Adashta has you covered.

Adashta Charts

One of Adashta's standout features is Adashta Charts, a server-side charting solution that enables you to create real-time charts with little to no frontend coding. With Adashta Charts, you can:

Generate various chart types, including line, bar, and pie charts.
Update charts in real-time with new data from server.

Getting Started

Server-Side Installation and Initialization

To get started with Adashta on the server side, follow these simple steps:

Install Adashta via npm:
```
npm install adashta
```

Initialize Adashta:

const { Adashta } = require('adashta');

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: '3011'
});

const loadAdashta = async () => {
  adashta.on('connection', async (clientId) => {
    console.log('Client connected', clientId);
  });

  adashta.on('disconnection', async (clientId) => {
    console.log('Client disconnected', clientId);
  });
};

loadAdashta();

Client-Side Integration

Include Adashta SDK in Your HTML:

<script type="module">
  import { Adashta } from 'https://cdn.skypack.dev/adashta-js';
</script>

Initialize Adashta in the Client:

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: 3011
});

No extra configuration is needed on the client side. Adashta will automatically connect to the server and handle real-time communication between the server and client.

Creating Real-Time Charts

Wooho! You're all set up with Adashta on the server and client sides. Now, let's see how you can create real-time charts with Adashta Charts.

Define Your Chart:

const chart = {
  chartId: 'dummy-company-stock-chart',
  querySelector: '.chart',
  chartData: {
    type: 'line',
    data: {
      labels: ['Day 1'],
      datasets: [{
        label: 'Dummy Company Stock Price',
        data: [350],
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          title: {
            display: true,
            text: 'Share Price ($)'
          }
        },
        x: {
          title: {
            display: true,
            text: 'Days'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 10,
          }
        }
      }
    }
  }
};

Send Chart Data to Client:

await adashta.charts().produce(clientId, chart);

Update Chart Data:

chart.chartData.data.labels.push(`Day ${days}`);
chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
await adashta.charts().produce(clientId, chart);

Complete Example:

const { Adashta } = require('adashta');

const adashta = new Adashta({
  adashtaHost: 'localhost',
  adashtaPort: '3011'
});

const loadAdashta = async () => {
  const clientIdInterval = {};
  adashta.on('connection', async (clientId) => {
    const chart = {
      chartId: 'dummy-company-stock-chart',
      querySelector: '.chart',
      chartData: {
        type: 'line',
        data: {
          labels: ['Day 1'],
          datasets: [{
            label: 'Dummy Company Stock Price',
            data: [350],
            borderWidth: 2
          }]
        },
        options: {
          scales: {
            y: {
              title: {
                display: true,
                text: 'Share Price ($)'
              }
            },
            x: {
              title: {
                display: true,
                text: 'Days'
              },
              ticks: {
                autoSkip: true,
                maxTicksLimit: 10,
              }
            }
          }
        }
      }
    };

    await adashta.charts().produce(clientId, chart);
      let days = 2;
      clientIdInterval[clientId] = setInterval(async () => {
        chart.chartData.data.labels.push(`Day ${days}`);
        chart.chartData.data.datasets[0].data.push(getRandomInt(300, 800));
        await adashta.charts().produce(clientId, chart);
        days++;
      }, 2000);
  });

  adashta.on('disconnection', async (clientId) => {
    clearInterval(clientIdInterval[clientId]);
    delete clientIdInterval[clientId];
    console.log('Client disconnected', clientId);
  });
};

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

loadAdashta();

Run Your Adashta Server:
```
node index.js
```
Open Your HTML File in a Browser: HTTP server is required to serve the HTML file. You can use http-server or any other HTTP server of your choice.

With Adashta, integrating real-time charts into your application has never been easier. You can dynamically update charts with new data, providing users with up-to-the-minute information.

Join the Adashta Community

Adashta is an open-source project, and we welcome contributions and feedback from the developer community. If you have any questions or suggestions, please feel free to reach out to us at hello@adashta.co. You can also contribute to the project by visiting our GitHub repository.

We are excited to see how you will use Adashta to create engaging, real-time experiences for your users. Thank you for choosing Adashta, and happy coding!

Feel free to share your thoughts and experiences with Adashta in the comments below. We're eager to hear how Adashta is making a difference in your projects!

Blog