How to Visualize Cassandra Data in Python with Flask web framework And Apache Echarts Js library

---

• Home
• Catagories
• About
• Contact
• Privacy-policy

---

Apache cassandra NOSQL Database

Apache Cassandra Is an open-source NOSQL database used to manage large amounts of data.It is well known for high scalability, performance, and availability. The Cassandra ecosystem includes a range of third-party Cassandra projects, tools, products, and services for end users, like cloud computing and Kubernetes.
Official Web page Apache Cassandra
In today's world, data visualization plays a vital role in providing more data insights. As we know, Apache Cassandra is a very powerful columnar database that holds vast amounts of data sets. In order to visualize more insights out of large datasets, we can use another Apache tool that is useful for a wide variety of data visualizations.
Download Apache Cassandra

Apache ECharts Library for Data Visualization

Apache ECharts is a powerful interactive charting and data visualization library for web browsers. allows developers/users to render interactive charts/graphs and visualizations with less amount of HTML source code. It is a lightweight canvas library written in Javascript.
Apache ECharts Home
Download Apache Echart resources
Now, how do I render the data from the Cassndra database table into Echarts? The solution is to build a web-based application that allows communication and data transfer between the frontend view and the backend. we can choose from wide variety of web development scripting and programming languages or frameworks like PHP, JSP, Python, etc.
In this article, I will show that by using the Python flask framework with the Apache Cassandra datasax connector, we can establish a communication channel between the Python and Cassandra database data.
Python Flask offocial Home Page
The Python flask is a popular micro web development framework for WSGI apps; it is a lightweight web application development framework to build complex applications using a rapid application development process.

Steps to visualize data from Cassandra Database to Apache Echarts using Python Flask:

• Install Apache Cassandra

To install apache Cassandra, you can use the following commands on Ubuntu terminal:


Installing Cassandra using the Docker image:

cassandra - Official Image Docker Hub
Pull latest cassandra installer image using following command:


  
docker pull cassandra:latest
  


Run the cassandra Docker image using following command:


  

docker run --name cass_cluster cassandra:latest
  


Start the cassandra from Docker image using following command:


  
docker exec -it cass_cluster cqlsh
  




Installing Cassandra using the binary tarball:

Download binary package using following command:


  
 curl -OL http://apache.mirror.digitalpacific.com.au/cassandra/4.0.0/apache-cassandra-4.0.0-bin.tar.gz 
  


Unpack the Installer from zip file using following command:


  
  tar xzvf apache-cassandra-4.0.0-bin.tar.gz
  


start cassandra using following command:


  
 cd apache-cassandra-4.0.0/ && bin/cassandra 
  


connect to database cassndra shell using following command:


  
  bin/cqlsh
  




Installing the Cassandra using Debian packages:

Check Cassandra sources list using following command:


  
 echo "deb [signed-by=/etc/apt/keyrings/apache-cassandra.asc] https://debian.cassandra.apache.org 41x main" | sudo tee -a /etc/apt/sources.list.d/cassandra.sources.list
deb https://debian.cassandra.apache.org 41x main 
  


Download cassandra trusted GPG keys using following command:


  
  curl -o /etc/apt/keyrings/apache-cassandra.asc https://downloads.apache.org/cassandra/KEYS
  


Update apt sources and install cassandra using following command:


  
  sudo apt-get update
sudo apt-get install cassandra
  




Installing the Cassandra using RPM packages:

Update RPM sources and install cassandra using following command:


  
  sudo yum update
sudo yum install cassandra
  


Start cassandra service using following command:


  
sudo service cassandra start  
  




Create keyspace and tables in cassandra DB

Use cassandra cqlsh shell on ubuntu terminal to create keyspaces and tables.
Navigate to the Cassandra/bin directory and use following command to start the Cassandra cluster:


Start Cassandra shell CQLSH in terminal:


Create Keyspace and Use keyspace to create Table in it:


Create table structure to store data


Insert Data/Records into Table


View/Select inserted data from table



• Install a code editor like PyCharm or Vscode.

