Category Archives: JavaScript

Custom Grid Drawing in Charting for JavaScript

Posted on by

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 →

One-way Links in Diagramming for JavaScript

Posted on by

In this blog post we demonstrate how you can use the JavaScript Diagram library to allow users to draw an org chart or one-way graph. By default, users are allowed to draw links between any two nodes and the count of links is unlimited. We will use event and properties, available in JS Diagram to allow users to:
– draw only one link between two nodes
– draw links only in one direction.

This behavior mirrors the hierarchy of an organization: in general , each employee, represented by a node, should have only one direct boss.


Continue reading →

Customizing Diagram Link Shape-s in JavaScript and React

Posted on by

In this blog post we will look at 3 different ways of customizing diagram links. They are:

  • Drawing one ShapeNode in the middle of the link.
  • Drawing a rectangle in the middle of a link.
  • Drawing a ShapeNode at conjunction points.

The following image illustrates DiagramLink s created by each of the three methods.

Continue reading →

Two Ways to Customize Form Captions in JavaScript Scheduler

Posted on by

In this blog post we will show you how to customize the captions that appear on forms in MindFusion Scheduler for JavaScript. You can use the same technique to change any string or format that appear on the UI of a calendar. We will do this through the localization files. Here is a screenshot from the final application:

When you download the trial version of the JavaScript scheduler or the JavaScript pack you will see a folder called “Localization”. There you have JSON and JS files that represent the captions and formatting strings of the UI for the calendar. They can both be used to customize the calendar.

Continue reading →