.netCHARTING v10.2 Documentation Send comments on this topic.
JavaScript Charts
Getting Started > General Tutorials > JavaScript Charts

Glossary Item Box

Intro

JSCharting is a javascript based charting layer. It works similar to zoomer and navigator but uses only javascript to render the chart client side. This allows real-time updates of chart properties and data. It uses SVG and VML graphics technologies to increase browser compatibility and chart interactivity which yields a richer experience on devices such as phones and tablets running iOS, Android and more.

Benefits:

It is easy to use, by simply setting Chart.JS.Enabled = true a pure javascript chart will render in place of static chart images.

JSCharting is a subset of the full DNC library but many of the more important features are supported. The feature differences are discussed in more detail below.  

 

What's new in v9.2

Version 9.2 includes many new features including microcharts and mosaic plots. Some new features include:

 

What's new in v9.1

Version 9.1 includes many new features and enhancements. Some new features include:

 

What's new in v9.0

Version 9.0 is a major update to JS chart engine that brings JavaScript output much closer to feature parity with image charts. Some new features include:

 

What's new in v8.4

Version 8.4 introduces a number of features including Gantt support. Some new features include:

 

What's new in v8.3

Version 8.3 introduces a new simpler way of working with map charts. Some new features include:

 

What's new in v8.2

Version 8.2 introduces a number of new chart types and improved axis features. Some new features include:

 

What's new in v8.1

Version 8.1 introduces a number of new chart types and more robust label support. Some new features include:

 

What's new in v8.0

Version 8.0 is a major update to the previous JSCharting implementation. Some new features include:

This new version introduces a new client side API, if existing charts are using JS to manipulate the chart, this code may have to be modified.

Supported features

 

 User Interface (UI)

The JSCharting user interface is inherently more interactive and dynamic. It offers a number of features described below.

Tooltips
The tooltips have a highlight of the element color so it's easy to see which data point it relates to. Tooltips are also optimized to work with touch devices.

Element Highlighting on Hover
When the mouse hovers on elements, they are highlighted.

Export / Print buttons
Each JSCharting chart can have two buttons. One sends the chart to the printer and the other allows saving the chart as a raster or vector image. Several popular image formats are supported including PDF, PNG, and Jpeg.
Legend Entries
The legend entries are clickable to hide series in any JSCharting chart.

Element selection
When element selection is enabled, clicking on elements selects them and the selected elements can be detected through javascript. With a pie chart, clicking on elements selects them and explodes the selected pie slice.
Zooming
Dynamic zooming is also available when enabled. It allows the user to zoom in and out of the charts range.

 

Server Side Programming Interface (API)

JSCharting is driven by the current .netCHARTING API. Simply enabling JSCharting will render the chart in the client-side browser instead of generating an image on the server. JSCharting offers the ability to interact with the chart in the browser through Javascript.

Enabling JSCharting
To enable JSCharting, the following code can be used:

