DEV Community: Gayathri-github7

What’s New in Next.js 15 RC?

Gayathri-github7 — Thu, 29 Aug 2024 11:53:51 +0000

TL;DR: Explore Next.js 15 RC’s innovative features, including support for React 19 RC, improved hydration error handling, and advanced caching updates. The blog covers stable enhancements like the React Compiler and experimental features such as partial prerendering. Learn how to upgrade to the new version and leverage these improvements for more efficient web development.

In this blog, we will explore the Next.js 15 RC to test the latest features for the upcoming stable release of Next.js. The first release candidate for Next.js 15 RC was rolled out on May 23, 2024. This means we can examine all the new development, production, and caching features. The latest updates include several key features organized into stable and experimental improvements.

Stable improvements

Support for React 19 RC
Hydration error improvements
Caching improvements
Updated create-next-app
Bundling external packages

Experimental features

React compiler
Partial prerendering
Next/After

What is Next.js?

Next.js is a versatile, open-source React framework developed by Vercel. It is designed to easily build fast, SEO-friendly, and user-friendly web apps. It elegantly combines server-side rendering, static site generation, and client-side rendering capabilities, making it an outstanding choice for modern web development.

Its features include automatic code splitting, efficient routing, API routes, and an optimized production build, contributing to its performance and scalability. Moreover, Next.js prioritizes developer experience, offering fast refresh for a more seamless coding process. This ensures that it caters to the end user’s needs and those creating the apps.

How do I upgrade to the latest Next.js version?

To upgrade to the latest version of Next.js (version 15 RC), use the following command with your preferred package manager:

NPM

npm i next@rc react@rc react-dom@rc eslint-config-next@rc

Yarn

yarn add next@rc react@rc react-dom@rc eslint-config-next@rc

Please note that the minimum required versions for react and react-dom are 19. For more information on version upgrading, refer to the official documentation.

Let me walk through a bunch of improvements step by step.

React 19 RC

Before upgrading to React 19 RC, please check the new features and updates by visiting our blog.

With the unveiling of React 19 RC, the Next.js App Router is being developed on the React canary channel specifically for frameworks. This allows developers to utilize and provide input on the latest React APIs ahead of the official v19 launch. Next.js 15 RC will be compatible with React 19 RC, bringing forth novel features for both client-side and server-side environments, including Actions.

For more information, please refer to the React 19 upgrade guide.

React Compiler

The React Compiler is a new experimental compiler developed by the React team at Meta. It leverages its understanding of plain JavaScript semantics and the Rules of React to analyze and optimize your code. This deep understanding enables the compiler to automatically apply optimizations, reducing the need for manual memoization techniques like useMemo and useCallback. As a result, your code becomes more concise, easier to maintain, and less prone to errors.

With Next.js 15, React Compiler support has been added. However, the React Compiler can currently only be used in Next.js through a Babel plugin.

npm install babel-plugin-react-compiler

Add the experimental.reactCompiler option in the next.config.js file.

const nextConfig = { experimental: { reactCompiler: true, },}; module.exports = nextConfig;

Using the experimental option ensures support for the React Compiler in the following areas: App Router, Pages Router, Webpack, and Turbopack.

Key benefits of the React Compiler

Automatic optimization: The compiler identifies opportunities to optimize your code, improving performance without manual effort.
Reduced boilerplate: Lessens the need for manual memoization, leading to cleaner and more concise code.
Improved maintainability: Simplifies code, making it easier to understand and modify.
Error prevention: Helps avoid common performance pitfalls related to unnecessary re-renders.

Note: The React Compiler is currently in an experimental phase, and its features and capabilities may evolve. It’s recommended that you stay updated with the latest developments and consider using it cautiously in your projects.

Hydration error enhancements

Next.js 15 has improved the way hydration errors are displayed. Hydration errors happen in Next.js when there is a mismatch between the HTML rendered on the server and the HTML rendered in the client during the initial load. This mismatch can be caused by text, incorrect HTML nesting, and browser-specific code. With the new improvements, when a hydration error occurs, the source code of the error is displayed, along with suggestions on how to fix the issue.

For more details, refer to the official Next.js documentation on Hydration error improvements.

Caching updates

Caching in Next.js is essential for improving performance and reducing server load. The Next.js App Router was introduced with opinionated caching defaults, designed to provide optimal performance by default with the ability to opt out when necessary.

In Next.js 15, the default behavior for caching fetch requests, GET Route Handlers, and the Client Router Cache has been updated. Previously, these were cached by default, but now they are uncached by default. If you prefer the old behavior, you can still opt into caching. Note that layouts and loading states will continue to be cached and reused during navigation.

Client-side navigation cache

When navigating between pages using or useRouter, the client-side router no longer caches page segments. However, these segments are still reused during browser back and forward navigation, as well as for shared layouts. To enable caching for specific page segments, you can use the staleTimes configuration option.

fetch Requests

In Next.js 15, fetch requests are no longer cached by default. Previously, force-cache was the default unless a dynamic function or dynamic config option was used.

Use the Web fetch API cache option to control caching.

fetch('https://...', { cache: 'force-cache' | 'no-store' });

Next.js uses the Web fetch API cache option to define how a server-side fetch request interacts with the framework’s persistent HTTP cache. The no-store option fetches a resource from a remote server on every request and does not update the cache. The force-cache option fetches a resource from the cache if it exists, or a remote server and updates the cache.

To enable caching for fetch requests, you can:

Use the cache option force-cache for a specific fetch call.
Use force-static for a dynamic route’s config.
Set the fetchCache route config to default-cache to apply force-cache globally on a page or layout, except for fetch calls with a different cache setting.

GET route handlers

In Next 14, Route Handlers that used the GET HTTP method were cached by default unless they used a dynamic function or dynamic config option. In Next.js 15, GET route handlers are no longer cached by default.

To enable caching for GET route handlers, use a static route configuration option like:

export dynamic = 'force-static'

Special Route Handlers such as sitemap.ts and other metadata files are static by default unless they use dynamic functions or dynamic config options.

Client router cache behavior in Next.js 15

An experimental staleTimes flag was introduced to allow custom configuration of the Router Cache in Next.js 14.2.0. This flag still remains accessible in Next.js 15. However, we are changing the default behavior to a staleTime of 0 for Page segments. This means that as you navigate your app, the client will always reflect the latest data from the Page component(s) that become active as part of the navigation. However, there are still important behaviors that remain unchanged:

Shared layout data avoids server re-fetching, supporting partial rendering.
Browser back/forward navigation restores cache, including scroll position.
Loading.js is cached for 5 minutes or per staleTimes.static config.

You can opt into the previous client router cache behavior by setting the following configuration:

next.config.ts

const nextConfig = { experimental: { staleTimes: { dynamic: 30, }, },}; module.exports = nextConfig;

Create-next-app enhancements

Let’s discuss the improvements in create-next-app. When you launch the app, it now has a new landing page and provides a prompt for choosing Turbopack when creating the Next app.

The Next.js 14 release introduced an incremental bundler called Turbopack, which is written in Rust and designed to optimize JavaScript and TypeScript. It has been integrated into Next.js to improve development performance.

In the Next.js 15 RC, when running the create-next-app command, a new prompt asks whether you would like to enable Turbopack for local development. The default setting is No.

 ![✔](https://s.w.org/images/core/emoji/14.0.0/72x72/2714.png) Would you like to use Turbopack for next dev? … No / Yes

The –turbo flag can be used to activate Turbopack.

npx create-next-app@rc –turbo

To simplify the process of getting started on a new project, a new –empty flag has been included in the CLI. This flag removes unnecessary files and styles, resulting in a minimal Hello world page.

npx create-next-app@rc –empty

Improving the bundling of external libraries (stable)

Integrating external libraries can enhance an app’s initial load performance. By default, the app router bundles external libraries, but you can exclude particular libraries using the serverExternalPackages configuration option.

In the Pages Router, external libraries are not bundled by default. However, you can specify a list of libraries you wish to bundle through the transpilePackages option, which requires individual package specifications.

To streamline configurations across both the App and Pages routers, a new option named bundlePagesRouterDependencies was introduced. This setting will align with the App Router’s default behavior of automatically bundling external libraries. The serverExternalPackages option remains available to exclude specific libraries as needed.

Response execution with next/after (experimental)

When handling a user request, the server usually focuses on tasks directly related to generating the response. However, additional tasks like logging, analytics, or synchronizing with external systems often need to be performed.

These secondary tasks should ensure the user’s response is timely. Deferring such tasks can be challenging because serverless functions typically stop execution as soon as the response is sent.

The after() API, currently experimental, addresses this issue by allowing you to schedule tasks to run after the response has been streamed. This enables secondary tasks to execute without blocking the primary response.

To enable this feature, add experimental.after to your next.config.js.

const nextConfig = {
  experimental: {
    after: true,
  },
};

module.exports = nextConfig;

Then, import the function in Server Components, Server Actions, Route Handlers, or Middleware.

import { unstable_after as after } from 'next/server';
….

export default function Layout({ children }) {
  // Secondary task.
  after(() => {
    ….
  });

  // Primary task.
  return <>{children}</>;
}

Partial prerendering

Partial Prerendering, or PPR, was rolled out in Next.JS 14. It is an optimization that blends static and dynamic rendering on the same page.

By default, Next.js uses static rendering unless dynamic functions like cookies(), headers(), or uncached data requests are used, which switch the entire route to dynamic rendering. With PPR, you can wrap dynamic UI components in a Suspense boundary. When a new request is made, Next.js immediately serves a static HTML shell and then renders and streams the dynamic parts within the same HTTP request.

To facilitate incremental adoption, we’ve added an experimental_ppr route config option to enable PPR for specific Layouts and Pages. Refer to the following code example.

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
       <StaticComponent />
       <Suspense fallback={...}>
          <DynamicComponent />
       </Suspense>
     </>
  };
}

To use this new option, set the experimental.ppr config to incremental in your next.config.js file.

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;

Once all segments have PPR enabled, setting the ppr value to true will be safe, enabling it for the entire app and all future routes.

Conclusion

Thanks for reading! In this article, we delved into the notable features and improvements of Next.js 15 RC, covering everything from stable advancements like React 19 RC support and enhanced caching techniques to experimental additions such as the React Compiler and partial prerendering. Next.js is pushing the envelope of web development, enhancing both the developer experience and the performance of web apps.

With its emphasis on optimizing development flows and fine-tuning app performance, Next.js 15 RC reflects a clear vision for the future of web development. As we anticipate the stable release, this version offers a glimpse into a more efficient and dynamic approach to building web apps. For those looking to upgrade or kickstart new projects, Next.js 15 RC is worth exploring, promising to elevate your web development endeavors to new heights. Keep an eye on the official documentation for the latest updates and best practices for a smooth transition.

You can check practical demonstrations regarding using Syncfusion with React NextJS in our demos. These demonstrations are designed to guide you through the integration process, showcasing various features and capabilities to enhance your projects.

Additionally, check the step-by-step guide for setting up a Next.js app and integrating the Syncfusion React components in the UG documentation.

Syncfusion’s React UI components library is the only suite you will ever need to build an app. It contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package.

If you’re already a Syncfusion user, the latest version of Essential Studio is available on the License and Downloads page. We offer our new users a 30-day free trial to explore all our components’ features and capabilities.

If you need further assistance, contact us via our support forum, support portal, or feedback portal. We’re always here to help you!

Related blogs

How to Share Angular Code Between Projects?

Gayathri-github7 — Thu, 08 Aug 2024 17:29:02 +0000

TL;DR: Discover the top practices for how to share Angular code between projects by exploring reusable modules, leveraging Nx for efficient code sharing, and ensuring maintainable, scalable architecture in your Angular applications.

Sharing code across multiple Angular projects has numerous benefits, including increased productivity, enhanced consistency, cost efficiency, and improved maintainability. It allows developers to reuse well-tested components, services, and utilities, reducing duplication.

Let’s look at the best practices for sharing Angular code between projects, including using module libraries, code organization, versioning, and maintenance of shared code.

Modularize code using Angular libraries

Angular libraries are a powerful way to share code. These reusable packages can’t run independently and need to be imported into other apps.

To create an Angular library, use the following command.

ng generate library angular-lib-1

Once created, the library can be used in other apps. For example, reactive-forms is a famous Angular library. To add it to the project, use the following command.

ng add @angular/forms

Then, the ReactiveFormsModule from @angular/forms can be imported into the project.

Use Nx for Monorepos

A monorepo is a single repository that contains code for different projects. Nx is a scalable monorepo building tool. It is fast and efficient and has many famous clients like Walmart, FedEx, and Shopify.

To create an Angular monorepo, use the following command.

npx create-nx-workspace@latest angular-monorepo --preset=angular-monorepo

Furthermore, Nx has the ability to create local libraries, which will result in better reusability and better separation.

For example, let’s consider a system where the domain areas are student, teacher, and staff. A new library can be created for each and every domain area.

nx g @nx/angular:library student --directory=libs/student --standalone 
nx g @nx/angular:library teacher --directory=libs/teacher --standalone 
nx g @nx/angular:library staff --directory=libs/staff --standalone

These libraries can be shared in other projects, as follows.

{
    "compilerOptions": {
        ...
        "paths": {
            "@angular-monorepo/student": ["libs/student/src/index.ts"],
            "@angular-monorepo/teacher": ["libs/teacher/src/index.ts"],
            "@angular-monorepo/staff": ["libs/staff/src/index.ts"]
        },
        ...
    }
}

Therefore, using Nx for maintaining monorepos is extremely useful.

Use feature modules

Another best practice for sharing Angular code between projects is to create feature modules. As the system grows, it is recommended to separate each functionality into separate modules. For example, let’s consider the previous example of the system containing students, teachers, and staff. Separate modules can be created for all three types.

ng generate module student
ng generate module teacher
ng generate module staff

These feature modules can be easily imported into the app.module.ts file as well as into other projects. Refer to the following code example.

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    StudentModule,
    TeacherModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This structure allows for easier maintenance and scalability as the app evolves.

Create shared modules

It is recommended to create shared modules that contain similar functions. For example, date functions and math functions can be added into one module and can be shared.

Refer to the following code example.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './components/button/button.component';
import { HighlightDirective } from './directives/highlight.directive';
import { DateFormatPipe } from './pipes/date-format.pipe';

@NgModule({
  declarations: [
    ButtonComponent,
    HighlightDirective,
    DateFormatPipe
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ButtonComponent,
    HighlightDirective,
    DateFormatPipe
  ]
})
export class SharedModule { }

This approach helps in maintaining consistency and reusability across different parts of the app.

Versioning and dependency management

Semantic versioning

When sharing code through libraries, it’s crucial to follow semantic versioning (semver). It provides a clear and predictable way to manage versions of your shared libraries, helping to communicate the impact of changes to the consumers of the library. The semantic versioning types include:

Major version: Incompatible API changes.
Minor version: Backward-compatible functionality.
Patch version: Backward-compatible bug fixes.

Dependency management

As a best practice, it is essential to manage the dependencies of the shared libraries. It is recommended to use a package manager like yarn or npm to manage the dependencies properly.

Integration tests

To ensure the shared libraries are working as expected, it is essential to conduct integration tests. Unlike unit tests, which focus on individual components, integration tests verify the interactions among components, services, and modules.

In the context of shared Angular libraries, it is essential to write integration tests to validate that the library functions correctly when used within various projects. Integration tests will help identify issues early, ensuring that the shared code works seamlessly across different environments and scenarios.

To conduct integration tests, tools like Jasmine, Karma, or Jest can be used.

Continuous Integration/Continuous Deployment (CI/CD)

CI/CD pipelines must be configured for shared Angular libraries. These pipelines automate the process of building, testing, and deploying code, ensuring that every change is validated before it is merged.

This will reduce the risk of introducing bugs. Tools like GitHub Actions, Travis CI, and Jenkins can be configured to run tests, linting, and build processes automatically.

Refer to the following code example of a simple GitHub Actions workflow for an Angular library.

name: CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm run build
      - run: npm test

Additionally, these pipelines can be set up to publish new versions of the shared libraries to a private NPM registry or other package management system, streamlining the deployment process.

Proper documentation

Shared Angular libraries should contain proper documentation for successful adoption and usage. It should include detailed usage examples, API references, and setup instructions to help developers understand how to integrate and use the library effectively. It should also cover common issues, troubleshooting tips, and best practices.

One of the most famous Angular libraries is Angular Material. It has a separate website that contains demos, setup instructions, and a guide.

Well-documented libraries reduce the learning curve for new users and provide a single source of truth for all information related to the library. Tools like TypeDoc can be used to generate API documentation directly from the TypeScript code, ensuring that the documentation stays up to date with the codebase.

Consistent coding standards

Maintaining consistent coding standards across all projects and shared libraries ensures code quality and readability. Establishing and enforcing these standards helps developers write clean, maintainable, and bug-free code.

Tools like Prettier and ESLint can be used to maintain coding standards and quality guidelines, as follows.

{
  "scripts": {
    "lint": "eslint . --ext .ts",
    "format": "prettier --write 'src/**/*.ts'"
  }
}

Consistent coding standards also enable easier code reviews and collaboration.

Backward compatibility

When developing and updating shared libraries, it is important to ensure backward compatibility to avoid breaking existing implementations. Maintaining backward compatibility ensures that projects depending on the library do not face unexpected issues or require immediate changes when the library is updated. If breaking changes are necessary, they should be clearly documented, and a migration path should be provided to help users transition smoothly.

Following semantic versioning helps communicate the nature of changes (e.g., major, minor, patch) to the users, allowing them to manage their dependencies accordingly.

Security

Security is a critical consideration when sharing code between projects. Following best practices for security helps protect the shared libraries from vulnerabilities that could be exploited by malicious actors.

It is essential to regularly audit the code for security vulnerabilities, use automated tools like Snyk or npm audit, and address any issues promptly. Additionally, implementing secure coding practices, such as validating inputs, sanitizing outputs, and using secure dependencies, helps minimize the risk of security breaches.

Properly managing access controls and permissions for the repository and CI/CD pipelines also ensures that only authorized personnel can make changes to the shared libraries.

Conclusion

Thanks for reading this article! We have explored how sharing Angular code between projects can enhance productivity, maintain consistency, and ensure quality.

Syncfusion Angular UI components library is the only suite that you will ever need to build an app since it contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.

The new version of Essential Studio for Angular is available for existing customers on the License and Downloads page. If you’re not yet a Syncfusion customer, sign up for our 30-day free trial to explore our features.

If you have any questions, you can reach us through our support forum, support portal, or feedback portal.

Related blogs

Top 5 Techniques to Protect Web Apps from Unauthorized JavaScript Execution

Gayathri-github7 — Tue, 06 Aug 2024 15:30:38 +0000

TL;DR: Keep your web app secure with these 5 vital techniques: validate and sanitize inputs, implement a content security policy, use subresource integrity, follow secure JavaScript practices, and conduct regular security audits. Protect web apps from unauthorized JavaScript execution and protect your users.

