Angular is a great choice for data management and display within your Python app. Take it a step further with Kendo UI for Angular.
As a Python developer, you often deal with data and need efficient ways to visualize and manage it. The Angular UI framework has emerged as a great choice for a rich and easy development experience. Read more about why in “How to Use Angular to Create Next-Level UI for Python Apps (and Why Do It).”
Many developers extend these gains with component libraries such as the popular Kendo UI for Angular. In this tutorial, we’ll explore how to use Kendo UI for Angular to create a data view that showcases advanced features such as grids and charts. By the end, you’ll have a solid understanding of how to consume, manage and display data using Kendo UI for Angular in your Python applications.
In this example, we will explore how to create a grid using Progress Kendo UI for Angular, a popular UI component library. Kendo UI for Angular offers a comprehensive set of tools and components designed specifically for Angular applications. With its extensive feature set and customizable options, Kendo UI for Angular provides developers with a seamless way to create dynamic and interactive grids.
We will start by setting up a new Angular project and integrating Kendo UI for Angular. Then we will create a sample dataset and configure the grid to display and manage the data effectively.
Before we dive into the tutorial, make sure you have the following prerequisites installed:
Kendo UI and full access to its professional support are completely free for 30 days. All you need to do is follow a few easy steps to get a trial license. To activate your trial or commercial license for Kendo UI for Angular, follow these steps:
@import "~@progress/kendo-theme-default/scss/all";
Import the Kendo UI for Angular modules you want to use. For example, if you want to use the Grid and Button modules, add the following import statements:
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
In the @NgModule decorator’s imports array, add the imported modules:
imports: [
// Other imported modules
GridModule,
ButtonsModule
]
To verify that your license has been successfully activated, open your application in the browser. If your development server is running, restart it to ensure the changes take effect. The Kendo UI for Angular components should now be functioning without any trial-related limitations.
First, let’s set up a Python-based stats API to provide us with the necessary data. Follow these steps:
python -m venv env
Activate the virtual environment:
For Windows:
env\Scripts\activate
For macOS/Linux:
source env/bin/activate
Now, install Flask, using pip:
pip install flask
Now, create a new Python file, api.py, and add the following code to set up a basic Flask API:
Python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/stats')
def get_stats():
# Sample data for demonstration
stats = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
]
return jsonify(stats)
if __name__ == '__main__':
app.run()
This code sets up a route /api/stats that returns a JSON response containing title and body data.
Start the API server by running the following command in the terminal:
python api.py
The API server will start running on http://localhost:5000/api/stats.
It should look like this:
Now that we have our Python API ready, let’s set up the Angular app and integrate Kendo UI for Angular. Follow these steps:
Create a new Angular project using the Angular CLI:
ng new data-view-app
Navigate into the project directory:
cd data-view-app
Install Kendo UI for Angular modules: Check for more detailed instruction on manual Grid setup and manual Charts setup.
npm install --save @progress/kendo-angular-grid @progress/kendo-angular-charts
In this step, we’ll create the components necessary to display and manage the data using Kendo UI for Angular.
Generate a new Angular component for the data view:
ng generate component data-view
Open the data-view.component.ts file and update it with the following code:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';
@Component({
selector: 'app-data-fetch',
templateUrl: './data-view.component.html',
styleUrls: ['./data-view.component.css']
})
export class DataFetchComponent implements OnInit {
public gridData: GridDataResult = { data: [], total: 0 };
public gridLoading = true;
constructor(private http: HttpClient) { }
ngOnInit() {
this.fetchData();
}
fetchData() {
const url = 'http://jsonplaceholder.typicode.com/posts';
this.http.get<any[]>(url).subscribe(response => {
this.gridData = {
data: response,
total: response.length
};
this.gridLoading = false;
}, error => {
console.error('Error fetching data:', error);
this.gridLoading = false;
});
}
}
Open the data-view.component.html file and add the following code:
<kendo-grid [data]="gridData" [loading]="gridLoading">
<kendo-grid-column field="id" title="ID" ></kendo-grid-column>
<kendo-grid-column field="title" title="Title" ></kendo-grid-column>
<kendo-grid-column field="body" title="Body" ></kendo-grid-column>
</kendo-grid>
[Optional] Open the data-view.component.css file and add the following styles:
.grid-container {
margin-bottom: 30px;
}
.chart-container {
height: 400px;
}
Open the app.component.html file and add the following code:
<app-data-view></app-data-view>
Then open up the app.module.ts file and the following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataFetchComponent } from './data-view/data-view.component';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';
// Import the HttpClientModule
@NgModule({
declarations: [
AppComponent,
DataFetchComponent,
],
imports: [
BrowserModule,
HttpClientModule,
GridModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Start the Angular development server by running the following command in the terminal, within the project directory:
ng serve
Congratulations! You have successfully built a data view using Kendo UI for Angular and consumed data from a Python-based stats API. The grid displays the title, and body as an example.
Feel free to customize the styling and expand the functionality based on your requirements. For example, a chart can very easily be added in this script, here’s how:
Firstly install the Kendo UI for Angular Charts package:
ng add @progress/kendo-angular-charts
Then add the following code to in the data-view.components.html file:
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item [data]="[1, 4, 5, 2, 1, 8]"> </kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
The code snippet you provided represents the usage of the <kendo-chart>
component from Kendo UI for Angular to create a basic chart. The <kendo-chart>
component is used
to render different types of charts, such as line charts, bar charts, pie charts and more.
Within the <kendo-chart>
component, you define the series of data that will be displayed on the chart using the <kendo-chart-series>
component. Each individual data series
is represented by the <kendo-chart-series-item>
component.
In the given code, we have a single data series represented by the <kendo-chart-series-item>
. The [data]
attribute is used to bind an array of values to the series item. In this
case, the array [1, 4, 5, 2, 1, 8] is provided as the data to be visualized on the chart.
Again, Start the Angular development server by running the following command in the terminal:
ng serve
Navigate to http://localhost:4200 to see the data view in chart:
In this tutorial, we explored how to utilize Kendo UI for Angular to create a data view in a Python app. By following the steps outlined above, you learned how to set up the Python API, integrate Kendo UI for Angular into an Angular app, create components for data visualization, and retrieve data from the Python API.
Kendo UI for Angular provides advanced features for displaying and managing data, making it a valuable tool for Python developers. With grids, charts and other components, you can effectively present and manipulate data in your applications. Give Kendo UI for Angular a try today—it’s free to check out for 30 days!
Vyom Srivastava is an enthusiastic full-time coder and also writes at GeekyHumans. With more than four years of experience, he has worked on many technologies like Apache Jmeter, Google Puppeteer, Selenium, etc. He also has experience in web development and has created a bunch of websites as a freelancer.