[C#]

Chart.JS.Enabled = true;

[Visual Basic]

Chart.JS.Enabled = true

Initial Animation
When JSCharting loads, it animates the series drawing. The duration of this animation can be specified in milliseconds and set as in the following code snippet:

[C#]

Chart.JS.InitialAnimationDuration = 1000;

[Visual Basic]

Chart.JS.InitialAnimationDuration = 1000

Element Selection
Element selection can be enabled or disabled with the following code:

[C#]

Chart.JS.EnableElementSelection = true;

[Visual Basic]

Chart.JS.EnableElementSelection = true

 

Zooming

To enable zooming for a javascript chart, the Chart.JS.AxisToZoom property can be utilized. It takes a string with possible values of: "X", "Y", "XY".

[C#]

Chart.JS.AxisToZoom = "X";

[Visual Basic]

Chart.JS.AxisToZoom = "X"

 

See Sample: JSCZooming

 

Client Side Programming Interface (API)

JSCharting can interact with Javascript in the browser to update dynamically and notify other javascript code of chart based events.

In order to interact JSCharting, a control ID must be specified for the chart on the server side so it can be referred to in javascript. The following code can be used to achieve this:

[C#]

Chart.JS.ControlID = "jscChart";

[Visual Basic]

Chart.JS.ControlID = "jscChart"

The following Javascript snippets assumes the above control id setting is used.

 

Reading the JS output

When Chart.Debug=true, the generated JS will be legible. When debug is disabled, whitespace is removed.

 

Unsupported JS settings

There are a few JS API settings that cannot be set through the DNC API such as point states like hover and selected. For this and other such cases, a method is provided that applies settings given a path a value.

[C#]

Chart.JS.Settings.Add("defaultSeries.defaultPoint.states.hover.outline.color", "red");

[Visual Basic]

Chart.JS.Settings.Add("defaultSeries.defaultPoint.states.hover.outline.color", "red")

This method takes only strings values, however, any type can be specified. If a value of "true" is passed, it will be a boolean in JS. To use a string with that value, use "'true'" with single quotes. The same applies to numbers. If a JS variable that holds the value in JS must be referenced, prefix the string with "js:". This will prevent quote wrapping and will be used in JS as is. For example, if in JS there is a variable defined as var colorRed = 'red'; to refer to this variable in a string setting server side, use "js:colorRed". This allows passing functions as well for cases like label callbacks. For example: "js:function(txt){return 'text:'+txt}"

See Sample: JSCSettings JSCLabelCallbacks

 

 

Axis and AxisMarkers

The following axis related javascript usage is demonstrated in sample:
JscDynamicStylingUpdates

Getting Axis and Data Scale Ranges
First, the Chart.JS.ControlID must be specified, and an ID must be assigned to the axis server side.

[C#]

Chart.JS.ControlID = "JscChart";
Chart.YAxis.JsID = "axy";
Chart.XAxis.JsID = "axx";

[Visual Basic]

Chart.JS.ControlID = "JscChart"
Chart.YAxis.JsID = "axy"
Chart.XAxis.JsID = "axx";
Then in JS, the axis range can be acquired using code such as:

var range= JscChart.axes('axy').getRange();

This returns a value such as:

{ min:0, max:100, dataMin:5, dataMax:80}

The result contains the following values:

range.min - Axis scale minimum.
range.max - Axis scale maximum.
range.dataMin - Data scale range minimum.
range.dataMax - Data scale range maximum.

 

Setting Axis Scale Range
Similar code can be used to apply a new axis scale range.

JscChart.axes('axy').zoom(0,2);

To set a date time based scale, use:

JscChart.axes('axy').zoom(new Date(2011, 0, 2), new Date(2011, 0, 5));

 

Adding and Removing Axis Markers dynamically.
Axis markers can be added and removed in realtime through Javascript.

The following code snippet adds a range axis marker to the x axis.

JscChart.axes('axx').markers.add({
  value:[new Date(2011, 0, 2),new Date(2011, 0, 5)],
  color: '#ACFFC5',
  id: 'am1'
});

 

In order to add and remove a single value axis marker which draws as a line instead of an area, the following code can be used.

JscChart.axes('axx').markers.add({
value: new Date(2011, 0, 2),
color: '#ACFFC5', lineWidth:2,
id: 'am1'
});;

To remove this axis marker, the following code can be used:

JscChart.axes('axx').markers('am1').remove();

 

 

 


Real-Time Data Update

Adding a point to a series

To add a point to a series in real time the following javascript function can be used.

series.points.add( pointOptions, { [ shift ], [ animation ] })

PointOptions - Takes an array, or point object. If it is an array, it will be interpreted as x and y values respectively.

The point object contains the following basic properties:

  • color
  • name
  • x
  • y
  • id

 

shift - When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.

animation - true/ false, or the animation duration in milliseconds.

Note: The series must be assigned an ID server side in order to refer to it later.

var series = c
series.points.add([2, 6]);

To use a point object the follwing code can be used:

var series = JscChart.series('s1');
series.points.add({
   color: 'Red'
   x: 2,
   y: 6
});

 

The series object has the following available functions:


Adding a series to a chart
To add a new series to a chart the following type of code snippet can be used:

JscChart.series.add({
 points: [194.1, 95.6, 54.4, 29.9, 71.5]       
});

 

See sample JscLiveDataUpdate for an example of how points are added to a chart in javascript.

Get a Selected Point
To get the points currectly selected the follwing code can be used:

var selectedPoints = JscChart.series().points({selected:true})

This returns a collection of selected point objects which can be filtered/iterated further.

The point object has the following available functions:

The JS point object has the following properties:

 

Client-Side Token Parsing

The chart, series, and point objects have the following two functions that allow evaluating tokens client side. The replaceTokens('string with tokens') function processes tokens associated with the point, series, or chart (SeriesCollection) and returns a string. The tokenValue('token') function accepts only one token name and returns the value as its native type. For example calling series.replaceTokens( '%average') will return a string such as "12". However, calling tokenValue('%average') will return the number 12.

The chart version of these two methods also has an optional id parameter. If not specified, the tokens are evaluated against all the series on the chart. If an id value is specified, the tokens are based on the target's type be it a point or series.

 

Events

Events can be specified server side through the hotspot class and include javascript handlers.

The following code snippet sets a click event handler for the chart and includes a function that adds a point at the clicked location to the chart.

[C#]

Chart.DefaultElement.Hotspot.Attributes.Custom.Add("click", "js: function(){if (this.series.points.length > 1) this.remove();}");

[Visual Basic]

Chart.DefaultElement.Hotspot.Attributes.Custom.Add("click", "js: function(){if (this.series.points.length > 1) this.remove();}")

When adding the click event, a function handler with one parameter can be used. The parameter contains the click event information. The above shows how to get the clicked axis values based on the event. The 'this' keyword refers to the javascript chart object.

 

When using a setting for JSC, prefixing the string value with "js:" indicates the string should be treated as a JS literal. Some label text settings can include js callback functions to process the text when needed.
See sample JscClickAddPoint for an example.

Chart level events

Events can be specified for an element as well. The following code snippet adds a handler to elements that removes them when clicked:

[C#]

Chart.DefaultElement.Hotspot.Attributes.Custom.Add("click", "if (this.series.data.length > 1) this.remove();");

[Visual Basic]

Chart.DefaultElement.Hotspot.Attributes.Custom.Add("click", "if (this.series.data.length > 1) this.remove();")
See sample JscClickAddPoint for an example.

Element level Events

 

©2021. All Rights Reserved.