In early 2024, a series of cyberattacks exploited stored cross-site scripting (XSS) vulnerabilities in popular WordPress plugins like WP Statistics, WP Meta SEO, and LiteSpeed Cache. These attacks allowed attackers to inject malicious JavaScript, compromising over 5 million active installations.

As you can see, these attacks are a considerable threat to web applications nowadays. They can result in data leakage, identity theft, and, ultimately, loss of customer confidence. According to HackerOne Research, XSS attacks constituted 23% of all reported security threats in 2020, making them the most frequent.

This article will describe five techniques for safeguarding your app against unauthorized JavaScript executions.

1. Input validation and sanitization

This primarily involves verifying whether the user’s input is within the expected format. For example, the data in the email text field should be a valid email address, and the data in the username text field should follow the expected username structure.

Sanitization cleans this input by stripping out any malicious data that could be used in attacks such as XSS and SQL injection. These two are critical security measures for any web app, and they serve as the first line of defense against malicious data that users might input.

How to implement input validation and sanitization

a. Client-side form validation

Client-side form validation is the initial check of the data validation process. However, this should never be solely relied upon for security purposes because JavaScript can be disabled or manipulated, easily bypassing client-side checks.

Refer to the following code example of basic client-side validation using HTML 5.

<form>
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 <input type="submit" value="Submit">
</form>

For a more comprehensive look at client-side form validation, explore this detailed guide.

b. Server-side validation

Server-side validation ensures that all inputs are validated, regardless of the client-side validation status. It increases security by ensuring that malicious data never reaches your core app logic or database validation on the server. It is also less vulnerable to tampering.

