VanCharts JS chart maker is a tool aimed at reducing code amount and enhancing work efficiency for its user. Via this chart maker, user can save and preview chart design files with file extension .crt in local storage and may also export them as JavaScript to insert into Web pages. The following is a brief introduction about the using process of the chart maker.

I. Design charts

      Create new file: select the needed type of chart in the chart maker. There are thirty plus types of charts such as column, line, area, pie and bubble.

      Bind data: VanCharts supports three data sources:

      JSON : user only needs to provide a JSON URL.

      Excel: a local Excel file can be imported as a data source.

      Built-in data: Users can put data in the designer.

       Data setting: Javascript charts VanCharts reads obtained relevant data in the form of sheets. What user needs to do is just to set proper column names or values in line with categories/series as they demand.

      Visual and interactive setting: adjust different attributes and set interactive functions of charts. These settings are easy in visual interfaces.

      Design charts will be saved as .crt after completed. They can be opened and edited in the JS chart maker at any later time as desired by users.

      Preview charts: click Preview to see the effect of the chart being designed. By Preview, users can see the design effect at any time.

      Chart Maker Detail Steps

II. Exporting JS

      If the previewed effect is just as users expect, the charts can be inserted into Web pages.

      Click "Copy JS" and the chart maker will auto convert current chart attributes into JavaScript codes and save them in the clipboard.

       Copy JS Detail Steps

III. Page inserting

      JS database reference: refer to 4 JS files of the charts in the page where user wants to insert the charts. These 4 JS documents can be found under the installation directory of the designer at %VanCharts_Home%\WebReport\js\.

      Codes are as follows:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n.js" type="text/javascript"></script>
<script src="js/VanBase.js" type="text/javascript"></script>
<script src="js/VanCharts.js" type="text/javascript"></script>

      Define charts: define div and place charts; create a new VanCharts(options, dom), the options are attributes of the JS charts exported by the chart maker.

      Codes are as follows:

<script type="text/javascript">
$(document).ready(function(){          
var options =          //js code copy from the chart maker         
var dom = $("#chart");        
var charts = new VanCharts(options, dom);  });
</script>
<body>
<div id="chart" style="width:810; height: 500"></div>
</body>

      Assign the exported codes to options and preview html page. All is OK.

      Refer to the files under the installation directory of the designer for page examples at %VanCharts_Home%\WebReport\example.html

IV. Advanced Application

      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.

      Detail Steps