• Generate charts from data in your Kendo UI grid

    The original link: www.telerik.com/blogs/gener…

    In this tutorial, learn how to easily generate charts from data in the Kendo UI for Angular Grid.

    A common problem for people using Kendo UI for Angular is how they use the Grid and Chart components together. It makes sense, after all, that grids can display raw data, and diagrams are a great way to visualize using that data. A special case that we’re often asked about:

    “How do I use the current selection in the grid to generate a chart?”

    Well, I’m here to say it’s as simple as a pie 🥧, all you need is a grid, a chart, a menu component, and maybe a pie jar!

    In this article, I’ll walk you through the killer demo and how to implement ✨ MAJESTY ✨ in Angular Grid’s Kendo UI! To easily follow up, get the source code and see what we did. I’ll cover the important part of setting up this type of interaction between our components!

    This GIF taken from one of our sample application, you can find here: : HTTPS / / prgress. Co/ChartsSampleApp. For those who want to understand the source code of the people, this is making a repository of links: : HTTPS / / prgress. Co/ChartsGitHub.

    When you select a row on this grid and right-click it, you will see a context menu. In this menu, you will see all the types of charts you can generate with this data.

    When you select a chart type, a dialog box pops up that displays the selected data as a chart!

    This article describes some of the steps required to create this workflow. We’ll start by adding a menu of right-click chart types. Then we’ll show you how to build the different diagrams that are selected. Let’s dive into the sample application and see the types of interactions the demo focuses on!

    Build the cutest grid

    Of course, the first step in this incredible grid-to-chart journey is. The grid. We added many items to this grid: checkboxes, names, and descriptions for optionality, many other pieces of data, and a mini-grid in the last column! You can further customize the cells and columns of your Kendo UI grid by specifying the templates to use. See our grid template documentation for more details.

    Let’s review the skeleton of the Grid to see how we achieved this layout:

    The grid itself

    First, we need to create the mesh itself, using a pie jar to hold this delicate dessert if you wish. Public gridData:Stock[] = stocksInPortfolio; From the data.ts file if you want to view its format, it.

    Optional Settings

    We’re going through [SelectableSettings] (https://www.telerik.com/kendo-angular-ui-develop/components/grid/selection/) allows the user to choose with or without the arrow to choose grid (to him We can click row), and we allow multiple rows to be selected at once.

    Persistent choice

    If you notice the kendoGridSelectBy binding, this is where we link in the storage project of our choice. This selectedKeys is where we define the collection to store the selected items. I love this feature! Read our persistent selection documentation for more information.

    Note: An important part to note here — when the user changes their selected item, the grid issues a selectionChange — the event onSelectionChange() we use to call, which stores the new selected item for persistence! 🙌

    The columns of our grid

    Now let’s look at the other columns we created! The first is to create checkboxes for selecting capabilities. We’re specifying showSelectAll as true so we have an all check box in the title.

    Next, we have a symbol column for stock acronyms:

    Then follow the name of the stock, as you would expect:

    Our Kendo UI for Angular Grid is very flexible, and as you can see here, The next column USES the presents element [ng – template] (https://angular.io/guide/structural-directives#the-ng-template) (Angle template is not our own template) custom appearance! As you’ll see below, the same is true for many other columns.

    Look at the rest of the grid in the bullet point I created for easy viewing. (Or view the full file here.) Expand the arrow below to see the full tag.

    The inner part of our grid

    A cool illustration of these columns – the chart library is so flexible that we can even use it in smaller charts in the grid itself (see the last column and its mini-chart operation!). .

    Some of you may have noticed that the context menu above also has an “Export to Excel” option. Did you know that Angular’s Kendo UI has a client-side Excel framework that you can use to dynamically create Excel files? Well, not only that, it’s built into the grid.

    By default, if we enable this, Grid just exports everything it can to Excel files. However, we can specify exactly what we want to export and which columns are actually contained in the export. This can be any field in the data, so it can be exported even if we don’t display it in the Kendo UI Grid. Also, fetchData allows us to specify where we can export all data, not just what’s currently in the grid (maybe just the current page). This is handy for scenarios where a lightweight front end needs to load less data, but you still want to export the entire data set based on user requests. Find out:

    Here you can customize how the export to Excel looks. View all your options in our documentation.

    Now that we have all the data we need in the cutest grid, we’re ready to turn it into a chart! The first step is to create a menu (as shown below) when you select certain blocks of data and then right-click.

    Having such a menu will allow us to select the type of chart we want to view the selected rows of data. So how do we do that?

    Building context Menus

    Capturing click events with our grid is as easy as pie! 🥧 Within our stock list component, we can capture click events on grid cells by saying:

    Use cellClickEvent on grid cells

    With grid cellClickEvent you have two types: Click and ContextMenu. The first, click, will be triggered when a click is made (or typed from the keyboard). The ContextMenu click event is triggered when the right click is performed. 🥳

    We can now get the click event (if it happens on a right click) and build a small pop-up menu to display our chart options!! 🥧 pie, right? !

    Prevents right-clicking on default values

    We can also access the triggering cellClick event (called an originalEvent). If we log it out in the console, you can see everything we can access:

    Click all properties of the event!

    We are fetching an originalEvent that is right-clicked and preventing it from happening by default. The default setting in this case is the normal browser menu that pops up when you right-click:

    Note: If you want to follow up or fork the project yourself, check out the repo here!

    Now that we’ve captured the right click and blocked the default, we’re ready for what you’ve been waiting for! Menu components!

    Inject our gridMenu using @viewChild

    First, we have our component access gridContextMenu. This context menu uses the Kendo UI ContextMenuComponent.

    Now, right click, we need to locate this nice menu:

    Build menu tags

    Here is kendo-ContextMenu in the HTML file of our stock list component:

    We define this menu declaratively in the tag and then use it when a right-click event occurs. As you can see, we’re doing a lot with this menu. We’re toggling openOnClick so as soon as the grid is right-click, the context menu will appear. And then we have a method that onSelect fires on selection. Find out:

    Here, we’re doing some amazing things. We are returning (basically taking no action if clicking on the item is Charts or undefined. If the project is Export Excel then we save the grid to Excel file. Otherwise, we will build a grand chart with the selected data and hide contextMenu!

    But how do we build the project that populates this menu?

    As for the menu items, we are getting data from to populate their data.ts files.

    This is of course how we loop items and set item.text!

    So let’s take a look back at all this grid-to-chart glory! We have a powerful grid that contains selectable rows of data. Once you have selected the data you are interested in, right-clicking will bring up a Kendo UI context menu that we have populated with all chart options. You can then select a chart and instantly view your data set in a pop-up window in a beautiful and fully functional Kendo UI chart. We also use the built-in Excel framework to export any combination of data to Excel with the click of a button.

    I encourage you to pull this project down and delve more deeply into other neat details that we haven’t covered in this article. I really enjoyed this demo, where Tsvetomir and Svetlin worked hard to show the power of multiple Kendo UIs combined with Angular components.

    • Documentation for this sample application: prgress. Co /ChartsDocsS…
    • Example application: prgress. Co /ChartsSampl…
    • Making: prgress. Co/ChartsGitHu…