Refer to the following code example of basic server-side validation using Node.js with Express.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    const email = req.body.email;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        return res.status(400).send('Invalid email format.');
    }
    // Process the valid email.
    res.send('Email is valid!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

c. Sanitization

Sanitization ensures that any potentially harmful data is removed or altered to a safe format. The following code example sanitizes input using the validator library in Node.js.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const validator = require('validator');

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    let email = req.body.email;
    if (!validator.isEmail(email)) {
        return res.status(400).send('Invalid email format.');
    }
    email = validator.normalizeEmail(email);
    // Process the sanitized email
    res.send('Email is valid and sanitized!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. Content security policy (CSP)

This is a strong security solution to guard web apps against threats such as XSS and data injection. Implementing CSP ensures that only scripts from specific, approved sources can run on your web pages. This significantly reduces the chance of malicious code execution.

In simpler terms, think of CSP as a bouncer for your web app. It checks where the scripts come from and only lets in those from trusted sources, keeping the bad scripts out.

How to implement CSP

Implementing CSP involves adding CSP directives to your web server’s HTTP response header. CSP directives are instructions that tell the browser which sources are permitted to load and execute content on a webpage. These directives provide granular control over various types of resources.

Key directives include:

default-src: Sets a default policy for all content types.
script-src: Specifies allowed sources for JavaScript.
style-src: Specifies allowed sources for stylesheets.
img-src: Specifies allowed sources for images.
object-src: Specifies allowed sources for plugins.

How to add CSP to the HTTP response header

You can add the CSP to the HTTP response header via your web server configuration. Refer to the following code example for setting up CSP in the Apache server.

Header set Content-Security-Policy "default-src 'self'; img-src *"

For Nginx, you can configure CSP as follows.

add_header Content-Security-Policy "default-src 'self'; img-src *"

How to add your CSP via meta tags

If you cannot access the web server’s configuration, you can include the CSP directly in your HTML file using a tag. But this is not the recommended way.

<head>
 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *"">
</head>

3. Sub-resource integrity (SRI)

This security feature helps browsers check if the resources obtained from a third party (for instance, a CDN) have been modified. It allows you to provide a cryptographic hash for these resources.

When the browser gets the resource, it compares its hash to the given hash. If the hash does not match, the resources will not be loaded, thereby protecting your app from malicious modifications.

How to implement SRI

Implementing SRI involves adding a cryptographic hash to the integrity attribute of your or tags. Here’s a step-by-step guide to setting up SRI:

Step 1: Generating the hash

You must generate a hash for the resource you want to include in your webpage. This can be done using a tool or online service like the Subresource Integrity Generator tool.

Step 2: Adding the hash to your resource

Once you have the hash, add it to the integrity attribute of the or < link> tag.

Refer to the following code example.

<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous"></script>

In this example, the integrity attribute contains the hash, and the crossorigin=”anonymous” attribute ensures the resource is fetched with CORS (cross-origin resource sharing).

You can use SRI for stylesheets, as well.

<link rel="stylesheet" href="https://example.com/styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxqAtD6x48V2aB1xzA7e2h53sF2aAuM" crossorigin="anonymous">

4. Secure JavaScript coding practices

Secure JavaScript coding practices are crucial for developing web apps robust against various attacks, XSS, and other malicious exploits. By following these best practices, developers can ensure their code is secure, maintainable, and less vulnerable to unauthorized execution.

Avoid using eval()

The eval() function is a significant security risk, as it executes a string of code, potentially allowing attackers to inject malicious scripts. Always avoid using eval() and similar functions like setTimeout(string) and setInterval(string).

Why these functions are dangerous:

Arbitrary code execution: These functions can execute any code passed to them as a string. If an attacker successfully inserts a malicious string, it will operate in the same way as the remaining code of your script.
Difficulty in code analysis: Using these functions makes it harder to analyze the code for security vulnerabilities. Static analysis tools cannot examine the strings that are passed through such functions.
Dynamic code injection: Attackers can use these functions to inject and execute code dynamically that was not originally part of the app, bypassing traditional security measures.

Use strict mode

Enabling strict mode in JavaScript helps catch common coding mistakes and unsafe actions, such as assigning values to undeclared variables. This improves the security and stability of your code. To enable strict mode, add “use strict”; at the beginning of a script or a function.

"use strict";

function safeFunction() {
    // Code in strict mode.
    let secureVariable = "Secure";
    console.log(secureVariable);
}

safeFunction();

Advantages and implications of enabling strict mode:

In strict mode, this is undefined in functions that are not called methods.
Strict mode will throw an error if a function has duplicate parameter names or an object literal has duplicate property names.
A with statement is not allowed in the strict mode because it makes code difficult to predict and optimize.

Refer to the following code example.

"use strict";

// Eliminates this coercion.
function showThis() {
    console.log(this); // In non-strict mode, this would be the global object; in strict mode, it's undefined.
}
showThis();

// Disallows duplicate property names or parameter values.
// This will throw an error in strict mode.
const obj = {
    prop: 1,
    prop: 2
};

// Prevents the use of with statement.
// This will throw an error in strict mode.
with (Math) {
    let x = cos(3.14);
}

Avoid inline JavaScript

Inline JavaScript can be significantly vulnerable to XSS attacks because it allows attackers to inject malicious scripts directly into your HTML. Instead, use external scripts to ensure all JavaScript is properly vetted and sanitized.

Avoid inline JavaScript because of:

Ease of injection: Inline JavaScript is more susceptible to injection attacks because it is part of the HTML content.
CSP compliance: Content security policies (CSP) can be more effectively enforced when JavaScript is kept in external files. Inline scripts often require the use of the unsafe-inline directive, which weakens CSP’s effectiveness.
Maintainability: Keeping JavaScript in separate files makes the codebase easier to manage and maintain.

Refer to the following code example.

<!-- Insecure Inline JavaScript -->
<!-- <button onclick="alert('Clicked!')">Click Me</button> -->

<!-- Secure External JavaScript -->
<button id="secureButton">Click Me</button>
<script>
    document.getElementById('secureButton').addEventListener('click', function() {
        alert('Clicked!');
    });
</script>

5. Regular Security Audits and Updates

Regular audits are essential for maintaining the integrity and security of web apps. By continuously assessing your app’s security, you can identify and fix vulnerabilities that could be exploited to execute unauthorized JavaScript or other malicious actions.

How to conduct regular security audits

Automated security scanning

Use tools like OWASP ZAP or Burp Suite to scan for known vulnerabilities. Automated scans provide a quick way to identify common security issues.

Manual code reviews

Regularly review your codebase manually to catch issues that automated tools might miss. It’s better to use experienced developers and security experts for this.

Penetration testing

Hire penetration testers to simulate attacks on your app, uncovering vulnerabilities that other methods might not detect.

Update dependencies

Keep your dependencies updated to fix known vulnerabilities in libraries and frameworks. Use package managers like NPM or pip to manage updates.

Security training

Continuously train your development team on the latest security practices and common vulnerabilities. This will ensure that your team is equipped to write secure code.

Concluding thoughts

Thanks for reading this article. We hope these 5 techniques enhance your app’s defenses against unauthorized JavaScript executions. By implementing these strategies, you can reduce the risk of attacks and ensure a safer, more secure web app for your users. Remember, staying proactive and vigilant in your security measures is key to protecting your digital assets.

Syncfusion JavaScript UI controls library is the only suite that you will ever need to build an app since it contains over 85 high-performance, lightweight, modular, and responsive UI components in a single package.

For current customers, the newest version of Essential Studio is available from the License and Downloads page. If you are not a Syncfusion customer, you can always download our free evaluation to see all our controls.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Easily Synchronize Outlook Calendar Events in .NET MAUI Scheduler

Gayathri-github7 — Wed, 31 Jul 2024 11:52:31 +0000

TL;DR: Easily synchronize Outlook Calendar events with the Syncfusion .NET MAUI Scheduler by configuring Microsoft Azure Active Directory, registering the app, setting API permissions, and integrating the Scheduler control into your .NET MAUI app. This setup allows seamless import and export of events between Outlook and the Scheduler.

Maintaining multiple unsynchronized calendars confuses and increases the possibility of scheduling conflicts.

Let’s see how to synchronize the Microsoft Outlook Calendar events in the Syncfusion .NET MAUI Scheduler and vice versa.

Configure Microsoft Azure Active Directory service

The Microsoft Graph allows developers to access protected Microsoft APIs and integrate their apps with Microsoft products like Outlook Calendar.

Follow these steps to configure the settings to read and write the Microsoft Office 365 account Calendar events:

1.Log in to Microsoft Azure and select App Registrations.
2.On the App registration page, select the New registration option, fill in the application Name (e.g., Synchronizing Outlook Calendar), and click Register.

3.Once the app is registered, navigate to the registered Synchronizing Outlook Calendar application page, then select Authentication -> Add Platform. On the Configure Platforms page, select the required Mobile and desktop applications.

Add platform for registered app

4.After selecting the platform configuration, select the required Redirect URIs option and click Configure.

Configure platform for registered app

5.Then, we need to change the registered Synchronizing Outlook Calendar app and the API permissions to synchronize the Office 365 calendar events in your app. To do that, navigate to API permissions in the left panel, select Add a permission, and then select the Microsoft Graph option.

Request API permission for the registered app

6.Now, choose Delegated permissions on the Microsoft Graph page.

Request Delegated permissions for registered app

7.Search for Calendar to enable Calendar API permission to ReadWrite and then click AddPermissions.

Request Outlook Calendar API permission

8.We have configured the Microsoft Azure service to access the Microsoft Calendar APIs. Now, you can use the Application (client) ID and Directory (tenant) ID of the registered Synchronizing Outlook Calendar app to connect the Microsoft Azure AD service with the .NET MAUI project.

Registered Application Overview

Creating appointments in the .NET MAUI Scheduler

Next, we’ll see how to create appointments in the .NET MAUI Scheduler.

Note: Before proceeding, please refer to the getting started with the .NET MAUI Scheduler documentation.

1.Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion .NET MAUI controls. So, register the handler for Syncfusion Core in the MauiProgram.cs file.

using Syncfusion.Maui.Core.Hosting;
builder
   .UseMauiApp<App>()
   .ConfigureSyncfusionCore()

2.Now, initialize the .NET MAUI Scheduler control in the MainPage.xaml file.

xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"
<scheduler:SfScheduler x:Name="Scheduler" View="Month"/>

Refer to the following image.

Integrating Scheduler control in the .NET MAUI app

3.Let’s create an appointment model class with the required fields, such as EventName, From and To dates in the .NET MAUI Scheduler.

Meeting.cs

public class Meeting
{
     public string EventName { get; set; }
     public DateTime From { get; set; }
     public DateTime To { get; set; }
     public bool IsAllDay { get; set; }
     public Brush Background { get; set; }
     public string RRule { get; set; }
}

4.Now, create events for the Scheduler in the view model class.

SchedulerViewModel.cs

public class SchedulerViewModel
{
   public ObservableCollection<Meeting> Meetings { get; set; }

   public SchedulerViewModel()
   {
       Meetings = new ObservableCollection<Meeting>();
       this.AddSchedulerEvents();
   }

   /// <summary>
   /// Method to add events to scheduler.
   /// </summary>
   private void AddSchedulerEvents()
   {
      var colors = new List<Brush>
      {
          new SolidColorBrush(Color.FromArgb("#FF8B1FA9")),
          new SolidColorBrush(Color.FromArgb("#FFD20100")),
          new SolidColorBrush(Color.FromArgb("#FFFC571D")),
          new SolidColorBrush(Color.FromArgb("#FF36B37B")),
          new SolidColorBrush(Color.FromArgb("#FF3D4FB5")),
          new SolidColorBrush(Color.FromArgb("#FFE47C73")),
          new SolidColorBrush(Color.FromArgb("#FF636363")),
          new SolidColorBrush(Color.FromArgb("#FF85461E")),
          new SolidColorBrush(Color.FromArgb("#FF0F8644")),
      };

      var subjects = new List<string>
      {
          "Scrum Meeting",
          "Review Meeting",
          "Rating Discussion",
          "Development Meeting",
          "Sprint Review",
          "Sprint Planning",
          "Sprint Retrospective",
          "General Meeting",
          "Yoga Therapy",
      };

      Random ran = new Random();
      for (int startdate = -5; startdate < 5; startdate++)
      {
          var meeting = new Meeting();
          meeting.EventName = subjects[ran.Next(0, subjects.Count)];
          meeting.From = DateTime.Now.Date.AddDays(startdate).AddHours(9);
          meeting.To = meeting.From.AddHours(10);
          meeting.Background = colors[ran.Next(0, colors.Count)];
          this.Meetings.Add(meeting);
      }
   }
}

5.Finally, bind the custom Meetings property from the SchedulerViewModel class to the Scheduler’s AppointmentsSource using the appointment mapping feature.

xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"
xmlns:local="clr-namespace:MauiSyncOutlookCalendar"
<Grid>
 <Grid.BindingContext>
  <local:SchedulerViewModel/>
 </Grid.BindingContext> 

 <scheduler:SfScheduler x:Name="Scheduler" View="Month" AppointmentsSource="{Binding Meetings}" AllowedViews="Week,Month,TimelineMonth">
  <scheduler:SfScheduler.AppointmentMapping>
   <scheduler:SchedulerAppointmentMapping
              Subject="EventName"
              StartTime="From"
              EndTime="To"
              Background="Background"
              RecurrenceRule="RRule"
              IsAllDay="IsAllDay"/>
  </scheduler:SfScheduler.AppointmentMapping>
 </scheduler:SfScheduler>
</Grid>

Now, we have created the .NET MAUI Scheduler application with custom appointments.

Creating custom appointments in .NET MAUI Scheduler

Integrate Microsoft Authentication library in the .NET MAUI app

Follow these steps to integrate the .NET MAUI app and the Microsoft Azure AD service.

1.Install the Microsoft.Graph package in the Visual Studio by selecting Manage Nuget packages. Then, add the following references to access the Microsoft Calendar API.

using Microsoft.Graph;
using Microsoft.Identity.Client;

2.Then, copy the Application (client) ID and Directory (tenant) ID from the registered app to connect to the Microsoft Azure AD service.

Copy App and Directory IDs to connect to Microsoft Azure AD service

3.Create the authority using Directory (tenant) ID.
4.Register the Application (client) ID, Authority, and Redirecturi using the IPublicClientApplication. To create a client app, refer to the following code example.

App.xaml.cs

internal static IPublicClientApplication ClientApplication;
private string clientID, tenantID, authority;
public App()
{
  this.InitializeComponent();

  //// You need to replace your Application or Client ID.
  clientID = "";
  //// You need to replace your tenant ID.
  tenantID = "";
  authority = "https://login.microsoftonline.com/" + tenantID;
  ClientApplication = PublicClientApplicationBuilder.Create(clientID)
      .WithAuthority(authority)
      .WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
      .Build();
}

Connect the Microsoft Graph service client

We can get the user token information using the AcquireTokenInteractive and AcquireTokenSilent methods of the IPublicClientApplication. The GraphServiceClient is used to get user information from the Endpoint by registering the user token information of the IPublicClientApplication.

SchedulerViewModel.cs

using Microsoft.Graph;
using Microsoft.Identity.Client;

private GraphServiceClient Client;
//// Scopes to access the Microsoft API permission.
private static string[] scopes = { "User.Read", "Calendars.Read", "Calendars.ReadWrite" };
private async void Authenticate()
{
    AuthenticationResult tokenRequest;

    //// Registered the user token.
    var accounts = await App.ClientApplication.GetAccountsAsync();
    if (accounts.Count() > 0)
    {
       tokenRequest = await App.ClientApplication.AcquireTokenSilent(scopes, accounts.FirstOrDefault())
       .ExecuteAsync();
    }
    else
    {
       tokenRequest = await App.ClientApplication.AcquireTokenInteractive(scopes).ExecuteAsync();
    }

    //// Connect the client information. 
    Client = new GraphServiceClient("https://graph.microsoft.com/v1.0/",
             new DelegateAuthenticationProvider(async (requestMessage) =>
             {
                 requestMessage.Headers.Authorization = new AuthenticationHeaderValue("bearer", tokenRequest.AccessToken);
             }));
}

We have now connected the .NET MAUI app with Microsoft Azure. Run the app; you will see the login page, as shown in the following image.

Office365 login page

Once you log in, you will be promoted with a Permission-requested dialog. Read the terms and click the Accept button.

Application permission

Note: If any details are mismatched, like the Application(client) ID, Directory (tenant) ID, or redirect URL, you will get an error in connection, so add the proper details to avoid it.

Synchronize the Outlook Calendar events to the .NET MAUI Scheduler

Next, we’ll look at synchronizing or importing Outlook Calendar events to the .NET MAUI Scheduler.

Refer to the following code example to design and add the import button.

<Grid>
 <Grid.DataContext>
  <local:SchedulerViewModel/>
 </Grid.DataContext>

 <StackPanel Orientation="Horizontal">
  <Button Text="Import Outlook Calendar Events to Syncfusion .NET MAUI Scheduler" CornerRadius="20" Command="{Binding ImportButtonCommand}" Margin="10"/>
 </StackPanel>
</Grid>

When the Import button clicks, Microsoft Azure will be connected and import the Outlook Calendar events to the Syncfusion .NET MAUI Scheduler.

Refer to the following code example.

public ICommand ImportButtonCommand { get; set; }
public void ExecuteImportCommand(object parameter)
{
   this.Authenticate(true);
}

private async void Authenticate(bool import)
{
   AuthenticationResult tokenRequest;
   var accounts = await App.ClientApplication.GetAccountsAsync();
   if (accounts.Count() > 0)
   {
      tokenRequest = await App.ClientApplication.AcquireTokenSilent(scopes, accounts.FirstOrDefault())
      .ExecuteAsync();
   }
   else
   {
      tokenRequest = await App.ClientApplication.AcquireTokenInteractive(scopes).ExecuteAsync();
   }
   Client = new GraphServiceClient("https://graph.microsoft.com/v1.0/",
            new DelegateAuthenticationProvider(async (requestMessage) =>
            {
                requestMessage.Headers.Authorization = new AuthenticationHeaderValue("bearer", tokenRequest.AccessToken);
            }));
            if (import)
            {
                this.GetOutlookCalendarEvents();
            }
}

Refer to the following code example to request Microsoft Outlook Calendar events.

/// <summary>
/// Method to get Outlook Calendar events.
/// </summary>
private void GetOutlookCalendarEvents()
{
   //// Request to get the Outlook calendar events.
   var events = Client.Me.Events.Request().GetAsync().Result.ToList();
   if (events != null && events.Count > 0)
   {
      foreach (Event appointment in events)
      {
         Meeting meeting = new Meeting()
         {
             EventName = appointment.Subject,
             From = Convert.ToDateTime(appointment.Start.DateTime),
             To = Convert.ToDateTime(appointment.End.DateTime),
             IsAllDay = (bool)appointment.IsAllDay,
         };
         if (appointment.Recurrence != null)
         {
            AddRecurrenceRule(appointment, meeting);
         }
         this.Meetings.Add(meeting);
      }
   }
 }
/// <summary>
/// Method to update recurrence rule to appointments.
/// </summary>
/// <param name="appointment"></param>
/// <param name="meeting"></param>
private static void AddRecurrenceRule(Event appointment, Meeting meeting)
{
   // Creating a recurrence rule.
   SchedulerRecurrenceInfo recurrenceProperties = new SchedulerRecurrenceInfo();
   if (appointment.Recurrence.Pattern.Type == RecurrencePatternType.Daily)
   {
      recurrenceProperties.RecurrenceType = SchedulerRecurrenceType.Daily;
   }
   else if (appointment.Recurrence.Pattern.Type == RecurrencePatternType.Weekly)
   {
      recurrenceProperties.RecurrenceType = SchedulerRecurrenceType.Weekly;
      foreach (var weekDay in appointment.Recurrence.Pattern.DaysOfWeek)
      {
         if (weekDay == MicrosoftDayOfWeek.Sunday)
         {
            recurrenceProperties.WeekDays = SchedulerWeekDays.Sunday;
         }
         if (weekDay == MicrosoftDayOfWeek.Monday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Monday;
         }
         if (weekDay == MicrosoftDayOfWeek.Tuesday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Tuesday;
         }
         if (weekDay == MicrosoftDayOfWeek.Wednesday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Wednesday;
         }
         if (weekDay == MicrosoftDayOfWeek.Thursday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Thursday;
         }
         if (weekDay == MicrosoftDayOfWeek.Friday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Friday;
         }
         if (weekDay == MicrosoftDayOfWeek.Saturday)
         {
            recurrenceProperties.WeekDays = recurrenceProperties.WeekDays | SchedulerWeekDays.Saturday;
         }
      }
   }
   recurrenceProperties.Interval = (int)appointment.Recurrence.Pattern.Interval;
   recurrenceProperties.RecurrenceRange = SchedulerRecurrenceRange.Count;
   recurrenceProperties.RecurrenceCount = 10;
   meeting.RRule = SchedulerRecurrenceManag-er.GenerateRRule(recurrenceProperties, meeting.From, meeting. To);
 }

Synchronize the .NET MAUI Scheduler events to Outlook Calendar events

Let’s see how to synchronize or export the .NET MAUI Scheduler to the Outlook Calendar events.

Refer to the following code example to design and add the export button.

<Grid>
 <Grid.DataContext>
  <local:SchedulerViewModel/>
 </Grid.DataContext>

 <Button Text="Export Syncfusion .NET MAUI Scheduler Events to Outlook Calendar" CornerRadius="20" Command="{Binding ExportButtonCommand}" Margin="10" />
</Grid>

When the export button is clicked, the Syncfusion .NET MAUI Scheduler events will be exported to the Outlook Calendar.

public ICommand ExportButtonCommand { get; set; }

public void ExecuteExportCommand(object parameter)
{
   this.Authenticate(false);
}

/// <summary>
/// Method to connect application authentication with Microsoft Azure. 
/// </summary>
/// <param name="import">import or export events</param>
private async void Authenticate(bool import)
{
    AuthenticationResult tokenRequest;
    var accounts = await App.ClientApplication.GetAccountsAsync();
    if (accounts.Count() > 0)
    {
       tokenRequest = await App.ClientApplication.AcquireTokenSilent(scopes, accounts.FirstOrDefault())
        .ExecuteAsync();
    }
    else
    {
       tokenRequest = await App.ClientApplication.AcquireTokenInteractive(scopes).ExecuteAsync();
    }
    Client = new GraphServiceClient("https://graph.microsoft.com/v1.0/",
             new DelegateAuthenticationProvider(async (request-Message) =>
             {
                 requestMessage.Headers.Authorization = new Au-thenticationHeaderValue("bearer", tokenRequest.AccessToken);
             }));
    if (!import)
    {
       this.AddEventToOutlookCalendar();
    }
}

Refer to the following code example to request the addition of .NET MAUI Scheduler events to the Outlook Calendar events.

/// <summary>
/// Method to add an event to Outlook Calendar.
/// </summary>
private void AddEventToOutlookCalendar()
{
     foreach (Meeting meeting in this.Meetings)
     {
         Event calendarEvent = new Event
         {
             Subject = meeting.EventName,
             Start = new DateTimeTimeZone
             {
                 DateTime = meeting.From.ToString(),
                 TimeZone = "GMT Standard Time"
             },
             End = new DateTimeTimeZone()
             {
                 DateTime = meeting.To.ToString(),
                 TimeZone = "GMT Standard Time"
             },
         };
         //// Request to add Syncfusion Scheduler event to the Outlook Calendar events.
         Client.Me.Events.Request().AddAsync(calendarEvent);
     }
 }

Refer to the following image.

Synchronizing Outlook Calendar events in .NET MAUI Scheduler

GitHub reference

For more details, refer to the Synchronizing Outlook Calendar events in the .NET MAUI Scheduler GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve seen how to synchronize the Syncfusion .NET MAUI Scheduler events with Microsoft Outlook Calendar events and vice versa. This functionality is perfect for keeping your work and personal appointments in sync, enhancing your productivity and organization. Give it a try, and leave your feedback in the comment section below.

For current customers, the newest version of Essential Studio for .NET MAUI is available from the License and Downloads page. If you are not a Syncfusion customer, you can always download our free evaluation to see all our controls.

You can also contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Design a Timer App using .NET MAUI Radial Gauge and Timer Picker

Gayathri-github7 — Tue, 30 Jul 2024 15:17:56 +0000

TL;DR: Learn to design a timer app using Syncfusion .NET MAUI Radial Gauge and Time Picker controls. This guide covers creating a .NET MAUI app, integrating and customizing the controls, and adding functionalities like start, pause, and cancel for the timer. Visually represent timer progress efficiently with customizable axes, pointers, and annotations.

A timer app measures time intervals and typically displays the elapsed time in hours, minutes, and seconds. This versatile tool is designed to help you manage time more efficiently. Whether you want to stay productive, execute workouts, or even cook the perfect meal, a timer app can be your best companion.

In this blog, we’ll see how to design a timer app using the Syncfusion .NET MAUI Radial Gauge and Time Picker controls.

Create a .NET MAUI app

First, create a new .NET MAUI application in Visual Studio.

Register the handler for Syncfusion Core

Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion .NET MAUI controls (in this case, Radial Gauge and Time Picker). Register the handler for Syncfusion core in the MauiProgram.cs file.

using Syncfusion.Maui.Core.Hosting;
builder
   .UseMauiApp<App>()
   .ConfigureSyncfusionCore()

Integrate the .NET MAUI Timer Picker to set the duration of the timer

The Syncfusion .NET MAUI Time Picker allows you to select the time and visualize its items inside a popup or a drop-down UI element. Here, we’ll use it to set the duration for the timer app.

Refer to the following code example to initialize and customize the Time Picker.

MainPage.xaml

xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"

<picker:SfTimePicker Background="#E8E4FF" HorizontalOptions="Fill">
  <picker:SfTimePicker.HeaderView >
   <picker:PickerHeaderView Background="#E8E4FF" Height="40" Text="Time Picker">
   </picker:PickerHeaderView>
  </picker:SfTimePicker.HeaderView>
  <picker:SfTimePicker.ColumnHeaderView >
   <picker:TimePickerColumnHeaderView Background="#E8E4FF">
   </picker:TimePickerColumnHeaderView>
  </picker:SfTimePicker.ColumnHeaderView>
</picker:SfTimePicker>

Refer to the following image.

Integrating Time Picker in the .NET MAUI app

Designing a timer app using .NET MAUI Radial Gauge

Follow these steps to design a timer app that displays the time selected in the .NET MAUI Time Picker to the Radial Gauge control:

Step 1: Define a model class to bind the values to the Radial Gauge and Time Picker

Let’s create a Timer model class to bind the values to the Radial Gauge and Time Picker. Refer to the following code example where the,

SelectedTime property updates the selected time in the Time Picker in two-way mode.
TimerPointerValue property updates the elapsed timer value in the Radial Gauge pointer.
TimerTime property displays the elapsed time in the Radial Gauge annotation.
ReminderTime property displays the reminder time of the timer duration in the Radial Gauge annotation.

TimerModel.cs

public class TimerModel : INotifyPropertyChanged
{
    private string reminderTime;
    private string timerTime;
    private double timerPointerValue;
    private TimeSpan selectedTime;

    public TimeSpan SelectedTime
    {
        get
        {
            return selectedTime;
        }
        set
        {
            selectedTime = value;
            this.OnPropertyChanged(nameof(SelectedTime));
        }
    }

    public string ReminderTime
    {
        get
        {
            return reminderTime;
        }
        set
        {
            reminderTime = value;
            this.OnPropertyChanged(nameof(ReminderTime));
        }
    }

    public string TimerTime
    {
        get
        {
            return timerTime;
        }
        set
        {
            timerTime = value;
            this.OnPropertyChanged(nameof(TimerTime));
        }
    }

    public double TimerPointerValue
    {
        get
        {
            return timerPointerValue;
        }
        set
        {
            timerPointerValue = value;
            this.OnPropertyChanged(nameof(TimerPointerValue));
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }   
}

Step 2: Determining the timer app time from the .NET MAUI Time Picker’s selected time

The IDispatcherTimer provides a timer integrated into the Dispatcher queue. It is executed at specified intervals to determine the elapsed time and pointer value of the Radial Gauge based on the time selected in the Time Picker.

Using the CreateTimer method, create an instance of the IDispatcherTimer object associated with the Dispatcher and set the Interval value to run.

Refer to the following code example.

TimerViewModel.cs

public class TimerViewModel : INotifyPropertyChanged
{ 
  private TimeSpan timerTick;
  private IDispatcherTimer timer;
  public TimerModel TimerModel { get; set; }

  public TimerViewModel()
  {
     timerTick = new TimeSpan();
     var dispatcher = Dispatcher.GetForCurrentThread();

     if (dispatcher != null)
     {
        this.timer = dispatcher.CreateTimer();
        this.timer.Interval = new TimeSpan(0, 0, 1);
        if (this.timer != null)
        {
           this.timer.Tick += Timer_Tick;
        }
     }
  }

  private void Timer_Tick(object? sender, EventArgs e)
  {
      if (timerTick > TimeSpan.Zero)
      {
          timerTick = timerTick.Subtract(new TimeSpan(0, 0, 1));
          var time = (timerTick / this.TimerModel.SelectedTime) * 100;
          this.TimerModel.TimerPointerValue = time;
          this.TimerModel.TimerTime = timerTick.ToString(@"hh\:mm\:ss");
      }
      else
      {
          this.TimerModel.TimerPointerValue = 0;
      }
  }
}

Step 3: Bind the Time Picker selected time

Once time is selected in the .NET MAUI Time Picker, we can use the selected time to determine the Timer time and reminder time to the Radial Gauge.

Refer to the following code example. Here, we’ll set the BindingContext and bind the Time Picker’s SelectedTime property using the SelectedTime property of the TimerModel class from the TimerViewModel class.

<ContentPage.BindingContext>
 <local:TimerViewModel/>
</ContentPage.BindingContext>

<picker:SfTimePicker Background="#E8E4FF" HorizontalOptions="Fill" SelectedTime="{Binding TimerModel.SelectedTime,Mode=TwoWay}">

Step 4: Initialize the .NET MAUI Radial Gauge

The Syncfusion .NET MAUI Radial Gauge can be used to display the elapsed time on a circular scale and includes customizable axes, pointers, and annotations to show the timer details.

Refer to the following code example to initialize the Radial Gauge control.

MainPage.xaml

xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges"

<gauge:SfRadialGauge Background="#E8E4FF"/>

Step 5: Customize the Radial Gauge axis angle

To design the timer app, we’ll set the Radial Gauge axis’ StartAngle and EndAngle to 270 degrees. By default, the Radial Gauge axis’ start angle is zero and updates clockwise.

Refer to the following code example.

MainPage.xaml

<gauge:SfRadialGauge Background="#E8E4FF">
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis ShowLabels="False"  
         StartAngle="270"
         EndAngle="270"
         ShowAxisLine="False"
         ShowTicks="False">
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 6: Customize the Radial Gauge axis pointer value

Let’s add a RangePointer to display the elapsed timer value in the Radial Gauge Pointers.

Refer to the following code example to bind the pointer value to the Radial Gauge axis using the TimerPointerValue property of the TimerModel class from the TimerViewModel BindingContext class.

MainPage.xaml

<ContentPage.BindingContext>
 <local:TimerViewModel/>
</ContentPage.BindingContext>

<gauge:SfRadialGauge Background="#E8E4FF">
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis ShowLabels="False"  
         StartAngle="270"
         EndAngle="270"
         ShowAxisLine="False"
         ShowTicks="False">
   <gauge:RadialAxis.Pointers>
    <gauge:RangePointer Value="100" Fill="#EEEEEE" CornerStyle="BothCurve" PointerWidth="14"/>
    <gauge:RangePointer Value="{Binding TimerModel.TimerPointerValue}" CornerStyle="BothCurve" Fill="#6750A4" PointerWidth="14"/>
   </gauge:RadialAxis.Pointers>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 7: Customize the Radial Gauge axis annotation

The elapsed time and reminder can be displayed in the Radial Gauge axis using the annotations.

Refer to the following code example. Here, we’ll add the elapsed time and reminder time text to the Radial Gauge using the TimerTime and ReminderTime properties of the TimerModel class from the TimerViewModel BindingContext class.

MainPage.xaml

<ContentPage.BindingContext>
 <local:TimerViewModel/>
</ContentPage.BindingContext>

<gauge:SfRadialGauge Background="#E8E4FF">
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis ShowLabels="False"  
         StartAngle="270"
         EndAngle="270"
         ShowAxisLine="False"
         ShowTicks="False">
   <gauge:RadialAxis.Annotations>
    <gauge:GaugeAnnotation>
     <gauge:GaugeAnnotation.Content>
      <VerticalStackLayout>
       <Label Text="Timer" HorizontalOptions="Center"/>
       <Label Text="{Binding TimerModel.TimerTime}" 
              FontSize="22"
              TextColor="Black"
              FontAttributes="Bold"/>
      </VerticalStackLayout>
     </gauge:GaugeAnnotation.Content>
    </gauge:GaugeAnnotation>
    <gauge:GaugeAnnotation DirectionUnit="Angle"
           DirectionValue="90"
           PositionFactor="0.65"
           VerticalAlignment="Start">
     <gauge:GaugeAnnotation.Content>
      <HorizontalStackLayout BindingContext="{Binding}" IsVisible="{Binding IsReminderTimeVisible}">
       <Image Background="#E8E4FF" Source="notification.png" VerticalOptions="Center" HeightRequest="30" WidthRequest="30"/>
       <Label Text="{Binding TimerModel.ReminderTime}" HorizontalOptions="Start" VerticalOptions="Center"/>
      </HorizontalStackLayout>
     </gauge:GaugeAnnotation.Content>
    </gauge:GaugeAnnotation>
   </gauge:RadialAxis.Annotations>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Refer to the following image.

Displaying elapsed time and reminder text in the .NET MAUI Radial Gauge

Step 8: Start the timer

Once the time is selected in the Time Picker control , the Start Timer Button is enabled to Start the IDispatcherTimer, which executes the dispatcher queue to determine the elapsed time and Radial Gauge pointer value.

Refer to the following code example to design and add the Start Timer button.

MainPage.xaml

<Button Text="Start Timer" CornerRadius="10" HeightRequest="40" Margin="10,20,10,0" VerticalOptions="Center" IsEnabled="{Binding IsStartButtonEnabled}" Command="{Binding StartButtonCommand}"/>

Refer to the following code example to Start the IDispatcherTimer and change the visibility of the .NET MAUI Time Picker and Radial Gauge based on the Time Picker’s selected time.

TimerViewModel.cs

public class TimerViewModel : INotifyPropertyChanged
{  
   private bool isStartButtonEnabled;
   public Command StartButtonCommand { get; set; }
   public bool IsStartButtonEnabled
   {
     get
     {
         return isStartButtonEnabled;
     }
     set
     {
         this.isStartButtonEnabled = value;
         this.OnPropertyChanged(nameof(IsStartButtonEnabled));
     }
   }

   public TimerViewModel()
   {
       this.StartButtonCommand = new Command(OnStartButtonClick);
       this.IsStartButtonEnabled = false;
   }

   private void OnStartButtonClick()
   {
      this.TimerModel.TimerPointerValue = 100;
      this.IsReminderTimeVisible = true;
      this.timerTick = this.TimerModel.SelectedTime;
      this.TimerModel.TimerTime = this.TimerModel.SelectedTime.ToString(@"hh\:mm\:ss");
      this.ButtonText = "Pause";

      if (this.TimerModel.SelectedTime > TimeSpan.Zero)
      {
          this.PickerIsVisible = false;
          this.RadialGaugeIsVisible = true;
          this.StartTimer();
      }
  }

  private void StartTimer()
  {
      this.TimerModel.ReminderTime = DateTime.Now.AddSeconds(this.TimerModel.SelectedTime.TotalSeconds).ToShortTimeString();
      if (!this.timer.IsRunning)
          this.timer?.Start();
  }
}

Refer to the following image.

Adding the Start Timer button in the .NET MAUI Timer app

Step 9: Stop the timer

Let’s design the Cancel button to stop the timer.

MainPage.xaml

<Button Text="Cancel" CornerRadius="10" Background="#6750A4" WidthRequest="85" HeightRequest="40" Command="{Binding CancelButtonCommand}"/>

Then, we need to set the value of the IDispatcherTimer to Stop and reset the TimerModel properties value to the default.

Refer to the following code example to stop the IDispatcherTimer and change the visibility of the .NET MAUI Time Picker and Radial Gauge when clicking the Cancel button.

TimerViewModel.cs

public Command CancelButtonCommand { get; set; }
public TimerViewModel()
{
    this.CancelButtonCommand = new Command(OnCancelButtonClick);
}

private void OnCancelButtonClick()
{
    this.TimerModel.SelectedTime = new TimeSpan();
    this.PickerIsVisible = true;
    this.RadialGaugeIsVisible = false;
    this.TimerModel.TimerPointerValue = 100;
    this.TimerModel.TimerTime = string.Empty;
    this.timerTick = new TimeSpan();
    this.StopTimer();
}

private void StopTimer()
{
    if (this.timer.IsRunning)
         this.timer?.Stop();
}

Refer to the following image.

Adding the Cancel button in the .NET MAUI Timer app

Step 10: Pause or resume the timer

Let’s design the Pause or Resume button.

MainPage.xaml

<Button Text="{Binding ButtonText}" Background="#6750A4" WidthRequest="85" HeightRe-quest="40" Grid.Column="1" CornerRadius="10" Command="{Binding PauseButtonCommand}"/>

Then, we need to set the value as Stop or Start in the IDispatcherTimer and the Reminder time based on the Pause or Resume click action.

TimerViewModel.cs

public class TimerViewModel : INotifyPropertyChanged
{
  public Command PauseButtonCommand { get; set; }
  private string buttonText;

  public string ButtonText
  {
      get
      {
          return buttonText;
      }
      set
      {
          buttonText = value;
          this.OnPropertyChanged(nameof(ButtonText));
      }
  }

  public TimerViewModel()
  {
       this.PauseButtonCommand = new Command(OnPauseButtonClick);
       this.ButtonText = "Pause";
  }

  private void OnPauseButtonClick()
  {
      this.TimerModel.ReminderTime = DateTime.Now.AddSeconds(this.timerTick.TotalSeconds).ToShortTimeString();
      if (this.ButtonText == "Pause")
      {
          this.StopTimer();
          this.ButtonText = "Resume";
          this.IsReminderTimeVisible = false;
      }
      else if (this.ButtonText == "Resume")
      {
          this.StartTimer();
          this.ButtonText = "Pause";
          this.IsReminderTimeVisible = true;
      }
  }
}

Refer to the following images.

Pause button in the .NET MAUI timer app

Resume button on the .NET MAUI timer app

Designing a Timer app using .NET MAUI Radial Gauge and Time Picker controls

GitHub reference

For more details, download the complete example of Designing a timer app using .NET MAUI Radial Gauge and Time Picker.

Conclusion

Thanks for reading! In this blog, we’ve learned how to design a timer app using the Syncfusion .NET MAUI Radial Gauge and Time Picker controls. Give it a try, and leave your feedback in the comment section below.

For our customers, the latest version of Essential Studio is available from the License and Downloads page. If you’re not a Syncfusion customer, try our 30-day free trial to evaluate our components.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Mastering Dynamic Editing in Flutter Charts

Gayathri-github7 — Tue, 30 Jul 2024 12:15:42 +0000

TL;DR: Learn how to dynamically edit and update data in Syncfusion Flutter Charts, enabling real-time visualizations. This guide covers integrating Flutter Charts with the Flutter DataGrid for seamless data manipulation. Features include editing, sorting, and drag-and-drop data updates, all with interactive and fluid animations.

The Syncfusion Flutter Charts include functionality for plotting 30+ charts. This widget lets you display live data that changes in seconds or minutes. It updates itself when the data changes or is added at run time. The dynamically updated data point values are rendered with fluid easing animation.

In this blog, we’ll explore how to dynamically edit, sort, drag, and drop data in the Syncfusion Flutter Charts widget. Here, we will edit the data in the Flutter DataGrid widget and update the Flutter Charts accordingly. This feature lets users interactively edit or replace data points directly on the Charts, providing a more dynamic and intuitive data visualization experience.

Refer to the following image.

Dynamically editing and updating data in the Syncfusion Flutter Chart

1. Dynamically editing Flutter Charts while editing the DataGrid

Here, when you edit the data within the data grid, the changes are immediately reflected in the corresponding chart. This ensures that your visualizations are always current and accurately represent the latest data. Let’s see the steps to implement this real-time update functionality, with necessary code examples and configurations.

Setting up the Flutter Charts

Let’s configure the Flutter Charts, primaryXAxis and primaryYAxis to represent your data’s categories and numeric values, respectively. Here, we’ll use the Flutter ColumnSeries to visualize employees’ data. This series fetches data from Employee data source, mapping each employee’s name to the x-axis and their value to the y-axis.

To further enhance the user experience, we’ll enable the series data labels using the dataLabelSettings. This will provide immediate visual feedback, making it easier to understand the data points briefly.

Moreover, the onRendererCreated callback provides access to the chart’s series controller. This controller is a powerful tool that allows you to programmatically update and customize the chart, making chart data editing a breeze.

Refer to the following code example.

SfCartesianChart _buildColumnChart() {
   return SfCartesianChart(
      primaryXAxis: const CategoryAxis(),
      primaryYAxis: const NumericAxis(),
      series: <ColumnSeries>[
        ColumnSeries<Employee, String>(
          dataSource: _source.employees,
          xValueMapper: (Employee employee, int index) => employee.name,
          yValueMapper: (Employee employee, int index) => employee.yValue,
          sortFieldValueMapper: (Employee employee, int index) =>
              _sortby == 'name' ? employee.name : employee.yValue,
          sortingOrder: _sortingOrder,
          dataLabelSettings: const DataLabelSettings(isVisible: true),
          onRendererCreated: (ChartSeriesController controller) {
            _controller = controller;
          },
        ),
      ],
   );
 }

Setting up the Flutter DataGrid

Next, we’ll use Syncfusion’s Flutter DataGrid to create a powerful data management tool that not only displays employee information but also allows for seamless data editing.

To achieve this, define the structure of the DataGrid, including column widths, data source, editing capabilities, navigation, and selection modes. Each column represents a different aspect of employee data, such as name and performance value, ensuring users can quickly identify and manage the necessary information.

With the source property, lay the foundation for your grid’s data by linking it to an instance of the EmployeeDataSource. We can use the gridLinesVisibility property to make the grid lines visible for both rows and columns. With the headerGridLinesVisibility property, we can ensure that header grid lines are visible, providing a clear delineation between headers and data.

By setting the allowEditing parameter to true, you empower users to modify employee data directly within the grid. Whether updating performance scores or correcting typos in employee names, users have complete control over the data editing process.

Refer to the following code example.

SfDataGrid _buildDataGrid() {
    const TextStyle textStyle = TextStyle(fontWeight: FontWeight.bold);
    return SfDataGrid(
      columnWidthMode: ColumnWidthMode.fill,
      source: _source,
      navigationMode: GridNavigationMode.cell,
      selectionMode: SelectionMode.single,
      gridLinesVisibility: GridLinesVisibility.both,
      headerGridLinesVisibility: GridLinesVisibility.both,
      allowEditing: true,      
      columns: <GridColumn>[
        GridColumn(
          columnName: 'name',
          label: Container(
            padding: const EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: const Text('Name',
                style: textStyle, overflow: TextOverflow.ellipsis),
          ),
        ),
        GridColumn(
          columnName: 'yValue',
          label: Container(
            padding: const EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: const Text('Value',
                style: textStyle, overflow: TextOverflow.ellipsis),
          ),
        ),
      ],
    );
}

The buildEditWidget method serves as the gateway to data manipulation, providing a dynamic interface for entering and submitting changes.

At its core, the onCellSubmit method serves as the bridge between user edits and data persistence. When a user makes changes to a cell within the Flutter DataGrid, whether it’s updating an employee’s name or tweaking their performance score, the onCellSubmit method springs into action, ensuring that these changes are reflected in the underlying data model.

Refer to the following code example.

@override
Future<void> onCellSubmit(DataGridRow dataGridRow,
  RowColumnIndex rowColumnIndex, GridColumn column) async {
    final dynamic oldValue = dataGridRow
            .getCells()
            .firstWhereOrNull((DataGridCell dataGridCell) =>
                dataGridCell.columnName == column.columnName)
            ?.value ??
        '';

    final int dataRowIndex = _dataGridRows.indexOf(dataGridRow);

    if (newCellValue == null || oldValue == newCellValue) {
      return;
    }

    editedRowIndex = dataRowIndex;

    if (column.columnName == 'name') {
      _dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
          DataGridCell<String>(columnName: 'name', value: newCellValue);
      employees[dataRowIndex].name = newCellValue.toString();
    } else if (column.columnName == 'yValue') {
      num? yValue = newCellValue as num?;
      _dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] =
          DataGridCell<num?>(columnName: 'yValue', value: yValue);
      employees[dataRowIndex].yValue = yValue;
    }
  }

  @override
  Widget? buildEditWidget(DataGridRow dataGridRow,
   RowColumnIndex rowColumnIndex, GridColumn column, CellSubmit submitCell) {
    final String displayText = dataGridRow
            .getCells()
            .firstWhereOrNull((DataGridCell dataGridCell) =>
                dataGridCell.columnName == column.columnName)
            ?.value
            ?.toString() ??
        '';

    newCellValue = null;
    final bool isNumericType = column.columnName == 'yValue';
    final RegExp regExp = _regExp(isNumericType, column.columnName);

    return Container(
      ….
        keyboardType: isNumericType ? TextInputType.number : TextInputType.text,
        onChanged: (String value) {
          if (value.isNotEmpty) {
            if (isNumericType) {
              newCellValue = double.parse(value);
            } else {
              newCellValue = value;
            }
          } else {
            newCellValue = null;
          }
        },
        onSubmitted: (String value) {
          submitCell();
        },
      ),
    );
  }

Integrating Flutter DataGrid and Charts

With each edit made within the Flutter DataGrid, you trigger a cascade of updates within the Flutter Charts widget, ensuring that visualizations reflect the latest changes in real time.

When a user submits a cell edit within the DataGrid, the updateChart function is called. This function serves as the bridge between the DataGrid and the Charts widgets, ensuring that any changes made in the DataGrid are propagated to the Charts to perform the chart data editing in real time.

Refer to the following code example.

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(this.employees, this._updateChartData) {
    ….
  }

  …..
  VoidCallback _updateChartData;


  @override
  Future<void> onCellSubmit(DataGridRow dataGridRow,
  RowColumnIndex rowColumnIndex, GridColumn column) async {

    …..

    _updateChartData.call();
  }
}
… 

