VanCharts also presents unique chart maker. User can set data source, style and interactivity attributes of chart in the visual interface. One-click export of JS attributes saves you lots of time occupied for reading API files. Embrace a higher development efficiency and a less project cost!
Various Chart Types and Effects
Over 30 chart types available, including bar chart, line chart, pie chart, doughnut chart, map, GIS map, Gantt chart.
Free choice of 4 graphic styles and 10 professional color schemes, and yes, customizable!
3D graphic illustration supported
Creative Codeless Design Pattern
It offers more than just a chart library! Featured by ease of use and flexible JS API interface, VanCharts also presents unique chart maker. User can set data source, style and interactivity attributes of chart in the visual interface. One-click export of JS attributes saves you lots of time occupied for reading API files. Embrace a higher development efficiency and a less project cost!
Cross-Platform and Cross-Browser Compatibility
HTML5 conforming, cross-platform development and application supported
Support for popular browsers, even IE 6, 7, 8.
Interaction of Aided Analysis
Interaction of aided analysis available, including chart drill down, hyperlink, switch, linkage, dynamic data refresh, scaling, warning line, trend line and data sheet. With VanCharts, we bring secondary analysis to users in addition to the display function.
Highly Customizable Criteria for Display
Unique criteria for display allow user to set specific category or series aside from general attributes. Criteria attributes help user to design customizable chart effects of all types!
iOS/Android Native Chart Library
Aside from JS chart library, VanCharts also supplies iOS and Android native chart library for users to integrate into native apps. Enjoy faster loading, clearer detail rendering and better graphics illustration effect! Cool native animation to create extraordinary experience in mobile apps!
VanCharts JS Designer is a tool aimed at reducing code amount and enhancing work efficiency for its user. Via this designer, 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 designer.
I. Design a chart
Create new file: select the needed type of chart. 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: 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 designer 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.
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 designer will auto convert current chart attributes into JavaScript codes and save them in the clipboard.
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 designer.
Codes are as follows:
<script type=“text/javascript”>
$(document).ready(function(){
var options = //js code copy from designer
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
1. Overview
VanCharts is a pure JavaScript chart library enabling users to add interactive charts easily in the website or web applications. With VanCharts, you can enjoy intuitional, interactive and highly customizable charts of various types, which can meet your every demand for Web charts!
VanCharts Designer, supported by the powerful pure JS library of VanCharts, enables quick chart generation of various types and gorgeous effect without programming efforts! This manual is expected to help users to know well the chart design process in just 5 minutes. Now, let us get on this joyful journey of chart design!
2. VanCharts Fratures
2.1 Visual interface
Designing charts in designers eliminates the need for users to read complicated API instruction and makes the process simple. Real-time effect preview can assist users to adjust the chart quickly.
2.2 Various chart types
VanCharts offers lots of chart types, including column chart, bar chart, line chart, area chart, pie chart, doughnut chart, scatter chart, bubble chart, radar chart, Gantt chart, stock chart, GIS map, and map. In addition, you can feedback your desired chart type to us at any time, and we will respond quickly to update any new and appropriate type!
2.3 Gorgeous chart effects
A number of professional color schemes and design genres predefined can meet every demand for chart expression in any situation.
2.4 Abundant chart interaction
Numerous interaction settings, including data point tip, real-time data refresh, multi-chart linkage, map drill down, series drag, and hyperlink.
2.5 Native chart library from mobile apps
Beside support for HTML5 mobile apps, FRchart also supports the native chart expression in mobile apps (IOS and Android). Compared to HTML5, it has quicker chart loading, clearer detail rendering, and more gorgeous chart effects. Cool native animation adopted also satisfies user’s demand for native integration in mobile apps.
1. Description
When the designer has been installed, double click the icon to see the following designer interface:
Chart attributes window provides the setting of three categories: Data、Pattern and Advanced Application.
New Template
1. Description
When opening VanCharts Designer, the last edit template used will be opened by default. If you use the designer for the first time, a new chart template will be established.
2. New template
Clickbutton in the quick access toolbar or click File > New to create a new chart template as shown below:
Select Chart Subtype
1. Select Chart Type
Click chart type drop-down list in the left to select different chart types as shown below:
1.1 Subtype
After chart type has been selected, subtypes are displayed in the right. Take column chart as example below:
Chart Data Set
1. Description
After chart type has been selected, select Chart Attribute – Datain the rightChart Attribute to configure data for chart as shown below:
There are mainly three steps for configure data: first, select the data source for chart; second, allocate chart data; and finally filter data (optional).
2. Data import
Data import is to select source for chart data, including SON Data Set、Local EXCEL and Built-in Data Set as shown below:
3. Data allocation
It means to allocate different categories of data for the chart. Refer to Data Allocation for details.
4. 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.
Price: 90.00 USD
Vancharts Single Developer
Price: 200.00 USD
Vancharts 5 Developers
Price: 300.00 USD
Vancharts 10 Developers
Price: 800.00 USD
Vancharts Unlimited Developers Developers
The post Vancharts appeared first on Software Sales.