Javascript charts VanCharts includes some advanced application functions, including analytical line, trend line, multi-dimension coordinate axis, online chart switch, reverse-order axis, series drag, dynamic refresh, and custom map. Another highlight of VanCharts is the support of native mobile apps.

I. Analytical Line

      Analytical line of VanCharts includes two types: trend line and warning line.Trend line is used in line, scatter, column, area and combined charts to show the data trend, an attribute of series. The chart below shows the trend for freight charge in the first half:

JavaScript charts analytical Line

      Production of trend line is explained here:VanCharts trend line.

      A number of warning lines can be added into Javascript Charts to achieve early warning. Like report, we can add early warning in charts to see whether data in charts has exceeded indexes. For example, in the following individual product sales chart, 250 is defined as qualified, and 500 as excellent:

      A number of warning lines can be set, and the font, color, style, and content of warning line can be customized.

JavaScript charts warning line

      Production of warning line is explained here: Javascript Charts VanCharts warning line.

II. Multi-dimension Coordinate Axis

      Multi-dimension coordinate axis charts enable showing data in several dimensions instead of just two dimensions (only data of one dimension can be compared) and to compare data of two dimensions or more in the same chart. In the chart below, we can compare the sales volume of each product type in East China and also the sales volume of beverage in East China and North China:

JavaScript charts Multi-dimension Coordinate Axis

      Production of Multi-dimension Coordinate Axis is explained here:VanCharts Multi-dimension Coordinate Axis.

III. Online Chart Switch

      Chart switch is to modify chart type online and can be achieved directly in the web. In addition, only one template is required as shown below:

JavaScript charts Online Chart Switch

      Production of Online Chart Switch is explained here:VanCharts Online Chart Switch.

IV. Reverse-order Axis

      Reverse-order chart is to show the coordinate or value axis in reverse order, which is suitable for analyzing the depth of data, thus creating a visualized and objective experience. In the sample below, we have reserve-order the value axis of column chart:

JavaScript charts Reverse-order Axis

      Production of Reverse-order Axis is explained here:VanCharts Reverse-order Axis.

V. Series Drag

      Series drag is to merge and delete chart series in the web. When viewing charts in the web, user can manually operate the charts with ease. For example, drag to merge 2 series or delete a series.

      Note: Series drag only applies to column, bar, line, pie, doughnut, area and bubble charts.

      Production of Series Drag is explained here:VanCharts Series Drag.

VI. Custom Map

      We have mentioned custom maps in the previous sections, and now we explain how to import custom maps.

      First, you have to find such SVG files of map, which is pretty easy on the Internet.

      Open the designer and select the map, then click edit to add SVG files in the order as shown below.

JavaScript charts Custom Map

      For SVG map files of region not matching to the field, you need to manually match such file in the Match between Region and Field. Click confirm to add the file successfully.

JavaScript charts Custom Map

VII. Dynamic Refresh

      Dynamic refresh is a pretty tiny feature of VanCharts and can be enabled by checking the box in front of Dynamic Display in the Interaction Attribute.

JavaScript charts Dynamic Refresh