void _updateDataSource() {
    _controller?.updateDataSource(updatedDataIndex: _source.editedRowIndex);
}

Refer to the following image.

Dynamically editing and updating data in the Syncfusion Flutter Chart

2. Dynamically sorting the Flutter Charts data while sorting the DataGrid

Sorting is a powerful tool for data analysis. Here, we are going to perform sorting on the Flutter DataGrid, which will automatically refresh and update the Charts data. This ensures that your chart reflects the most current data, significantly enhancing user experience.

With this, users can organize and view their data from different perspectives without any manual updates.

Let’s use the sortingOrder and sortFieldValueMapper properties to sort and update the chart data either by employee name or their performance value. When a column header is clicked, the sorting operation will be initiated. The performSorting method is called with the list of rows to be sorted and updates the chart data accordingly.

Refer to the following code example.

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource(this.employees, this.buildContext, this.updateChart,
  this.updateChartSorting) {
    ….
  }

  …..
  VoidCallback updateChartSorting;
  String? sortedColumnName;
  DataGridSortingOrder sortDirection = DataGridSortingOrder.none;
  DataGridSortingOrder _previousSortDirection = DataGridSortingOrder.none;

  ….

  @override
  Future<void> performSorting(List<DataGridRow> rows) {
    if (sortedColumns.isNotEmpty) {
      sortedColumnName = sortedColumns[0].name;
      sortDirection =
          sortedColumns[0].sortDirection == DataGridSortDirection.ascending
              ? DataGridSortingOrder.ascending
              : DataGridSortingOrder.descending;
    } else {
      sortedColumnName = null;
      sortDirection = DataGridSortingOrder.none;
    }

    if (_previousSortDirection != sortDirection) {
      updateChartSorting.call();
      _previousSortDirection = sortDirection;
    }
    return super.performSorting(rows);
  }
}

void _updateDataSorting() {
  setState(
      () {
        _sortingOrder =
            _employeeDataSource.sortDirection == DataGridSortingOrder.ascending
                ? SortingOrder.ascending
                : _employeeDataSource.sortDirection ==
                        DataGridSortingOrder.descending
                    ? SortingOrder.descending
                    : SortingOrder.none;
        _sortby = _employeeDataSource.sortedColumnName.toString();
      },
  );
}

Refer to the following image.

Dynamically sorting Flutter Charts data while sorting the DataGrid

3. Dynamically editing/replacing Flutter Charts data while dragging the data using touch methods

Interactive data points allow users to manipulate the data displayed on the chart directly. By enabling touch methods, users can drag data points to new values and edit or replace chart data to reflect these changes. This interaction provides a hands-on approach to data analysis and makes the chart more engaging. We’ll demonstrate how to implement this feature, making your charts more responsive and user-friendly.

Declare the onChartTouchInteractionMove and onChartTouchInteractionUp callbacks within the SfCartesianChart widget. These callbacks become the cornerstone of user interaction, capturing touch events and laying the foundation for real-time chart updating. With touch events at your fingertips, you delve into the realm of interactivity. As users drag their fingers across the chart, harness the power of the ChartSeriesController and onRendererCreated callback to convert touch event positions into data points. This transformation becomes the bridge between user input and data manipulation.

With each touch event, users are granted the ability to drag and manipulate data points with ease. As they move their fingers across the chart, original data points are removed, and updated data points are inserted in their place. This seamless transition between old and new data points forms the backbone of real-time chart data editing and updating.

Refer to the following code example.

int? pointIndex;
ChartSeriesController? _controller;

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCartesianChart(
        onChartTouchInteractionMove: (ChartTouchInteractionArgs tapArgs) {
          _updateDataPoint(tapArgs);
        },
        onChartTouchInteractionUp: (ChartTouchInteractionArgs tapArgs) {
          _updateDataPoint(tapArgs);
          pointIndex = null;
        },
        series: <CartesianSeries<ChartData, num>>[
          LineSeries<ChartData, num>(
            dataSource: chartData,
            xValueMapper: (ChartData data, int index) => data.x,
            yValueMapper: (ChartData data, int index) => data.y,
            markerSettings: const MarkerSettings(isVisible: true),
            onPointLongPress: (ChartPointDetails pointInteractionDetails) {
              pointIndex = pointInteractionDetails.pointIndex;
            },
            onRendererCreated: (ChartSeriesController controller) {
              _controller = controller;
            },
          ),
        ],
      ),
   );
}

void _updateDataPoint(ChartTouchInteractionArgs tapArgs) {
    if (pointIndex != null) {
      CartesianChartPoint<dynamic> dragPoint =
          _controller!.pixelToPoint(tapArgs.position);
      chartData.removeAt(pointIndex!);

      chartData.insert(
          chartData.length - 1, ChartData(dragPoint.x, dragPoint.y as double?));

      _controller!.updateDataSource(updatedDataIndex: pointIndex!);
    }
}

Refer to the following image.

Dynamically editingreplacing Flutter Charts data while dragging the data using touch methods

4. Dynamically editing or replacing Flutter Charts data using the updateDataSource method

Syncfusion’s tools make it easy to update the data source and have those changes reflected in the Flutter Charts. Whether you’re adding new data, deleting existing points, or modifying current values, the Charts widget will adjust accordingly. Here, we’ll guide you through the process of updating the data source, ensuring that your Charts remain accurate and up to date.

The updateDataSource method in the ChartSeriesController class efficiently updates the data source of a chart series without re-rendering the entire chart. This method is particularly useful when you need to modify, add, or remove data points dynamically in response to real-time chart or chart live updates or changes in data. The updateDataSource method significantly improves performance by processing only the modified data points.

Certainly! The updateDataSource method provides flexibility in updating data points in bulk or individually, depending on the scenario. When you need to update a huge volume of data points at once, using the properties ending with Indexes ( addedDataIndexes, removedDataIndexes, and updatedDataIndexes ) is more efficient. When you’re modifying only one or a few data points, it’s more convenient to use the properties ending with Index ( addedDataIndex, removedDataIndex, and updatedDataIndex ).

Refer to the following code example.

ChartSeriesController? _controller;

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: SfCartesianChart(            
              series: <CartesianSeries<ChartData, num>>[
                LineSeries<ChartData, num>(
                 ….
                  onRendererCreated: (ChartSeriesController controller) {
                    _chartSeriesController = controller;
                  },
                ),
              ],
            ),
          ),
          TextButton(
            onPressed: () {
              // Update data
              chartData[1] = ChartData(2, 50);
              _controller!.updateDataSource(updatedDataIndex: 1);

              // Update datas
              chartData[1] = ChartData(2, 70);
              chartData[2] = ChartData(3, 80);
              chartData[3] = ChartData(4, 90);

              _chartSeriesController!
                  .updateDataSource(updatedDataIndexes: [1, 2, 3]);
            },
            child: const Text('Update Data'),
          ),
        ],
      ),
   );
}

Refer to the following image.

Dynamically editing or replacing Flutter Charts data using the updateDataSource method

GitHub reference

For more details, refer to dynamic editing in the Flutter Charts GitHub demo.

Conclusion

Thanks for reading! In this blog, we have seen how to dynamically edit data in the Syncfusion Flutter Charts widget with the help of DataGrid. Integrating these widgets allows you to create powerful real-time live update and chart sorting visualizations that update automatically based on user input. Also, we demonstrated how to enable efficient data updates and interactive data dragging in the Charts. By leveraging the updateDataSource method, you can interactively modify, add, or remove data points without re-rendering the entire chart, thus enhancing the performance of your Flutter apps.

Try the methods discussed in this blog, and leave your feedback in the comments below!

If you have any questions, contact us through our support forum, support portal, or feedback portal. As always, we are here to assist you!

Related blogs

Easily Create Multi-Parent Hierarchical Trees with Blazor Diagram Component

Gayathri-github7 — Thu, 25 Jul 2024 13:34:39 +0000

TL;DR: The Syncfusion Blazor Diagram component is a powerful tool for creating interactive diagrams. Learn how to easily create a multi-parent hierarchical tree diagram, customize node spacing, adjust layouts, and utilize features like zoom, pan, expand/collapse, and export for a comprehensive visual experience.

In the digital age, effectively visualizing complex relationships is crucial for any domain, from organizational structures to data science projects. Hierarchical trees with multiple parents, also known as directed acyclic graphs (DAGs), offer a powerful way to represent these intricate connections.

In this blog, we’ll see how to create a hierarchical tree with multiple parents using the Syncfusion Blazor Diagram component.

Refer to the following image. Here, the rectangular boxes represent the nodes, and the curved lines represent the connectors.

