Steps for Javascript application in charts are shown below:

VanCharts Copy JS Code

I. Import local JS file

      As a purely javascript chart library, VanCharts requires user to import JS files into page before invoking VanCharts chart in the page.

      · Composition of VanCharts javaScript chart library:

      VanCharts javaScript chart library consists of 4 JS files:

      VanBase.js: Basic methods of the chart library;

      VanCharts.js: Definitions for types and attributes of charts in the library;

      i18n.js: Chart internationalization.


      Note: These 4 JS files can be found in the installation directory of the chart maker, and the storage path is %VanCharts_Home%\WebReport\js\ .

      These few JS files need to be imported into the page.

VanCharts Import local JS file

      · Import JS

      Create a new VanCharts.html page under the folder for storing Vancharts.js, and import the above three JS files in the header as shown below:

VanCharts Import local JS file

      Codes are as follows:

VanCharts Import local JS file

      Note: The path to import JS should be noted, and the jquery reference must be placed in front.

II. Define div to display chart

      When showing chart in HTML page, an element must be defined in this page to display VanCharts charts. For example, we define a div and set its id, length and width as shown below:

VanCharts Define div to display chart

      Codes are as follows:

VanCharts Define div to display chart

      Note: Id of element to place chart must be defined.

III. Write JS codes to produce charts

      Add a script tag and write codes to product charts when loading page, and place the chart into the div element defined above. The location can be determined based on element ID as shown below:

VanCharts maker

      options variable: options variable stores the choice of chart type and definition of attribute;

      dom variable: to obtain the target to placing chart element;

      charts variable: to create a new VanCharts target and transfer options and dom variables as its parameter, i.e. to produce the chart in options variable in the target specified by dom variable;

      Codes are as follows:

VanCharts Define div to display chart

      Note: options variable have not yet been assigned with values.

      · Assign value to options variable

We introduce how to produce charts in VanCharts chart maker and produce a 3D column chart in the previous four sections. Now, return to the Chart Maker interface and click the Copy JS button in the top left corner, and copy the JS code of type choice and attribute settings for producing the 3D chart, and then paste into the options parameters in the html page as shown below:

VanCharts maker

Complete codes are as follows:

IV. View effect

      Save HTML and preview the effect of the HTMl directly in the web as shown below:

VanCharts maker