Building ListView-like TableNode-s with Blazor Diagram

In this blog post we look how you can create TableNode that render their cells following the logic of a list view: the tables have as many table columns and rows as needed in order to fit their content. The width of each column is fixed. When necessary, tables can be scrolled vertically. This is the final result:

TableNodes in Blazor

Continue reading

Candlestick Financial Chart in JavaScript with Real-time Data

In this blog post we will build the financial chart that you see below. This is a candlestick chart created with MindFusion Charting for JavaScript. We use data from the platform TraderMade. The data comes in a continuous stream as a WebSocket. The blog post explains how to get the data, how to parse it and how to create and customize the chart. The chart also offers the user to change the data interval and to zoom in/out the chart.

Continue reading

Using MindFusion ToolStrip Library in JavaScript

In this blog post we are going to look at the way you can build the ToolStrip that you see at the image below. We use the ToolStrip control, which is part of MindFusion Pack for JavaScript. Here is the final result:

We will go through the process of creating the toolstrip step-by-step, from scratch, clarifying the most important details.

You can run the sample online at https://mindfusion.eu/samples/javascript/grid/TrainSchedule.html

Continue reading

Custom Grid Drawing in Charting for JavaScript

In this blog post we will look in short at the steps to build this JavaScript area chart with custom grid:

The line chart uses DateTimeSeries for the data and a standard GridType for the major grid lines. The auxiliary grid lines among them are made with custom drawing: we will discuss in details the code for that.

The sample uses MindFusion Charting library for JavaScript, which also supports TypeScript.

You can see the sample online at https://mindfusion.eu/samples/javascript/chart/CustomGrid/DateTimeSeries.html

Continue reading