Creating a hierarchical tree with multiple parents using Blazor Diagram component

Whether you’re a developer looking to streamline your workflow or a business analyst aiming to present data more intuitively, this guide will walk you through the step-by-step process to harness the versatile Blazor Diagram component’s full potential.

Let’s get started!

Creating a hierarchical tree diagram with multiple parents

The Syncfusion Blazor Diagram component is designed to straightforwardly create hierarchical diagrams with multiple parents. It supports external data sources and can easily convert and map data into a visual diagram by setting a few properties.

Configuring the Blazor Diagram component

Follow these steps to get started with the Blazor Diagram component:

First, refer to the Getting started with the Blazor Diagram library documentation to learn more about the dependent scripts and theme files required to integrate the Diagram component in a Blazor app.
Define the tree information as a collection of data.
Then, render the SfDiagramComponent with the DataSourceSettings class.
Configure the data to the DataSource property of the DataSourceSettings class.
Define the common formatting for all nodes and connectors through the NodeCreating and *ConnectorCreating * methods, respectively.
After configuring the data source, define the layout type as ComplexHierarchicalTree to automatically arrange the nodes’ positions. Refer to the following code example or the Blazor Playground app.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram" Created="OnCreated" Height="690px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating" InteractionController="@DiagramInteractions.ZoomPan">
  <DataSourceSettings ID="Id" ParentID="ReportingPerson" DataSource="DataSource"></DataSourceSettings>
  <Layout @bind-Type="@Type" @bind-VerticalSpacing="@VerticalSpacing" @bind-SamePoint="@samepoint" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@OrientationType" HorizontalAlignment="@HorizontalAlignment" VerticalAlignment="@VerticalAlignment">
    <LayoutMargin Top="50" Bottom="0" Right="0" Left="10"></LayoutMargin>
  </Layout>
  <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code
{
    private Orientation subTreeOrientation = Orientation.Vertical;
    private bool samepoint = false;
    private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Right;

    public SfDiagramComponent Diagram;
    public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;
    public LayoutType Type = LayoutType.ComplexHierarchicalTree;
    public HorizontalAlignment HorizontalAlignment = HorizontalAlignment.Left;
    public VerticalAlignment VerticalAlignment = VerticalAlignment.Top;
    public int HorizontalSpacing = 40;
    public int VerticalSpacing = 40;


    // Defines default values for the Node object.
    private void OnNodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Width = 40; node.Height = 40;
        //Initialize shape.
        HierarchicalDetails hierarchicalDetails = node.Data as HierarchicalDetails;
        node.Shape = new BasicShape() { Type =Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 7 };
        node.Style = new ShapeStyle() { Fill = hierarchicalDetails.FilllColor, StrokeWidth = 1, StrokeColor = hierarchicalDetails.Border };
    }
    // Defines default values for the Connector object.
    private void OnConnectorCreating(IDiagramObject connector1)
    {
        Connector connector = (connector1 as Connector);
        connector.Type = ConnectorSegmentType.Orthogonal;
        connector.CornerRadius = 7;
        connector.Style = new ShapeStyle()
        {
            StrokeColor= "#6d6d6d",
        };
        connector.TargetDecorator.Height = 7;
        connector.TargetDecorator.Width = 7;
    }
    private void OnCreated()
    {
        FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content };
        Diagram.FitToPage(options);
    }
    public class HierarchicalDetails
    {
        public string Id { get; set; }
        public string FilllColor { get; set; }
        public string Border { get; set; }
        public string Label { get; set; }
        public List<string> ReportingPerson { get; set; }
    }
    //DataSource items.
    public List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()
    {
        new HierarchicalDetails() { Id= "node11", Label = "StackPanel",FilllColor="#e7704c", Border="#c15433" },
        new HierarchicalDetails() { Id= "node12", Label= "StackPanel1", ReportingPerson = new List<string>(){ "node114" },FilllColor="#efd46e", Border="#d6b123" },
        new HierarchicalDetails() { Id= "node13", Label= "StackPanel2",ReportingPerson = new List<string>(){ "node12" },FilllColor="#58b087", Border="#16955e" },
        new HierarchicalDetails() { Id= "node14", Label= "StackPanel3",ReportingPerson = new List<string>(){ "node12"},FilllColor="#58b087", Border="#16955e" },
        new HierarchicalDetails() { Id= "node15", Label= "StackPanel4", ReportingPerson = new List<string>(){ "node12" },FilllColor="#58b087", Border="#16955e" },
        new HierarchicalDetails() { Id= "node116", Label= "StackPanel16",ReportingPerson = new List<string>(){ "node22", "node12"},FilllColor="#58b087", Border="#16955e" },
        new HierarchicalDetails() { Id= "node17", Label= "StackPanel6",ReportingPerson = new List<string>(){ "node13", "node14", "node15"},FilllColor="#659be5", Border="#3a6eb5"},
        new HierarchicalDetails() { Id= "node19", Label= "StackPanel8",ReportingPerson = new List<string>(){"node16", "node17", "node18" },FilllColor="#8dbe6c", Border="#489911"},
        new HierarchicalDetails() { Id= "node110", Label= "StackPanel9", ReportingPerson = new List<string>(){ "node16", "node17", "node18" },FilllColor="#8dbe6c", Border="#489911" },
        new HierarchicalDetails() { Id= "node111", Label= "StackPanel10",ReportingPerson = new List<string>(){"node16", "node17", "node18","node116" },FilllColor="#8dbe6c", Border="#489911"},
        new HierarchicalDetails() { Id= "node21", Label= "StackPanel11" ,FilllColor="#e7704c", Border="#c15433"},
        new HierarchicalDetails() { Id= "node22", Label= "StackPanel12",ReportingPerson = new List<string>(){"node114" },FilllColor="#efd46e", Border="#d6b123"},
        new HierarchicalDetails() { Id= "node23", Label= "StackPanel13", ReportingPerson = new List<string>(){ "node22" } ,FilllColor="#58b087", Border="#16955e"},
        new HierarchicalDetails() { Id= "node24", Label= "StackPanel14",ReportingPerson = new List<string>(){ "node22" },FilllColor="#58b087", Border="#16955e" },
        new HierarchicalDetails() { Id= "node25", Label= "StackPanel15",ReportingPerson = new List<string>(){"node22" },FilllColor="#58b087", Border="#16955e"},
        new HierarchicalDetails() { Id= "node27", Label= "StackPanel17",ReportingPerson = new List<string>(){"node23", "node24", "node25" },FilllColor="#659be5", Border="#3a6eb5"},
        new HierarchicalDetails() { Id= "node29", Label= "StackPanel19",ReportingPerson = new List<string>(){ "node26", "node27", "node28", "node116" } ,FilllColor="#8dbe6c", Border="#489911" },
        new HierarchicalDetails() { Id= "node210", Label= "StackPanel20",ReportingPerson = new List<string>(){"node26", "node27", "node28"} ,FilllColor="#8dbe6c", Border="#489911"},
        new HierarchicalDetails() { Id= "node211", Label= "StackPanel21",ReportingPerson = new List<string>(){ "node26", "node27", "node28" } ,FilllColor="#8dbe6c", Border="#489911" },
        new HierarchicalDetails() { Id= "node31", Label= "StackPanel22" ,FilllColor="#e7704c", Border="#c15433"},
        new HierarchicalDetails() { Id= "node114", Label= "StackPanel23", ReportingPerson = new List<string>(){ "node11", "node21", "node31" } ,FilllColor="#f3904a", Border="#d3722e" },

    };
}

Using nodes and connectors

You can also construct a multi-parent hierarchical tree using a collection of nodes and connectors. This method gives you more control over your diagram’s individual elements.

Refer to the following code example.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
    <Layout Type="LayoutType.ComplexHierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
    </Layout>
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code
{
    //Initialize the diagram's nodes collection.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    //Initialize the diagram's connectors collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    int HorizontalSpacing = 40;
    int VerticalSpacing = 40;
    //Method to set node's default properties.
    private void OnNodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Height = 40;
        node.Width = 50;
        //Initializing the default node's shape style.
        node.Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" };
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation
            {
                Content = node.Annotations[0].Content,
                Style = new TextStyle() { Color = "white", Bold = true },
            }
        };
    }
    //Method to set connector's default properties.
    private void OnConnectorCreating(IDiagramObject connector)
    {
        (connector as Connector).Type = ConnectorSegmentType.Orthogonal;
        (connector as Connector).CornerRadius = 5;
        (connector as Connector).TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" } };
        (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6CA0DC" };

    }

    protected override void OnInitialized()
    {
        //Initializing node and connectors.
        nodes = new DiagramObjectCollection<Node>()
        {
            new Node() { ID="node1", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="node1"} } },
            new Node() { ID="node2", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="node2"} } },
            new Node() { ID="node3", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="node3"} } },
            new Node() { ID="node4", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="node4"} } },
            new Node() { ID="node5", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="node5"} } },
        };
        connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector() { ID="connector1", SourceID="node1", TargetID="node4" },
            new Connector() { ID="connector2", SourceID="node2", TargetID="node4" },
            new Connector() { ID="connector3", SourceID="node3", TargetID="node4" },
            new Connector() { ID="connector4", SourceID="node4", TargetID="node5" },
        };
    }
}

Refer to the following image.

Creating a hierarchical tree with multiple parents using nodes and connectors

Using dynamic and expando objects

For even more flexibility, you can create a multi-parent layout using dynamic and expando objects. This approach lets you handle data that might change or expand over time without a pre-defined structure.

Refer to the following code example.

@using Syncfusion.Blazor.Diagram
@using System.Text.Json;
@using System.Dynamic;

<SfDiagramComponent @ref="@diagram" Width="100%" Height="580px" NodeCreating="NodeCreating" ConnectorCreating="ConnectorCreating">
    <DataSourceSettings DataSource="@ExpandoDataSource" ID="Id" ParentID="ReportingPerson"></DataSourceSettings>
    <Layout Type="LayoutType.ComplexHierarchicalTree" VerticalAlignment="VerticalAlignment.Auto" HorizontalAlignment="HorizontalAlignment.Auto" Orientation="LayoutOrientation.TopToBottom" HorizontalSpacing="40" VerticalSpacing="40">
    </Layout>
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code {
    public SfDiagramComponent diagram;
    public List<ExpandoObject> ExpandoDataSource { get; set; }
    public List<ExpandoObject> ExpandoData = new List<ExpandoObject>();

    public class HierarchicalDetails
    {
        public string Id { get; set; }
        public string FilllColor { get; set; }
        public string Border { get; set; }
        public string Label { get; set; }
        public List<string> ReportingPerson { get; set; }
    }
    protected override void OnInitialized()
    {
        this.ExpandoDataSource = GetData();
    }

    public List<ExpandoObject> GetData()
    {
        ExpandoData.Clear();
        dynamic Member1 = new ExpandoObject();

        Member1.Id = "node11";
        Member1.Label = "StackPanel";
        Member1.FillColor = "#e7704c";
        Member1.Border = "#c15433";
        ExpandoData.Add(Member1);

        dynamic Member2 = new ExpandoObject();

        Member2.Id = "node12";
        Member2.Label = "StackPanel1";
        Member2.ReportingPerson = new List<string>() { "node114" };
        Member2.FillColor = "#efd46e";
        Member2.Border = "#d6b123";

        ExpandoData.Add(Member2);

        dynamic Member7 = new ExpandoObject();

        Member7.Id = "node13";
        Member7.Label = "StackPanel2";
        Member7.ReportingPerson = new List<string>() { "node12" };
        Member7.FillColor = "#58b087";
        Member7.Border = "#16955e";
        ExpandoData.Add(Member7);

        dynamic Member3 = new ExpandoObject();

        Member3.Id = "node14";
        Member3.Label = "StackPanel3";
        Member3.ReportingPerson = new List<string>() { "node12" };
        Member3.FillColor = "#58b087";
        Member3.Border = "#16955e";
        ExpandoData.Add(Member3);

        dynamic Member8 = new ExpandoObject();

        Member8.Id = "node15";
        Member8.Label = "StackPanel4";
        Member8.ReportingPerson = new List<string>() { "node12" };
        Member8.FillColor = "#58b087";
        Member8.Border = "#16955e";
        ExpandoData.Add(Member8);

        dynamic Member10 = new ExpandoObject();

        Member10.Id = "node116";
        Member10.Label = "StackPanel16";
        Member10.ReportingPerson = new List<string>() { "node22", "node12" };
        Member10.FillColor = "#58b087";
        Member10.Border = "#16955e";
        ExpandoData.Add(Member10);

        dynamic Member11 = new ExpandoObject();

        Member11.Id = "node17";
        Member11.Label = "StackPanel6";
        Member11.ReportingPerson = new List<string>() { "node13", "node14", "node15" };
        Member11.FillColor = "#659be5";
        Member11.Border = "#3a6eb5";
        ExpandoData.Add(Member11);

        dynamic Member13 = new ExpandoObject();

        Member13.Id = "node19";
        Member13.Label = "StackPanel8";
        Member13.ReportingPerson = new List<string>() { "node16", "node17", "node18" };
        Member13.FillColor = "#8dbe6c";
        Member13.Border = "#489911";
        ExpandoData.Add(Member13);

        dynamic Member5 = new ExpandoObject();

        Member5.Id = "node110";
        Member5.Label = "StackPanel9";
        Member5.ReportingPerson = new List<string>() { "node16", "node17", "node18" };
        Member5.FillColor = "#8dbe6c";
        Member5.Border = "#489911";
        ExpandoData.Add(Member5);

        dynamic Member14 = new ExpandoObject();

        Member14.Id = "node111";
        Member14.Label = "StackPanel10";
        Member14.ReportingPerson = new List<string>() { "node16", "node17", "node18", "node116" };
        Member14.FillColor = "#8dbe6c";
        Member14.Border = "#489911";
        ExpandoData.Add(Member14);

        dynamic Member15 = new ExpandoObject();

        Member15.Id = "node21";
        Member15.Label = "StackPanel11";
        Member15.FillColor = "#e7704c";
        Member15.Border = "#c15433";
        ExpandoData.Add(Member15);

        dynamic Member6 = new ExpandoObject();

        Member6.Id = "node22";
        Member6.Label = "StackPanel12";
        Member6.ReportingPerson = new List<string>() { "node114" };
        Member6.FillColor = "#efd46e";
        Member6.Border = "#d6b123";
        ExpandoData.Add(Member6);

        dynamic Member16 = new ExpandoObject();

        Member16.Id = "node23";
        Member16.Label = "StackPanel13";
        Member16.ReportingPerson = new List<string>() { "node22" };
        Member16.FillColor = "#58b087";
        Member16.Border = "#16955e";
        ExpandoData.Add(Member16);

        dynamic Member17 = new ExpandoObject();

        Member17.Id = "node24";
        Member17.Label = "StackPanel14";
        Member17.ReportingPerson = new List<string>() { "node22" };
        Member17.FillColor = "#58b087";
        Member17.Border = "#16955e";
        ExpandoData.Add(Member17);

        dynamic Member18 = new ExpandoObject();

        Member18.Id = "node25";
        Member18.Label = "StackPanel15";
        Member18.ReportingPerson = new List<string>() { "node22" };
        Member18.FillColor = "#58b087";
        Member18.Border = "#16955e";
        ExpandoData.Add(Member18);

        dynamic Member20 = new ExpandoObject();

        Member20.Id = "node27";
        Member20.Label = "StackPanel17";
        Member20.ReportingPerson = new List<string>() { "node23", "node24", "node25" };
        Member20.FillColor = "#659be5";
        Member20.Border = "#3a6eb5";
        ExpandoData.Add(Member20);

        dynamic Member22 = new ExpandoObject();

        Member22.Id = "node29";
        Member22.Label = "StackPanel19";
        Member22.ReportingPerson = new List<string>() { "node26", "node27", "node28", "node116" };
        Member22.FillColor = "#8dbe6c";
        Member22.Border = "#489911";
        ExpandoData.Add(Member22);

        dynamic Member23 = new ExpandoObject();

        Member23.Id = "node210";
        Member23.Label = "StackPanel20";
        Member23.ReportingPerson = new List<string>() { "node26", "node27", "node28" };
        Member23.FillColor = "#8dbe6c";
        Member23.Border = "#489911";
        ExpandoData.Add(Member23);

        dynamic Member24 = new ExpandoObject();

        Member24.Id = "node211";
        Member24.Label = "StackPanel21";
        Member24.ReportingPerson = new List<string>() { "node26", "node27", "node28" };
        Member24.FillColor = "#8dbe6c";
        Member24.Border = "#489911";
        ExpandoData.Add(Member24);

        dynamic Member25 = new ExpandoObject();

        Member25.Id = "node31";
        Member25.Label = "StackPanel22";
        Member25.FillColor = "#e7704c";
        Member25.Border = "#c15433";
        ExpandoData.Add(Member25);

        dynamic Member26 = new ExpandoObject();

        Member26.Id = "node114";
        Member26.Label = "StackPanel23";
        Member26.ReportingPerson = new List<string>() { "node11", "node21", "node31" };
        Member26.FillColor = "#f3904a";
        Member26.Border = "#d3722e";
        ExpandoData.Add(Member26);

        return ExpandoData;
    }

    private void NodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Width = 40;
        node.Height = 40;
        node.Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 7 };
        dynamic hierarchicalData = node.Data as ExpandoObject;
        if (hierarchicalData == null)
            hierarchicalData = JsonSerializer.Deserialize<ExpandoObject>(node.Data.ToString());
        node.Style.Fill = hierarchicalData.Border;
        node.Style.StrokeWidth = 1;
    }
    private void ConnectorCreating(IDiagramObject connector)
    {
        (connector as Connector).Type = ConnectorSegmentType.Orthogonal;
        (connector as Connector).CornerRadius = 7;
        (connector as Connector).TargetDecorator.Height = 7;
        (connector as Connector).TargetDecorator.Width = 7;
        (connector as Connector).TargetDecorator.Style.StrokeColor = "#6d6d6d";
    }
}

Refer to the following image.

Creating a hierarchical tree with multiple diagrams using dynamic and expando objects

Customizing connector origins for clear diagrams

In the automatic layout, line distribution is crucial for arranging connectors without overlap. Connectors originating from the same parent node can sometimes overlap, making the diagram unclear.

The SamePoint property in the layout settings allows you to control whether the connectors from a single parent node should start from the same or different points. By default, the SamePoint property is set to true, ensuring a clean and organized diagram.

The following code example illustrates creating a complex hierarchical tree with line distribution.

<Layout Type="LayoutType.ComplexHierarchicalTree" SamePoint="false" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
</Layout>

Refer to the following image.

Creating a complex hierarchical tree with line distribution

Expand and collapse child nodes

You can use the ExpandIcon and CollapseIcon properties of nodes to implement the expand and collapse features in the hierarchical tree’s children nodes.

Refer to the following code example or the Blazor Playground app.