Download Pycharm IDE for Linux
Download VSCODE editor for Linux



• Create python web Application directory with virtual environment

create new python web Application project in IDE,and also create virtual environment for python interpreter


Flask web application directory structure for the project looks like:



• Install python packages- Flask, Apache Cassandra-driver

Use following commands in terminal window to install packages for web application development Flask and Cassandra driver.


  
    pip install flask cassandra-driver
  


Flask to create web application and Cassandra driver act as connector between web app backend and Cassandra data store.


• Source files for flask application

Flask Web minimal-application development
Create config.py file with following parameters:
CASSANDRA_CONTACT_POINTS = ['127.0.0.1'] to specify the local cluster.
CASSANDRA_PORT = 9042 to bind app with the cluster port.
CASSANDRA_KEYSPACE = 'chartdata' to bind app with the keyspace from cluster.
Create __init__.py file for flask web Application with following parameters:
Required Packages/libraries for flask Cassandra web application.
Flask app initialization : To create the flask application object
Cassandra initialization : To configure Cassandra connector with cluster and keyspace.
Application url routes : To access application in browser using URL/route
Application run method : To start/run application and host it on url 127.0.0.1:5000


  
from flask import Flask,render_template
from cassandra.cluster import Cluster
from cassandra.query import SimpleStatement

# Flask app initialization
app = Flask(__name__)
app.config.from_pyfile('config.py')

# Cassandra initialization
cluster = Cluster(app.config['CASSANDRA_CONTACT_POINTS'], port=app.config['CASSANDRA_PORT'])
session = cluster.connect()
session.set_keyspace(app.config['CASSANDRA_KEYSPACE'])

# application url route
@app.route('/fetch_data', methods=['GET'])
def fetch_data():
    query = "SELECT * FROM test_data"
    statement = SimpleStatement(query)
    rows = session.execute(statement)
    catagory=[]
    amount=[]
    for row in rows:
        catagory.append(row.category)
        amount.append(row.amount)
    return render_template("charts.html",catagory=catagory,amount=amount,chart_type="bar")

# Run the Flask app
if __name__ == '__main__':
    app.run(debug=True)

  


In the source code shown above, we have included a method with the name fetch_data to perform the following operations: Select data from table test_data of configured keyspace chartdata.
Create a list of the category and amount objects from table data to pass as arguments to the Jinja template for graph/chart.
return html template view with chart arguments to display bar chart.


• Create Jinja HTML template file "charts.html" and include EChart Java script CDN source

Jinja palletsprojects official web page
In this web application, our aim is to access data from Cassandra keyspace and display it in the form of a chart using the Echart library on the web page. to achieve this objective, we need to create Jinja template structure with the CDN source from Echart.

  
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'ECharts Example'
        },
        tooltip: {},
        legend: {
          data: ['Mycharts using Echart']
        },
        xAxis: {
          data: {{ catagory | tojson }}
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: {{ chart_type | tojson  }},
            data: {{ amount | tojson }}
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

  


In this source, we have used the "echarts.min.js" CDN script source to create chart objects on the HTML web page. I have passed arguments from url route fetch_data to this template.
jsdelivr official Apache Echarts library CDN
jinja placeholders to display the chart data are:
{{ catagory | tojson}}: As an X-axis data element.
{{ chart_type | tojson}} : To specify chart type, ex-bar, line, scatter, and many more
{{ amount | tojson}}: As Y axis data element.
Note: Here, if you want to render the various types of charts from the Echart library, you need to follow the required chart options, components, and data elements to achieve this. You can refer to official chart examples from the Apache Echarts library official website.
Apache Echarts official Examples

• Render chart data on the web page

To view the chart result run flask application and open url "http://127.0.0.1:5000/fetch_data" in web browser.

So with the use of Apache Echarts Library and Python Flak application, we can visualize data from the Cassandra database on the web page in an interactive and dynamic way to improve the user experience and to represent more data insights.

Some useful resources
Cassandra installation official documentation
Download latest Python Here
Download Ubuntu Linux Here