I. Chart Maker Overview

      When the chart maker of Javascript charts VanCharts has been installed, double click the icon to see the following chart maker interface:

VanCharts maker

II. Select charts type

      When opening VanCharts chart maker, the last edit template used will be opened by default. If you use the chart maker for the first time, a new chart template will be established.

      ClickVanCharts makerbutton in the quick access toolbar or click File > New to create a new chart template

      Column Chart      Line Chart      Bar Chart      Pie Chart      Area Chart      Scatter Chart      Bubble Chart

      Radar Chart      Stock Chart      Gauges      Range Chart      Combined Chart      Gantt Chart      Doughnut Chart      Bubble Chart      GIS Map

III. Charts Data Set

      After JS charts type has been selected, select Chart Attribute - Datain the rightChart Attribute to configure data for charts as shown below:

VanCharts maker

1. Data import

      Data import is to select source for chart data, including JSON Data SetLocal EXCEL and Built-in Data Set as shown below:

VanCharts maker

2. Data allocation

      It means to allocate different categories of data for the chart. Refer to Data Allocation for details.

3. Data filtering

      It refers to screen data in the source based on certain criteria and only qualified data will be used in the chart. See Data Filteringfor details.


      JSON Data Set

      Local Excel

      Built-in Data Set

      Data Allocation

      Data Filtering

IV. Set Charts Style

      Charts style design refers to a series of settings for chart appearance, including size of chart area and chart title style.

1. Area and Size

      Area and size always exist in the front end of charts. Though Javascript Charts VanCharts plugin supports self-adaption, but size is still very important for any chart. Below we will explain how to set the chart size.

      Chart area setting is to set the size of displaying area of chart. After opening the chart maker, we can see a textbox in the bottom to input length and width (unit: pixel). Input figure directly and click enter to modify the size:

VanCharts maker

2. Title and Background

      We can click Chart Attribute - Style > Title in the chart toolbar to set title style as shown below:

VanCharts maker

2.1 Title

      We can set Whether to Show Title in the above figure. If visible, then title can be set.

      User can set the font, style, size, and color of title text, such as "Song, bold, 12" as shown below:

VanCharts maker

2.2 Frame

      User can add frame for the title and set the frame style, including line type, color and border-radius. For example, effect of red hair line title frame with border-radius is shown below:

VanCharts maker
2.3 Background

      User can set the background of title. For example, effect of yellow title background with a transparency of 50% is shown below:

VanCharts maker

3. Genre and Color

      Genre and color. Each column in column chart and each line in line chart represents a series, and we can click Chart Attribute - Style > Series in the toolbar to set series type as shown below:

VanCharts maker

      Different types of charts have different series attributes and we take column chart as example in this section. Column and bar charts share same series attributes as detailed in this section; Line, area and scatter charts have the same series attributes; Pie, bubble, radar, stock, range, and combined charts, as well as dashboard have series attributes different to each other. Gantt chart has not series attributes.

3.1 Color

      User can select color for series in the drop-down list or custom color. Effect of default series color is shown as below:

VanCharts maker

      A total of 10 built-in color schemes are available for users to choose from.

3.2 Custom

      User can select custom colors by "accurate setting" and "gradient color". Select Custom > Accurate Setting as shown below:

VanCharts maker

      Note: A total of 32 colors are available for accurate setting. Each color is selected by user. After clicking the small color box in the interface, "Select Color" dialog box will pop out for user to select desired color. Color displayed in the chart comes from the 32 colors laterally. If the number of series exceed 32, then colors will be used in cycle. Palette for accurate setting is modified from the default palette.

      Select Custom > Gradient Color as shown below:

VanCharts maker

      Note: In case of only 2 series, then starting color and ending color is shown respectively for the 2 series. In case of 3 series or above, then custom color changes gradually from starting color to ending color.

3.3 Genre

      A total of 5 genres are available, including normal, 3D, highlight, gradient, and transparent.

VanCharts maker

3.4 Spacing

      Category spacing and series spacing can be set for column and bar charts. Default series spacing and category spacing are respectively 0 and 100%. Effect for setting series spacing as -50% and category spacing as 103 is shown below:

VanCharts maker

      Note: Series spacing and category spacing only apply to column and bar charts.

4. Legend

      We can click Chart Attribute - Style > Legend in the chart attribute interface to set legend style as shown below:

VanCharts maker

      User can set the font, style, and size for tag text of the legend.

      Note: If minimum font has been set for the browser, and the minimum font set for the template is smaller than that of browser, then the latter shall prevail. For example, Chrome browser has a minimum font of 12, while the template has a minimum font of 10, then the font displayed is 12 when using Chrome to view the report. In this case, the font size of browser shall be modified if necessary.

      User can set the location of legend with four options: top, bottom, left and right (default).

5. Tag

      Tag refers to the content, style and location displayed for chart series when viewing charts in the web. Select chart and click Chart Attribute - Style > Tag. Check the box in front of tag and then other boxes of desired options as show below:

VanCharts maker

      Note: Tag location can be set outside, inside and in the center of the column.

      Save the template and click preview to see the effect below in the web:.

VanCharts maker

V. Chart Interaction Setting

1. Interaction Attribute

      User can set interaction attributes in the row 3 of parameter setting. Open Chart Attribute - Advanced and then select Interaction Attributes.Check Proportion of Value below Data Point Hint and set data format as shown below:

VanCharts maker

2. Condition Attribute

      User can also set attributes of Condition in VanCharts. Some data to be processed by user or with criteria can be displayed on criteria. See the example below. Click Display Criteria and add criteria attribute for the template. For example, the background color of column with series number of 3 is modified to green as shown below:

VanCharts maker

      Save the template and click preview to see the effect below in the web:

VanCharts maker