private void OnNodeCreating(IDiagramObject obj)
{
    Node node = obj as Node;
    node.ExpandIcon = new DiagramExpandIcon()
    {
        Shape = DiagramExpandIcons.Minus,
        Height = 15,
        Width = 15,
        Fill = "Gray"
    };
    node.CollapseIcon = new DiagramCollapseIcon()
    {
        Shape = DiagramCollapseIcons.Plus,
        Height = 15,
        Width = 15,
        Fill = "Gray"
    };
}

Refer to the following image.

Expanding and collapsing nodes in hierarchical tree diagram with multiple parents

Drag-and-drop nodes

You can easily change the multi-parent tree layout by dragging a parent or child node and dropping it in the required location. To enable editing of the hierarchical tree structure, add the following code to the Blazor Diagram component’s drop event. The demo is also available on the Blazor Playground app.

private async void Drop(DropEventArgs args)
{
    if (args.Element != null && args.Element is DiagramSelectionSettings diagramSelectionSettings && diagramSelectionSettings.Nodes.Count > 0 && args.Target != null)
    {
        Node node = diagramSelectionSettings.Nodes[0];
        List<string> edges = node.InEdges;
        Connector connector = Diagram.GetObject(edges[0]) as Connector;
        connector.SourceID = (args.Target as Node).ID;
        await Diagram.DoLayout();
    }
}

Refer to the following image.

Dragging and dropping nodes in the Blazor multi-parent hierarchical tree diagram

Spacing

We can adjust the spacing between each level of the multi-parent tree diagram horizontally and vertically. Also, define a margin around the diagram.

Refer to the following code example or the Blazor Playground app.

<Layout Type="LayoutType.ComplexHierarchicalTree" VerticalSpacing="70" HorizontalSpacing="70" Orientation="LayoutOrientation.TopToBottom">
 <LayoutMargin Top="50" Bottom="0" Right="0" Left="10"></LayoutMargin>
</Layout>

Refer to the following image.

Adjusting the spacing between the nodes in the Blazor multi-parent hierarchical tree diagram

Zooming and panning

Viewing a large diagram on a small screen can be challenging. In that case, we can use the zooming and panning features to view the multi-parent tree in detail.

You can zoom in and out of the diagram using the Ctrl + mouse wheel. Refer to the following code example to enable zooming and panning actions in the Diagram component. Also, refer to the demo on the Blazor Playground app.

<SfDiagramComponent ID="Diagram" Height="700px" InteractionController="DiagramInteractions.ZoomPan"></SfDiagramComponent>

Refer to the following image.

Zooming and panning in the Blazor multi-parent hierarchical tree diagram

Exporting

We can also export the diagram to different image formats, such as PNG, JPEG, and SVG. Refer to the following code example or the Blazor Playground app.

private async Task ExportDiagram()
{
    DiagramExportSettings options = new DiagramExportSettings()
    {
        Region = DiagramPrintExportRegion.PageSettings,
        FitToPage = true,
        Margin = new DiagramThickness() { Bottom = 0, Left = 0, Right = 0, Top = 0 },
    };
    DiagramExportFormat format = DiagramExportFormat.JPEG;
    string fileName = "Diagram";
    await Diagram.ExportAsync(fileName, format, options);
}

Conclusion

Thanks for reading! In this blog, we have explored the process of creating and customizing a multi-parent hierarchical tree diagram using the Syncfusion Blazor Diagram component. Give it a try, and leave your feedback in the comments section given below!

Existing customers can download the latest version of Essential Studio on the license and downloads page. If you are not a Syncfusion customer, try our 30-day free trial (No credit card required) to experience our incredible features.

You can also contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Chart of the Week: Creating a WPF Chart Dashboard to Analyze 2024 T20 World Cup Statistics

Gayathri-github7 — Wed, 24 Jul 2024 13:23:44 +0000

TL;DR: Let’s create a WPF Chart dashboard to visualize 2024 T20 World Cup stats. Learn to gather data, define classes, and arrange elements for interactivity. Customize charts and ComboBox selections for an engaging analysis of cricket statistics.

Welcome to the Chart of the Week blog series!

Interpreting raw data can be tedious and challenging. However, visual representations such as charts and graphs make this process significantly easier and more intuitive. When these visual tools are enhanced with interactive features, understanding complex data becomes a piece of cake.

We all recently enjoyed the thrilling matches of the T20 World Cup. Cricket brings out a mix of emotions—joy, grace, and sometimes sadness—creating unforgettable moments for players and fans alike. Everyone has their own favorite teams and players, and opinions vary widely.

In this blog, we’ll show you how to create a rich dashboard to visualize the 2024 T20 World Cup data using the Syncfusion WPF Charts. Unlike typical applications, a dashboard transforms raw data into visually appealing and easily understandable formats. We will specifically focus on visualizing country- wise T20 data using a combo box selection for an interactive experience.

The following chart visually presents the discussed data, clearly comparing the 2024 T20 World Cup data, allowing you to gain insights briefly.

Here, we will visualize the runs scored by the 2024 T20 World Cup tournament players. Let’s explore the steps involved in showcasing these details using the Syncfusion WPF Column Chart.

Step 1: Gathering the T20 data

Before creating the chart dashboard, we need to gather data on the 2024 T20 World Cup from ESPN Sports Media Ltd.

Step 2: Populating the data

To effectively manage and visualize cricket statistics, we’ll define two classes: PlayersData and CountryData. These classes will hold the necessary properties to represent individual player statistics and country-wide performance data, respectively.

PlayersData class properties

Name: Represents the individual player’s name.
Score: Stores the run values of the individual player.

CountryData class properties

Play: Stores the overall count of matches played by each country.
Wins: Represents the count of matches won by each country.
Runs: Stores the run values scored by players by countries.
CatchValue: Demonstrates the number of catches taken by the team.
Score6s: Represents the count of sixes scored by the team.
Score4s: Represents the count of fours scored by the team.
Boundaries: Represents the runs scored by the team through boundaries.
Batter: Represents the top run count data from the team on a country-wise basis.
BatterImage: Stores the image of the best batter.
WicketTaker: Represents the top wicket count from the team on a country-wise basis.
WicketTakerImage: Stores the image of the best wicket-taker.

These classes will provide a structured way to manage and visualize cricket statistics, enabling us to create rich and interactive charting applications.

Refer to the following code example.

public class PlayersData
{
  public string? Name { get; set; } 
  public int Score { get; set; }
}
public class CountryData
{
  public int Play { get; set; } 
  public int Wins { get; set; } 
  public string? Runs { get; set; }
  public int CatchValue { get; set; } 
  public int Score6s { get; set; } 
  public int Score4s { get; set; } 
  public int Boundaries { get; set; } 
  public int Batter { get; set; }
  public string? BatterImage { get; set; } 
  public int WicketTaker { get; set; }
  public string? WicketTakerImage { get; set; }
}

Next, the data collection will be generated using the T20_Data class, which has the following properties that demonstrate the details of a T20 match.

public class T20_Data : INotifyPropertyChanged
{
  private int play; 
  public int Play
  {
     get => play;
     set { play = value; OnPropertyChanged(); }
  }

  private int wins; 
  public int Wins
  {
     get => wins;
     set { wins = value; OnPropertyChanged(); }
  }

  private string runs; 
  public string Runs
  {
     get => runs;
     set { runs = value; OnPropertyChanged(); }
  }

  private int catchValue; 
  public int CatchValue
  {
      get => catchValue;
      set { catchValue = value; OnPropertyChanged(); }
  }

  private int score6s; 
  public int Score6s
  {
      get => score6s;
      set { score6s = value; OnPropertyChanged(); }
  }

  private int score4s; 
  public int Score4s
  {
      get => score4s;
      set { score4s = value; OnPropertyChanged(); }
  }

  private int boundaries; 
  public int Boundaries
  {
     get => boundaries;
     set { boundaries = value; OnPropertyChanged(); }
  }

  private int batter; 
  public int Batter
  {
     get => batter;
     set { batter = value; OnPropertyChanged(); }
  }

  private string batterImage; 
  public string BatterImage
  {
     get => batterImage;
     set { batterImage = value; OnPropertyChanged(); }
  }

  private int wicketTaker; 
  public int WicketTaker
  {
     get => wicketTaker;
     set { wicketTaker = value; OnPropertyChanged(); }
  }

  private string wicketTakerImage; 
  public string WicketTakerImage
  {
     get => wicketTakerImage;
     set { wicketTakerImage = value; OnPropertyChanged(); }
  }

  private ObservableCollection<PlayersData> data; 
  public ObservableCollection<PlayersData> Data
  {
     get => data;
     set { data = value; OnPropertyChanged(); }
  }

  private Dictionary<string, CountryData> countryData; 
  private Dictionary<string, List<PlayersData>> playersData;
  public ObservableCollection<string> CountryOption { get; set; }

  public T20_Data()
  {
     CountryOption = new ObservableCollection<string> { "India", "Ireland", "England", "Pakistan", "Canada", "United States", "Australia", "Scotland", "Oman", "South Africa", "Sri Lanka", "New Zealand", "Afghanistan", "Nepal", "West Indies", "Uganda", "Papua New Guinea", "Namibia", "Netherlands", "Bangladesh"};

     var executingAssembly = typeof(App).GetTypeInfo().Assembly; 
     using (var stream = executingAssembly.GetManifestResourceStream("_2024_T20_Match.Resources.country_data.json"))
     using (var textStream = new StreamReader(stream))
     {
        countryData = JsonConvert.DeserializeObject<Dictionary<string, CountryData>> (textStream.ReadToEnd().Trim());
     }

     using (var stream = executingAssembly.GetManifestResourceStream("_2024_T20_Match.Resources.players_data.json"))
     using (var textStream = new StreamReader(stream))
     {
         playersData = JsonConvert.DeserializeObject<Dictionary<string, List<PlayersData>>>(textStream.ReadToEnd().Trim());
     }
  }

  public event PropertyChangedEventHandler? PropertyChanged;
  protected void OnPropertyChanged([CallerMemberName] string name = "")
  {
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
  }

}

In the above code, we’ve converted the JSON data to a collection using the StreamReader and JsonConvert.DeserializeObject methods from the Newtonsoft.Json package. Then, we stored the converted data in the appropriate properties.

Step 3: Defining the layout

Defining the layout is a crucial step in creating a dashboard. The layout determines the overall look and feel, making the dashboard visually appealing and easy to understand. A well-organized layout ensures that the data is presented clearly and intuitively.

To define the layout, we’ll add a Border and a Grid to arrange the elements neatly. Refer to the following code example.

<Border Margin="20" Padding="7" BorderThickness="2" CornerRadius="10" Background="#007B53" BorderBrush="#b0b8bf">

 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="50"/>
   <RowDefinition Height="*"/>
   <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
 </Grid>

</Border>

Step 4: Arranging the elements in the layout

After defining the layout, we can organize the necessary elements for our app to create a compelling user interface. Here, we’ll focus on creating the following three key parts:

ComboBox: To select and view T20 data of different countries.
Labels: Placed inside the bordered views to represent country-wise data based on the ComboBox selected index.
Chart: To display player scores for the selected country.

Step 5: Configuring the Syncfusion WPF ComboBox and header view

The Syncfusion WPF ComboBox control offers a versatile dropdown list that supports both single and multiple selections, using delimiters to separate the selected items. Here, we use the ComboBox to list and choose the country for the T20 match. Additionally, adding a header with a related icon for the dashboard can make the data more readable and visually appealing.

Refer to the following code example.

<Grid Grid.Row="0">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="1*"/>
  <ColumnDefinition Width="2*"/>
  <ColumnDefinition Width="6*"/>
  <ColumnDefinition Width="1*"/>
 </Grid.ColumnDefinitions>

 <Label Grid.Column="0" Content="Country" FontSize="18" VerticalAlignment="Center" Foreground="#FFFFFF" FontWeight="SemiBold" HorizontalContentAlignment="Center"/>

 <comboBox:ComboBoxAdv Grid.Column="1" x:Name="type" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Height="30" Width="160" FontSize="15.5" ItemsSource="{Binding CountryOption}"/>

 <StackPanel Grid.Column="2" Orientation="Horizontal" Margin="80,0,0,0">
  <Path Data="{StaticResource PathData1}" Stroke="#FFFFFF" StrokeThickness="2.5">
   <Path.RenderTransform>
    <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
   </Path.RenderTransform>
  </Path>
  <Label Content="Team Wise Stats - 2024" FontSize="23" Foreground="#FFFFFF" Margin="10,0,0,0"/>
 </StackPanel>

 <Path Grid.Column="3" Data="{StaticResource PathData2}" Stroke="#FFFFFF" StrokeThickness="2" HorizontalAlignment="Right" Margin="0,0,20,0">
  <Path.RenderTransform>
   <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
  </Path.RenderTransform>
 </Path>

</Grid>

Step 6: Arranging country-wise T20 content

Next, we’ll organize country-wise play counts, winning statistics, total runs, catches, 6s, 4s, runs scored by boundaries, and details of the best batter and wicket-taker by team, utilizing labels and borders.

Refer to the following code example.

<Grid Grid.Row="1">
 <Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
  <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="2*"/>
  <ColumnDefinition Width="2*"/>
 </Grid.ColumnDefinitions>

 <Border Grid.Row="0" Grid.Column="0" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
   <Label Content="Total Played" FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Play}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="0" Grid.Column="1" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Total Wins" FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Wins}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="0" Grid.Column="2" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Total Runs Scored" FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Runs}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Total no of Catches taken" FontSize="17" Foreground="#FFFFFF"/> 
   <Label Content="{Binding CatchValue}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="1" Grid.Column="0" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Total 6s Scored" FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Score6s}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="1" Grid.Column="1" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Total 4s Scored" FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Score4s}" FontSize="19" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9"/>
  </StackPanel>
 </Border>

 <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Background="#034D33" BorderThickness="2" CornerRadius="10">
  <Grid>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>

   <Image Grid.Column="0" Source="{Binding BatterImage, Converter={StaticResource ImagePathConverter}}" Width="240" Height="210" Margin="30,5,0,5"/>

   <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
    <Label Content="Top Batter " FontSize="17" HorizontalAlignment="Center" Foreground="#FFFFFF"/>
    <Label Content="{Binding Batter}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#5AFEC9"/>
   </StackPanel>
  </Grid>
 </Border>

 <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="3" Background="#034D33" BorderThickness="2" CornerRadius="10">
  <Grid>
   <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>

   <Image Grid.Column="0" Source="{Binding WicketTakerImage, Converter={StaticResource ImagePathConverter}}" Width="240" Height="210" Margin="30,5,0,5"/>
   <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
    <Label Content="Top Wicket Taker " FontSize="17" HorizontalAlignment="Center" Foreground="#FFFFFF"/>
    <Label Content="{Binding WicketTaker}" FontSize="19" FontWeight="SemiBold" HorizontalAlignment="Center" Foreground="#5AFEC9"/>
   </StackPanel>
  </Grid>
 </Border>

 <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="#005F3E" BorderThickness="2" CornerRadius="10">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
   <Label Content="Runs Scored by Boundaries " FontSize="17" Foreground="#FFFFFF"/>
   <Label Content="{Binding Boundaries}" FontWeight="SemiBold" HorizontalContentAlignment="Center" Foreground="#5AFEC9" FontSize="19"/>
  </StackPanel>
 </Border>

</Grid>

Step 7: Configuring the Syncfusion WPF Chart

Let’s configure the Syncfusion WPF Charts control using this documentation.

Refer to the following code example.

<Border Grid.Row="2" Background="#005F3E" BorderThickness="2" CornerRadius="10">

 <chart:SfChart>
  <chart:SfChart.PrimaryAxis>
   <chart:CategoryAxis>
   </chart:CategoryAxis>
  </chart:SfChart.PrimaryAxis>

  <chart:SfChart.SecondaryAxis>
   <chart:NumericalAxis>
   </chart:NumericalAxis>
  </chart:SfChart.SecondaryAxis>
 </chart:SfChart>

</Border>

Step 8: Binding data to the WPF Column Chart

To visualize the 2024 T20 data, we will utilize Syncfusion’s WPF ColumnSeries.

<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Score">
</chart:ColumnSeries>

In the above code example, we’ve bound the ItemsSource, XBindingPath, and YBindingPath properties to the Data, Name, and Score properties, respectively.

Step 9: Customizing the chart appearance

Let’s enhance the appearance of our WPF Column Chart by customizing its elements, such as the title, axis, series color, and size.

Add the chart title

Adding a title can help make the data presented in the chart more easily understood. Refer to the following code example to customize the chart title.

<chart:SfChart HorizontalHeaderAlignment="Left">

 <chart:SfChart.Header>
  <Label Content="Top Runs Scorers" FontSize="15" Margin="5,0,0,0" FontWeight="SemiBold" Foreground="#FFFFFF"/>
 </chart:SfChart.Header>

</chart:SfChart>

Customize the chart axis

You can customize the chart axis using the following properties:

ShowGridLines: Adjusts the visibility of major grid lines on the axis.
LabelStyle: Modifies the style of axis labels for better visual representation.
TickLineSize: Customizes the size of ticks along the chart axis.
HeaderTemplate: Allows customization of the axis title label.
AxisLineStyle: Modifies the style of the axis line.
MajorGridLineStyle: Adjusts the style of major grid lines on the axis.

These properties provide flexibility in adjusting the visual appearance and functionality of our WPF Chart axis.

Refer to the following code example.

<chart:SfChart.PrimaryAxis>
 <chart:CategoryAxis FontSize="13" ShowGridLines="False" TickLineSize="0" AutoScrollingDelta="8" AutoScrollingMode="Start">
  <chart:CategoryAxis.LabelStyle>
   <chart:LabelStyle Foreground="#FFFFFF"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis FontSize="13" TickLineSize="0">
  <chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle Foreground="#FFFFFF"/>
  </chart:NumericalAxis.LabelStyle>

  <chart:NumericalAxis.MajorGridLineStyle>
   <Style TargetType="Line">
    <Setter Property="StrokeThickness" Value="1"/>
    <Setter Property="Stroke" Value="Gray"/>
    <Setter Property="StrokeDashArray" Value="2,2"/>
   </Style>
  </chart:NumericalAxis.MajorGridLineStyle>

  <chart:NumericalAxis.AxisLineStyle>
   <Style TargetType="Line">
    <Setter Property="StrokeThickness" Value="0"/>
   </Style>
  </chart:NumericalAxis.AxisLineStyle>

  <chart:NumericalAxis.HeaderTemplate>
   <DataTemplate>
    <TextBlock Text="RUNS" Padding="0,3,0,4" FontSize="14" Foreground="#FFFFFF"/>
   </DataTemplate>
  </chart:NumericalAxis.HeaderTemplate>
 </chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>

Customize the chart color and size

The following code example shows how to customize the chart’s size and color using the SegmentSpacing and Interior properties, respectively.

<chart:ColumnSeries SegmentSpacing="0.3" Interior="#EDFF23">
</chart:ColumnSeries>

Incorporating panning and tooltip

To enhance readability, we can also enable tooltips to display detailed information and panning to scroll through series within a specific range. This can be achieved using properties such as ShowTooltip, ChartZoomPanBehavior, and AutoScrollingDelta.

<chart:SfChart.Behaviors>
 <chart:ChartZoomPanBehavior EnableMouseWheelZooming="False" EnablePinchZooming="False" ResetOnDoubleTap="False" EnablePanning="True">
 </chart:ChartZoomPanBehavior>
</chart:SfChart.Behaviors>

<chart:SfChart.PrimaryAxis>
 <chart:CategoryAxis AutoScrollingDelta="8" AutoScrollingMode="Start">
 </chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis>
 </chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>

<chart:ColumnSeries ShowTooltip="True">

Step 10: Enabling interactivity for the entire dashboard

Let’s enhance our chart dashboard interactivity using the ComboBox. This will also allow us to dynamically select different countries that participated in the 2024 T20 matches.

Here, we utilize the ComboBox’s SelectedIndex property to dynamically update the entire dashboard. This includes updating country-specific data and player details based on the country choosen in the ComboBox.

<comboBox:ComboBoxAdv SelectedIndex="{Binding SelectedIndex}" />

In the following code example, we have created the SelectedIndex property to store the T20 data.

public class T20_Data : INotifyPropertyChanged
{
  private int selectedIndex; 
  public int SelectedIndex
  {
    get => selectedIndex;
    set
    {
      selectedIndex = value;
      UpdateIndex(value);
      OnPropertyChanged();
    }
  }

  public T20_Data()
  {
     SelectedIndex = 0;
  }

  private void UpdateIndex(int value)
  {
     if (value >= 0 && value < CountryOption.Count)
     {
        string selectedCountry = CountryOption[value]; 
        if (countryData.ContainsKey(selectedCountry))
        {
           var data = countryData[selectedCountry]; 
           Play = data.Play;
           Wins = data.Wins;
           Runs = data.Runs;
           CatchValue = data.CatchValue; 
           Score6s = data.Score6s; 
           Score4s = data.Score4s; 
           Boundaries = data.Boundaries; 
           Batter = data.Batter;
           BatterImage = data.BatterImage; 
           WicketTaker = data.WicketTaker; 
           WicketTakerImage = data.WicketTakerImage;
        }
        if (playersData.ContainsKey(selectedCountry))
        {
           Data = new ObservableCollection<PlayersData>(playersData[selectedCountry]);
        }
     }
   }
}

After executing the previous code examples, the output will look like the following image.

Visualizing the 2024 T20 World Cup data using the Syncfusion WPF Column Chart

GitHub reference

For more details, please refer to the project on GitHub.

Conclusion

Thanks for reading! In this blog, we have explored how to visualize the 2024 T20 World Cup tournament data using the Syncfusion WPF Column Chart. We highly recommend following the steps outlined in this blog and sharing your feedback in the comments section below.

If you need any assistance, please do not hesitate to contact us via our support forum, support portal, or feedback portal. We are always eager to help you!

Related blogs

Making Payments Easy: Using .NET MAUI Radio Button for Payment Apps and Digital Wallets

Gayathri-github7 — Tue, 23 Jul 2024 14:42:08 +0000

TL;DR: Learn how to streamline payment selection in your apps and digital wallets using the Syncfusion .NET MAUI Radio Button control. This blog covers implementation steps and customization options to create a user-friendly payment interface.

“Good design is good business.”

– Thomas J. Watson Jr.

In today’s fast-paced digital world, payment apps and digital wallets have become essential tools for managing finances and making transactions. These applications offer convenience, speed, and security, allowing us to complete purchases with just a few taps on our smartphones.

With the rise of e-commerce and online shopping, a seamless and intuitive payment selection interface is crucial.

In this blog, we’ll explore how to implement a streamlined payment selection interface using the Syncfusion .NET MAUI Radio Button.

Syncfusion .NET MAUI Radio Button: An overview

The .NET MAUI Radio Button is a selection control that enables users to choose a single option from a set of pre-defined choices. Its key features include:

States: It has two selection states: Checked and Unchecked.
Grouping: Radio buttons can be grouped within any layout.
Customizations: You can customize the checked and unchecked colors, stroke thickness, and text appearance.
Single selection : It allows us to select only one option from a set, ensuring that users make a single choice.

Choosing the right payment method

A payment app offers various payment options, such as credit/debit cards, UPI, or bank transfers. Encouraging users to pick their preferred payment method is essential for a smooth checkout experience.

Here, we will use our Syncfusion .NET MAUI Radio Button to implement the payment selection interface. Refer to the following image.

Integrating Syncfusion .NET MAUI Radio Button to simplify payment method selection

Follow the steps to design and implement payment method selection UI using the .NET MAUI Radio Button.

Step #1: Create a simple .NET MAUI Radio Button

Start by referring to the Syncfusion .NET MAUI Radio Button documentation to create a .NET MAUI app and include the Radio Button control. The IsChecked property indicates whether a specific payment method is selected among the available options.

<buttons:SfRadioButton Text="UPI" IsChecked="True"/>

Step #2: Group Radio Buttons

You can group a set of radio buttons using the SfRadioGroup class. This class is a container that ensures only one radio button is selected within the same group.

<buttons:SfRadioGroup>
     <buttons:SfRadioButton Text="UPI" IsChecked="True" />
     <buttons:SfRadioButton Text="Credit/Debit/ATM Card" />
     <buttons:SfRadioButton Text="Net Banking" />
     <buttons:SfRadioButton Text="Cash on Delivery" />
 </buttons:SfRadioGroup>

Step #3: Select payment options

Let’s implement the code to choose any of the available payment options and take the necessary actions in the StateChanged event. This event is triggered when the IsChecked state changes.

XAML

<buttons:SfRadioGroup>
    <buttons:SfRadioButton Text="UPI" StateChanged="PaymentOption_Selected" IsChecked="True"/>
    <buttons:SfRadioButton Text="Credit/Debit/ATM Card" StateChanged="PaymentOption_Selected"/>
    <buttons:SfRadioButton Text="Net Banking" StateChanged="PaymentOption_Selected"/>
    <buttons:SfRadioButton Text="Cash on Delivery" StateChanged="PaymentOption_Selected"/>
</buttons:SfRadioGroup>

private void PaymentOption_Selected(object sender, StateChangedEventArgs e)
{
     // Add your code here.
}

Step #4: Customize the payment form

In this example, we’ll enhance the payment form UI by adding text input layout controls for entering the name, mobile number, and email ID. Additionally, we’ll create separate sections for each payment option, as shown below.

Refer to the code example in the GitHub repository.

Refer to the following image.

Designing payment method selection UI using Syncfusion .NET MAUI Radio Button

GitHub references

For more details, refer to designing and implementing payment method selection UI using the .NET MAUI Radio Button demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored how to use the Syncfusion .NET MAUI Radio Button to design a payment method selection UI that empowers users to choose a payment method quickly and efficiently. Give it a try, and leave your feedback in the comments section below!

Download the Essential Studio for .NET MAUI to evaluate the latest features immediately.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to help you!

Related blogs

Spice Up Your Data Visualization with Flutter Charts Series Customization

Gayathri-github7 — Tue, 23 Jul 2024 12:03:55 +0000

TL;DR: Explore how to customize the series in Syncfusion Flutter Charts. Learn to modify series colors, apply gradients, and use custom renderers. Discover detailed implementation steps and code examples. Enhance your data visualization with these powerful customization options.

Effective communication often hinges on the clarity of data presentation, and utilizing charts can significantly enhance the conveyance of information, making it both clear and compelling. Syncfusion Flutter Charts widget has extensive customization features, allowing you to fine-tune your charts to meet your unique requirements.

In this blog, we’ll explore the options available to customize the series’ appearance in the Syncfusion Flutter Charts.

Let’s get started!

Series customization options

Let’s see the built-in options to customize the visual representation of the series in the Flutter Charts widget:

Color and border-color
Point color mapper
Gradient
Border gradient
Shader
Customize segment method
Custom series renderer

The following table displays the customization options supported by the Syncfusion Flutter Cartesian Charts series.

Cartesian series	Point color mapper	Gradient	Border gradient	Shader
Area series	No	Yes	Yes	Yes
Bar series	Yes	Yes	Yes	Yes
Box and Whiskers series	Yes	Yes	Yes	Yes
Bubble series	Yes	Yes	Yes	Yes
Candle series	Yes	No	No	Yes
Column series	Yes	Yes	Yes	Yes
Error bar series	Yes	No	No	Yes
Fastline series	No	Yes	No	Yes
Hilo open close series	Yes	No	No	Yes
Hilo series	Yes	No	No	Yes
Histogram series	Yes	Yes	Yes	Yes
Line series	Yes	No	No	Yes
Range area series	No	Yes	Yes	Yes
Range column series	Yes	Yes	Yes	Yes
Scatter series	Yes	Yes	Yes	Yes
Spline series	Yes	No	No	Yes
Spline area series	No	Yes	Yes	Yes
Spline range area series	No	Yes	Yes	Yes
Stacked area series	No	Yes	Yes	Yes
Stacked area 100% series	No	Yes	Yes	Yes
Stacked bar series	Yes	Yes	Yes	Yes
Stacked bar 100% series	Yes	Yes	Yes	Yes
Stacked column series	Yes	Yes	Yes	Yes
Stacked column 100% series	Yes	Yes	Yes	Yes
Stacked line series	Yes	No	No	Yes
Stacked line 100% series	Yes	No	No	Yes
Step area series	No	Yes	Yes	Yes
Step line series	Yes	No	No	Yes
Waterfall series	Yes	Yes	Yes	Yes

Refer to the following table to know the customization options supported by the other Flutter Charts series.

Other series	Point color mapper	Gradient	Border gradient	Point shader
Doughnut series	Yes	No	No	Yes
Funnel series	Yes	No	No	No
Pie series	Yes	No	No	Yes
Pyramid series	Yes	No	No	No
Radial Bar series	Yes	No	No	Yes

Let’s explore these customization options with code examples!

Color and border-color

The color and border color properties accept a solid color and will be applied to the entire series. Since the fill color and border color properties are unavailable across all series types, these customization options are limited to specific series. For instance, the bar and area series’ allow customization of fill and border colors, whereas the line series supports color and width customizations.

Additionally, the area type series supports a border drawing mode option, specifying which sides of the border should be rendered. This can include all sides, only the top of the area series, or excluding the bottom portion.

Refer to the following code example.

SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    LineSeries(
      ...
      color: Colors.green,
      width: 2,
      ...
    ),
    BarSeries(
      ...
      color: Colors.indigo.withOpacity(0.2),
      borderColor: Colors.indigo,
      width: 2,
      ...
    ),
    AreSeries(
      ...
      color: Colors.purple.withOpacity(0.2),
      borderColor: Colors.purple,
      width: 2,
      borderDrawMode: BorderDrawMode.top,
      ...
    ),
    ...
  ],
)

Refer to the following image.

Color and border color customization options in the Flutter Charts series

Point color mapper

The point color mapper is supported in all Flutter Cartesian Chart series types except the area-type series. It allows us to customize the color of individual series segments. The pointColorMapper callback is called whenever there is a need for the segment color, such as adding or updating the segment, when the data source changes, and more.

In the following code example, the point color is returned from the Colors.accents list using the chart series data point index.

SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    ColumnSeries(
      ...
      pointColorMapper: (ChartData data, int index) {
        if (index == 0) {
          return Colors.accents[0];
        } else {
          return Colors.accents[Colors.accents.length % index];
        }
      },
    ),
  ],
)

Refer to the following image.

Point color mapper in the Flutter Charts series

Gradient

It is a type of LinearGradient specifically designed to be applied across individual segments within a given series.

For example, if we have a gradient transitioning from blue to red and a ColumnSeries with two data points of 20 and 100, the gradient will be applied uniformly to segments regardless of their values. Ideally, if we were to identify a y-axis midpoint value such as 50, we would expect to see a red tint from the midpoint to above, and the midpoint to below would only have a blue shade. However, the gradient will be applied entirely throughout the respected segment, so both the 20 and 50 data points will have red and blue shades.

In the following code example, a vertical gradient is used with red and blue colors.

ColumnSeries(
  ...
  gradient: LinearGradient(
    colors: <Color>[Colors.red, Colors.blue],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    stops: const <double>[0, 1],
  ),
)

Refer to the following image.

Gradient support in the Flutter Charts series

Border gradient

Like the chart series gradient, a border gradient is a type of LinearGradient specifically designed to be applied across individual segments’ borders within a given series. It acts the same as a series gradient, meaning the gradient will be applied uniformly to segments regardless of their values.

Refer to the following code example.

ColumnSeries(
  ...
  borderWidth: 2,
  borderRadius: BorderRadius.circular(10),
  borderGradient: LinearGradient(
    colors: <Color>[Colors.red, Colors.blue],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    stops: const <double>[0, 1],
  ),
)

Refer to the following image.

Border gradient support in the Flutter Charts series

Shader

The shader will be applied to the whole series, not specific segments. The onCreateShader is a callback that is called whenever there is a need for the segment or series color, such as adding or updating, when the data source changes, etc., similar to the pointColorMapper.

For example, if we have a vertical gradient transitioning from blue to red and a ColumnSeries with two data points of 20 and 100, the gradient will be applied uniformly to the entire series. Ideally, if we were to identify a y-axis midpoint value such as 50, the red tint would start from the midpoint and extend above, while only having a blue shade below the midpoint. So, the segment with a value of 20 would only have a blue tint, but the segment with a value of 100 should have a gradient from blue to red.

The shader callback brings the following parameters:

rect – Holds the respected series render box bounds.
renderType – Denotes whether this is called for series or legend.

Refer to the following code example.

ColumnSeries(
  ...
  borderRadius: BorderRadius.circular(10),
  onCreateShader: (ShaderDetails details) {
    return LinearGradient(
      colors: <Color>[Colors.red, Colors.blue],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      stops: const <double>[0, 1],
    ).createShader(details.rect);
  },
)

Refer to the following image.

Shader feature in the Flutter Charts series

Range-based shader customization

Since the shader returned from onCreateShader will be applied consistently throughout the series, it is beneficial for anticipating color customization based on positive and negative values.

For example, the goal is to visually represent positive values with varying shades of green and negative values with different shades of red.

To accurately apply these color distinctions, it is essential to determine the exact position where the y-axis crosses zero, which serves as the demarcation line between positive and negative values.

Locating the zero position on the y-axis can be accomplished using a clever technique that utilizes the onActualRangeChanged callback function of the axis. This function is triggered when there is a change in the actual range being displayed on the chart. Within this callback, you can calculate the position of the zero value on the y-axis by conducting a simple mathematical operation.

Take the maximum visible value on the y-axis, referred to as visibleMax, and divide it by the total range of values currently visible on the chart. The result of this division will give you a ratio (a position factor) corresponding to the location of the zero value of the y-axis.

Use this position factor as a midpoint color stop for a LinearGradient to create variations in shades of green and red, as illustrated in the following code example.

To ensure the shader is effectively applied as a mask on the entire series rendering, make sure the series’ color and borderColor properties are set. This allows the shader to mask the color correctly. If the borderColor is not set, the shader will not be applied to the border.

double _originColorStopY = 0;

SfCartesianChart(
  primaryXAxis: const DateTimeAxis(),
  onActualRangeChanged: (ActualRangeChangedArgs args) {
    if (args.orientation == AxisOrientation.vertical) {
      final num range = args.visibleMax.abs() + args.visibleMin.abs();
      _originColorStopY = args.visibleMax / range;
    }
  },
  ...
)

SplineAreaSeries(
  ...
  color: Colors.green,
  borderColor: Colors.green,
  onCreateShader: (ShaderDetails details) {
    return ui.Gradient.linear(
      details.rect.topCenter,
      details.rect.bottomCenter,
      <Color>[
        Colors.green,
        Colors.green,
        Colors.red,
        Colors.red,
      ],
      <double>[0, _originColorStopY, _originColorStopY, 1],
    );
  },
)

In this example, we used four colors and their corresponding color stop points. The color stops [0, _originColorStopY, _originColorStopY, 1] will be divided into the following segments:

From 0 to _originColorStopY , the colors are mapped as green to green. As a result, we do not observe any gradient transition; instead, we see a solid green color representing the positive value position.
From _originColorStopY to _originColorStopY , this transition is not visible since the start and end stops are the same.
From _originColorStopY to 1 , the colors are mapped as red to red. This results in a solid red color transition, indicating the negative portion.

Note: To add opacity into the shader, it is essential to incorporate the corresponding opacity value into the series’ color property. By doing this, the shader will derive the opacity value from the color property and then apply it accordingly. This is the current behavior of the Flutter framework to add an opacity to the shader.

Refer to the following image.

Range-based shader customization in the Flutter Charts series

Point shader

It is specific to CircularSeries and is used to apply individual gradients specific to a segment.

In the following code example, gradient colors are loaded from a data source and applied using RadialGradient to individual segments.

SfCircularChart(
  series: <CircularSeries<CircularChartData, String>>[
   DoughnutSeries(
     dataSource: <CircularChartData>[
        CircularChartData('2021', 20, Colors.red, Colors.orange),
        CircularChartData('2022', 50, Colors.orange, Colors.purple),
        CircularChartData('2023', 100, Colors.purple, Colors.red),
      ],
      ...
      pointShaderMapper: (dynamic data, int index, Color color, Rect rect) {
        return RadialGradient(
          colors: <Color>[data.start, data.end],
          stops: const <double>[0, 1],
        ).createShader(rect);
      },
      ...
    ),
  ],
)

Refer to the following image.

Point shader customization in the Flutter Charts series

Customize chart series segment through method

The customizeSegment method is designed to tailor the visual aspects of a segment according to its index or specific conditions. This method can be overridden in the subclass of the series renderer. Within the customizeSegment, properties such as fillPaint and strokePaint are accessible, allowing for the segment’s color modifications.

In the following code example, the shader is applied to the segment with the 10^th index. We currently do not have direct properties to apply a gradient to individual segments, but this can be achieved using the customizeSegment method.

class _ColumnSeriesRenderer extends ColumnSeriesRenderer<ChartData, num> {
  @override
  void customizeSegment(ChartSegment segment) {
    super.customizeSegment(segment);
    if (segment.currentSegmentIndex == 10) {
      segment.fillPaint.shader = const LinearGradient(
        colors: <Color>[Colors.red, Colors.orange],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: <double>[0, 1],
      ).createShader(paintBounds);
    } else {
      segment.fillPaint.shader = null;
    }
  }
}

Refer to the following image.

Customizing Flutter Charts series segments using methods

Custom series renderer

This is the final and most important option available in the series, allowing us to render our own series. Creating our series renderer allows us to draw the required shapes on each segment.

To do this, create a custom renderer class by extending an existing series renderer and then sharing this custom renderer with the series through the onCreateRenderer callback. The following are the major key factors of the renderer:

createSegment: To create segments based on data points.
customizeSegment: To customize the segment appearance based on its index or specific case.
onPaint: To paint series.

Then, create a custom segment class by extending an existing segment class, mapping it with the series renderer by overriding the createSegment method, and returning it.

Once the custom segment is mapped with the series, the base implementation passes the respective data point values into the segment and transforms them into pixel values. Therefore, in the next step, override the segment’s onPaint method to implement the desired drawing logic.

In the following code example, we have drawn an oval shape to replace a column segment.

ColumnSeries(
  ...
  borderColor: Colors.pink,
  onCreateRenderer: (ChartSeries<ChartData, num> series) {
    return _ColumnSeriesRenderer();
  },
)

class _ColumnSeriesRenderer extends ColumnSeriesRenderer<ChartData, num> {
  @override
  ColumnSegment<ChartData, num> createSegment() => _ColumnSegment();
}

class _ColumnSegment extends ColumnSegment<ChartData, num> {
  @override
  void onPaint(Canvas canvas) {
    if (segmentRect == null) {
      return;
    }
    final Rect fillRect = segmentRect!.outerRect;
    canvas.drawOval(fillRect, fillPaint);
    final Rect borderRect = fillRect.deflate(series.borderWidth / 2);
    canvas.drawOval(borderRect, strokePaint);
  }
}

Refer to the following image.

Custom series rendering feature in the Flutter Charts

GitHub reference

For more details, refer to the Flutter Charts series customization GitHub demos.

Conclusion

Thanks for reading! In this blog, we’ve explored the series customization options in the Syncfusion Flutter Charts widget. Use these features to visualize your data and get valuable insights. Give it a try, and leave your feedback in the comment section below.

If you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights

Gayathri-github7 — Wed, 19 Jun 2024 13:18:24 +0000

TL;DR: Let’s use the Syncfusion .NET MAUI Scatter Chart to visualize the sizes and weights of various sports balls and highlight their differences. This blog guides you through gathering data, preparing it, configuring the chart, and customizing its appearance and interactivity. Explore the GitHub demo for more details.

Welcome to our Chart of the Week blog series!

Today, we’ll visualize the sizes and weights of various sports balls using the Syncfusion .NET MAUI Scatter Chart.

Sports enthusiasts know that most sports use balls, which vary widely in size and weight. Understanding these variations can provide fascinating insights into the design and dynamics of each sport. The lightest ball is a Table Tennis ball, and the largest ball size is Basketball. These differences reflect each sport’s unique demands and rules, providing a deeper appreciation for their diversity.

The Syncfusion .NET MAUI Scatter Chart is ideal for showcasing these differences. A scatter chart plots data points on a two-dimensional graph, making it easy to observe relationships between variables. The chart’s feature set includes data binding, tooltips, titles, and customizable axes, ensuring a clear and engaging visualization.

The following image shows the scatter chart we are going to create.

Let’s get started!

Step 1: Gathering the data

First, we need to gather information from the topend sports. We require data on ball Sizes and weights.

Step 2: Prepare the data for the chart

Create a SportsBallModel class to define the structure of our sports ball data and a SportsBallViewModel class to handle the data manipulation and communication between the model and the scatter chart.

First, define the SportsBallModel class with the following properties:

Name: Denotes the name of the sports ball, indicating the specific type or variant it represents.
Size: Describes the dimensions of the sports ball, specifying its diameter.
Weight: Quantifies the mass of the sports ball, measured in units such as grams.

Refer to the following code example.

public class SportsBallModel
{
    public string Name { get; set; }
    public double Size { get; set; }
    public double Weight { get; set; }

    public SportsBallModel(string name, double size, double weight)
    {
        Name = name;
        Size = size;
        Weight = weight;
    }
}

Next, create the SportsBallViewModel class. It acts as an intermediary between the data models and user interface elements (scatter chart), preparing and formatting data for display and interaction.

Refer to the following code example.

public class SportsBallViewModel
{
    public List<SportsBallModel> SportsBallData { get; set; }

    public SportsBallViewModel()
    {

        SportsBallData = new List<SportsBallModel>();
        SportsBallData.Add(new SportsBallModel { Weight = 23, Size = 3.96, Name = "Squash" });
        SportsBallData.Add(new SportsBallModel { Weight = 2.7, Size = 3.99, Name = "Table Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 45.93, Size = 4.27, Name = "Golf" });
        SportsBallData.Add(new SportsBallModel { Weight = 125, Size = 5.59, Name = "Jai Alai" });
        SportsBallData.Add(new SportsBallModel { Weight = 40, Size = 5.72, Name = "Racquetball" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 5.72, Name = "Pool" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 6.35, Name = "Lacrosse" });
        SportsBallData.Add(new SportsBallModel { Weight = 56.0, Size = 6.54, Name = "Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 680, Size = 7.94, Name = "Pétanque" });
        SportsBallData.Add(new SportsBallModel { Weight = 155.9, Size = 7.11, Name = "Cricket" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 7.11, Name = "Field Hockey" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 7.30, Name = "Baseball" });
        SportsBallData.Add(new SportsBallModel { Weight = 22.1, Size = 7.29, Name = "Pickleball" });
        SportsBallData.Add(new SportsBallModel { Weight = 99, Size = 7.62, Name = "Polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 166.6, Size = 8.89, Name = "Softball (slowpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 453.6, Size = 9.21, Name = "Croquet" });
        SportsBallData.Add(new SportsBallModel { Weight = 178, Size = 9.70, Name = "Softball (fastpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 920, Size = 10.67, Name = "Bocce" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 18.03, Name = "Rhythmic gymnastics ball" });
        SportsBallData.Add(new SportsBallModel { Weight = 425, Size = 18.54, Name = "Team Handball" });
        SportsBallData.Add(new SportsBallModel { Weight = 260, Size = 20.70, Name = "Volleyball" });
        SportsBallData.Add(new SportsBallModel { Weight = 420, Size = 21.59, Name = "Football (Soccer)" });
        SportsBallData.Add(new SportsBallModel { Weight = 445, Size = 21.59, Name = "Korfball" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 21.59, Name = "Water polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 397, Size = 22.61, Name = "Netball" });
        SportsBallData.Add(new SportsBallModel { Weight = 623.7, Size = 23.88, Name = "Basketball" });
    }
}

Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts

Let’s configure the .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>  

</chart:SfCartesianChart>

Step 4: Bind data to the .NET MAUI Scatter series

To display the sports ball data effectively, we’ll utilize the Syncfusion ScatterSeries instance and bind our SportsBallData collection to it. Each ball will be represented as a point on the chart, with its corresponding size and weight.

Refer to the following code example.

<chart:ScatterSeries XBindingPath="Weight"
                     YBindingPath="Size" 
                     ItemsSource="{Binding SportsBallData}">
</chart:ScatterSeries>

We’ve bound the SportsBallData collection from the SportsBallViewModel to the ItemSource property. The XBindingPath and YBindingPath properties are bound to the Weight and Size properties.

Step 5: Customize the .NET MAUI Scatter Chart appearance

Let’s customize the appearance of the Syncfusion .NET MAUI Scatter Chart to enhance its readability.

Adding the chart title

Adding a title to the chart enhances its readability and aids users in understanding its content more effectively. By providing a clear and descriptive title, users can quickly grasp the purpose and context of the chart, making it more accessible and informative.

Refer to the following code example.

<chart:SfCartesianChart.Title> 
 <Grid> 
  <Grid.RowDefinitions> 
   <RowDefinition Height="{OnPlatform Android=68,Default=80,iOS=68}"/> 
  </Grid.RowDefinitions> 
  <Grid.ColumnDefinitions> 
   <ColumnDefinition Width="55"/> 
   <ColumnDefinition Width="Auto"/> 
  </Grid.ColumnDefinitions> 
  <Image Grid.Column="0"  
         Grid.RowSpan="2" 
         Source="balls_sports.png" 
         Margin="0,-25,0,0" 
         HeightRequest="70" 
         WidthRequest="50"/> 
  <StackLayout Grid.Column="1" 
               Grid.Row="0" 
               Margin="7,7,0,0"> 
   <Label Text="Exploring Ball Sizes and Weights Across Different Sports"     
          FontSize="{OnPlatform Android=12,Default=16,iOS=12}"                     
          FontAttributes="Bold" 
          TextColor="Black"/> 
   <Label Text="A Comparative Analysis Across Different Sports Ball Sizes and Weights"  
          FontSize="{OnPlatform Android=10,Default=12,iOS=10}"     
          TextColor="Black" 
          Margin="0,2,0,0"/> 
  </StackLayout> 
 </Grid> 
</chart:SfCartesianChart.Title>

Customize the axes

Let’s customize the X- and Y-axes with the Minimum, Maximum, EdgeLabelsDrawingMode, and ShowMajorGridLines properties and the axis Title, LineStyle, and TickStyle properties.

Refer to the following code example.

<chart:SfCartesianChart.XAxes>
 <chart:NumericalAxis ShowMajorGridLines=”True”
                      Maximum=”700”
                      Interval=”100” 
                      EdgeLabelsDrawingMode=”Shift”
                      RangePadding=”Additional”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Weight in Gram” TextColor=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Xaxes>

<chart:SfCartesianChart.Yaxes>
 <chart:NumericalAxis EdgeLabelsDrawingMode=”Center”
                       Maximum=”31”
                       Minimum=”0”
                       Interval=”5”
                       ShowMajorGridLines=”False”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Size in Centimeter” Stroke=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Yaxes>

Customizing the Scatter series

Here, we will enhance the series appearance using the PaletteBrushes, PointHeight, and PointWidth properties.

Refer to the following code example.

<chart:ScatterSeries PaletteBrushes="{Binding PaletteBrushes}"
                     PointHeight="20" 
                     PointWidth="20">
</chart:ScatterSeries>

Adding interactivity to the chart

Now, enable tooltips in the scatter series to enhance data visualization and provide additional insights. Customize the tooltip content to display relevant information, such as the name, size, and weight of a sports ball, that improves user experience by offering immediate, context-specific information and deeper data insights using the TooltipTemplate property.

Refer to the following code example.

<chart:ScatterSeries.TooltipTemplate>
 <DataTemplate>
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width=”Auto”/>
   </Grid.ColumnDefinitions>
   <Label Grid.Row=”0” 
          Grid.Column=”0” LineBreakMode=”WordWrap”  
          MaximumWidthRequest=”100” Text=”{Binding  
          Item.Name,StringFormat=’{0}’}”   
          HorizontalTextAlignment= »Center » HorizontalOptions= »Center »  
          VerticalTextAlignment= »Center » FontAttributes= »Bold »  
          Margin=”0,3,0,3” FontSize=”13.5” TextColor=”White”/>
   <BoxView Grid.Row=”1” Grid.Column=”0” VerticalOptions=”Center” Color=”White” HeightRequest=”1” />
   <StackLayout Grid.Row=”2” Grid.Column=”0” Orientation=”Vertical” VerticalOptions=”Fill” Spacing=”0” Padding=”3” Margin=”0”>
    <Label Text=”{Binding Item.Weight,StringFormat=’Weight : {0} g’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start”
           Margin=”0,0,3,0” FontSize=”13.5” TextColor=”White”/>
    <Label Text=”{Binding Item.Size,StringFormat=’Size : {0} cm’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start” Margin=”0,0,3,0”
           FontSize=”12” TextColor=”White”/>
   </StackLayout>
  </Grid>
 </DataTemplate>
</chart:ScatterSeries.TooltipTemplate>

After executing these code examples, we will get the output that resembles the following image.

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

GitHub reference

Use the .NET MAUI Scatter Chart GitHub demo to visualize different sports ball sizes and weights for more details.

Conclusion

Thanks for reading! In this blog, we’ve seen how to use the Syncfusion MAUI Scatter chart to visualize the different sports ball sizes and weights. We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

The existing customers can download the new version of Essential Studio on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

How to Maintain State in the Blazor ListBox Using Fluxor?

Gayathri-github7 — Wed, 19 Jun 2024 11:32:22 +0000

TL;DR: Learn how to maintain state in the Syncfusion Blazor ListBox using the Fluxor state management library. This guide covers setting up Fluxor, integrating it with the ListBox, and managing selected items for a smooth user experience.

The Syncfusion Blaz or ListBox is a feature-rich component that provides excellent functionalities rather than just displaying a list of items. It allows users to select one or more items using check boxes, with a mouse, or through keyboard interactions. It can be populated using an array of strings or objects.

The Fluxor is a state management library heavily inspired by the Flux architecture and popularized by Facebook’s React library. It provides a predictable and efficient way to manage your app’s state by enforcing unidirectional data flow and promoting a reactive programming style.

In this blog, we’ll learn how to maintain the state in the Syncfusion Blazor ListBox using Fluxor. We’ll store the selected items (current state) of the ListBox, i.e., the selected item values, in the Fluxor. Then, we’ll load the values from the Fluxor and display them at the end of the ListBox while scrolling through a huge volume of items. This will provide a smooth navigation and user experience.

Getting started with Blazor ListBox

First, refer to the getting started with Blazor ListBox component documentation.

Now, refer to the following code example demonstrating how to render a ListBox component in a Razor page.

@using Syncfusion.Blazor.DropDowns

<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
 <ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
@code {
    public string[] value = new string[] { “Vehicle-01” };
    public List<VehicleData> Vehicles = new List<VehicleData> {
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" }
    };

    public class VehicleData {
      public string Text { get; set; }
      public string Id { get; set; }
    }
}

Getting started with Fluxor

Fluxor helps you manage the state of your app in a predictable and organized manner. Follow these steps to get started with it:

Step 1: Installation

To add the Fluxor NuGet package to your Blazor server project, use the following command in the Package Manager Console window.

Install-Package Fluxor.Blazor.Web

Step 2: Register the store

Add the following code to your App.razor file. This code is an essential setup for Fluxor state management in your Blazor app. It initializes the Fluxor store and ensures your app can manage state and actions effectively.

<Fluxor.Blazor.Web.StoreInitializer />

Step 3: Register the Fluxor

To integrate Fluxor into your Blazor app, navigate to the Program.cs file. Inside the Main method, add the following code to register Fluxor.

builder.Services.AddFluxor(options => 
{
    options.ScanAssemblies(typeof(Program).Assembly);
});

This registration ensures Fluxor is properly integrated, allowing efficient state management throughout your app.

Step 4: Set up the feature/state

Now, create a Store folder within your project, and inside it, create a subfolder named ValueUseCase. Add a new class called ValueState.cs within this subfolder.

Refer to the following code example.

using Fluxor;

namespace SyncfusionBlazorApp.Store.ValueUseCase 
{
    [FeatureState]
    public record ValueState(string[] Items) 
    {
        public ValueState() : this(new string[0]) 
        {
            //default constructor
        }
    }
}

Step 5: Defining actions

Create an action class named SetValueAction to update items from the Blazor ListBox in the Store folder. In the following code example, we’ll define the following two records within the SyncfusionBlazorApp.Store namespace. These records are used to manage actions and states within a Blazor app.

EventValueClicked: It accepts an array of strings, likely conveying a list of items or values, and it is typically dispatched to trigger state updates within a state management system.
SetValueAction: It also takes an array of strings as its input parameter and updates the application’s state.

Refer to the following code example.

using SyncfusionBlazorApp.Store.ValueUseCase;
namespace SyncfusionBlazorApp.Store
{
    public record EventValueClicked(string[] Items);
    public record SetValueAction(string[] Items);
}

Step 6: Defining reducers

To manage state changes effectively in a Fluxor-based app, create a Reducer.cs class within the ValueUseCase folder. This class will contain ReduceSetValueItem, specifically designed to handle state changes when the SetValueAction is dispatched.

Refer to the following code example. When the SetValueAction is triggered, the ReduceSetValueItem method generates a new state object. This new state object’s Items property is updated with the values provided in the action. This process ensures that the state is kept up to date in a predictable and immutable manner, following a common pattern in Fluxor-based state management.

using Fluxor;

namespace SyncfusionBlazorApp.Store.ValueUseCase
{
    public class Reducers 
    {
        [ReducerMethod]
        public static ValueState ReduceSetValueItem(ValueState state, SetValueAction action) 
        {
            return state with { Items = action.Items };
        }
    }
}

Step 7 Defining effects

In the ValueUseCase folder, let’s create an Effects.cs class to handle effects. Within this class, we’ll define the HandleEventCounterClicked method, which listens for EventValueClicked actions. Upon detection, it dispatches a SetValueAction to update the application’s state potentially.

Refer to the following code example.

using Fluxor;

namespace SyncfusionBlazorApp.Store.ValueUseCase 
{
    public class Effects 
    {
        private readonly IState<ValueState> _valueState;
        public Effects(IState<ValueState> valueState) 
        {
            _valueState = valueState;
        }
        [EffectMethod]
        public Task HandleEventCounterClicked(EventValueClicked action, IDispatcher dispatcher) 
        {
            dispatcher.Dispatch(new SetValueAction(action.Items));
            return Task.CompletedTask;
        }
    }
}

Step 8: Integrate Fluxor in the Blazor ListBox component

Now, connect the Fluxor state to your ListBox component’s Value property. Then, trigger the dispatch of the SetItemsAction within the ValueChange event of the ListBox.

This ensures that whenever there is a change in the selection of the ListBox, an update is automatically initiated in the Fluxor state, guaranteeing synchronization between the UI and the application state.

Refer to the following code example.

@page "/"
@using Syncfusion.Blazor.DropDowns
@using Fluxor
@using SyncfusionBlazorApp.Store;
@using SyncfusionBlazorApp.Store.ValueUseCase
<SfListBox TValue="string[]" Value="@valueState.Value.Items" DataSource="@Vehicles" TItem="VehicleData">
 <ListBoxFieldSettings Text="Text" Value="Id" />
 <ListBoxEvents TValue="string[]" TItem="VehicleData" ValueChange="@valueChange"></ListBoxEvents>
</SfListBox>
<span><b>Selected Items</b></span>
<ol>
    @foreach (var item in valueState!.Value.Items) 
    {
        <li>@item</li>
    }
</ol>
@code {
    [Inject]
    private IDispatcher? dispatcher { get; set; }
    [Inject]
    protected IState<ValueState>? valueState { get; set; }
    public List<VehicleData> Vehicles = new List<VehicleData> {
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
        new VehicleData { Text = "Bugatti Veyron Sport", Id = "Vehicle-03" },
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
        new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
        new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
        new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
    };
    private void valueChange(ListBoxChangeEventArgs<string[], VehicleData> args)
    {
        dispatcher?.Dispatch(new EventValueClicked(args.Value));
    }
    public class VehicleData {
        public string Text { get; set; }
        public string Id { get; set; }
    }
}

After executing the above code examples, we will get the output in the following image.

Maintaining state in Blazor ListBox component using Fluxor

GitHub reference

For more details, refer to state management in Blazor ListBox using the Fluxor GitHub demo.

Conclusion

Thanks for reading! In this blog, we’ve seen how to maintain the state in the Syncfusion Blazor ListBox component using Fluxor. Try out the steps discussed in this blog, and leave our feedback in the comments section below!

Our existing customers can download the new version of Essential Studio from the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features.

If you have any questions or need assistance, our support team is always here to help. Feel free to contact us through our support forum, support portal, or feedback portal. We look forward to hearing from you!