• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

    •

    ZingChart Modules

    Overview

    ZingChart's modular design was implemented to allow users to include only what is needed for charts, keeping file size to a minimum. Read on to learn about the different methods that can be used for including modules.

    Method 1 - Library w/ Core Modules Included

    Including zingchart.min.js gives you immediate access to all of the core modules (modules marked in green below). To use a module marked in yellow below, the path to ZingChart"s modules directory must be correct. By default, this value is "./modules/", meaning ZingChart will look for modules from within the same directory as your web page or application.

    If your page or application is not in the same level as the the modules directory, you can manually set the path with zingchart.MODULESDIR="path/to/modules/"; :

    <script src="path/to/zingchart.min.js"></script>
<script>zingchart.MODULESDIR="path/to/modules/";</script>

    Modules marked in yellow below will now automatically be loaded by ZingChart.

    To load any modules marked in red below, you must explicitly include them, which means ZingChart will not automatically load these modules, even if the modules directory is correctly defined.

    To load red modules, first ensure zingchart.MODULESDIR is correct and use zingchart.loadModules(string, callback);, which accepts a string of comma-separated module names you would like to load and a callback function that is called once the module is ready to be used. For example, if you want to load zingchart-maps.min.js (the maps engine) and zingchart-maps-usa.min.js (a map of USA), you would use the string "maps,maps-usa" in the loadModules() method:

    <script src="path/to/zingchart.min.js"></script>
<script>
  zingchart.MODULESDIR="path/to/modules/";
  zingchart.loadModules("maps,maps-usa", function(){
    //Render your charts with the modules.
    zingchart.render({...});
  });
</script>

    The loadModules is an asynchronous function that pulls in files from a server, so while the callback is an optional parameter in loadModules, we highly recommend using it.

    Alternatively, *both yellow and red modules* can be loaded by simply including the script in your page as you would with any other script. Using this method, you do not need to set zingchart.MODULESDIR or use zingchart.loadModules():

    <script src="path/to/zingchart.min.js"></script>
<script src="path/to/modules/zingchart-grid.min.js"></script>
<script src="path/to/modules/zingchart-maps.min.js"></script>
<script src="path/to/modules/zingchart-maps-usa.min.js"></script>

    Method 2 - Core Library w/ No Modules

    Intended for advanced users!

    To keep the number and size of files to an absolute minimum, you can include the core ZingChart library, and choose which modules to load using many of the same methods mentioned above. The zingchart-core.min.js file does not include any modules, including modules marked in green.

    Ensure zingchart.MODULESDIR is correctly set to allow ZingChart to automatically load any modules in green and yellow below.

    <script src="path/to/modules/zingchart-core.min.js"></script>
<script>zingchart.MODULESDIR="path/to/modules/";</script>

    Load modules marked in red using both zingchart.MODULESDIR and zingchart.loadModules(string);

    <script src="path/to/modules/zingchart-core.min.js"></script>
<script>
  zingchart.MODULESDIR="path/to/modules/";
  zingchart.loadModules("maps,maps-usa", function(){
    //Render your charts with the modules.
    zingchart.render({...});
  });
</script>

    Include the scripts manually:

    <script src="path/to/modules/zingchart-core.min.js"></script>
<script src="path/to/modules/zingchart-xy.min.js"></script>
<script src="path/to/modules/zingchart-line.min.js"></script>
<script src="path/to/modules/zingchart-grid.min.js"></script>
<script src="path/to/modules/zingchart-maps.min.js"></script>
<script src="path/to/modules/zingchart-maps-usa.min.js"></script>

    ZingChart CDN Modules Information

    By and large, everything previously mentioned also applies to the files on cdn.zingchart.com.

    In the root directory of the CDN, you'll find zingchart.min.js, zingchart-core.min.js, and the modules directory.

    Here is a consolidated example of the different module inclusion techniques using zingchart.min.js:

    <!-- Load main script w/ core modules included -->
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>

<!-- Set zingchart.MODULESDIR and load maps engine and United States map, zingchart-maps.min.js and zingchart-maps-usa.min.js -->
<script>
  zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";
  zingchart.loadModules("maps,maps-usa", function(){
    // Render your charts with the modules.
    zingchart.render({...});
  });
</script>

<!-- Load zingchart-grid.min.js by including the script -->
<script src="http://cdn.zingchart.com/modules/zingchart-grid.min.js"></script>

    Here is another example using zingchart-core.min.js:

    <!-- Load core script w/ core modules excluded -->
<script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>

<!-- Set zingchart.MODULESDIR and load maps engine and United States map, zingchart-maps.min.js and zingchart-maps-usa.min.js -->
<script>
  zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";
  zingchart.loadModules("maps,maps-usa", function(){
    //Render your charts with the modules.
    zingchart.render({...});
  });
</script>

<!-- Load zingchart-grid.min.js by including the script -->
<script src="http://cdn.zingchart.com/modules/zingchart-grid.min.js"></script>

    Custom ZingChart Build

    Our Build Generator allows you to pick and choose individual modules that will be included in a single file, zingchart.min.js. Including this custom built file will give you immediate access to each of the modules selected on the build form. This will help reduce the number of HTTP requests made by your page or application, as well as keep the file size down.

    <script src="path/to/zingchart.min.js"></script>

    For more information, or to build your own custom build, visit the Build Generator.

    Custom Modules

    ZingChart allows you to create your own reusable modules! Go here for more information.

    Modules List

    Color Key
    • Included in zingchart.min.js
    • Auto-loaded by ZingChart from /modules/ directory when using zingchart-core.min.js
    • Not included in zingchart.min.js
    • Auto-loaded by ZingChart from /modules/ directory
    • Not included in zingchart.min.js
    • Must be loaded using zingchart.loadModules(string);

    Chart Type Modules (50)

    Chart Type Modules
    area.min.js area3d.min.js boxplot.min.js
    bubble.min.js bubble-pack.min.js bubblepie.min.js
    calendar.min.js chord.min.js depth.min.js
    flame.min.js gauge.min.js grid.min.js
    heatmap.min.js hbar.min.js hbar3d.min.js
    hbubble.min.js hbullet.min.js hfunnel.min.js
    hscatter.min.js line.min.js line3d.min.js
    nestedpie.min.js pareto.min.js piano.min.js
    pie.min.js pie3d.min.js populationpyramid.min.js
    radar.min.js range.min.js rankflow.min.js
    scatter.min.js scorecard.min.js stock.min.js
    stream.min.js sunburst.min.js tilemap.min.js
    tree.min.js treemap.min.js varea.min.js
    variwide.min.js vbar.min.js vbar3d.min.js
    vbullet.min.js vectorplot.min.js venn.min.js
    vfunnel.min.js violin.min.js vline.min.js
    waterfall.min.js wordcloud.min.js  

    Feature Modules (31)

    Feature Modules
    3d.min.js animation.min.js api-annotations.min.js
    api-rules.min.js api.min.js bubble-legend.min.js
    core.min.js csv.min.js debug.min.js
    dragging.min.js errorbars.min.js export.min.js
    guide.min.js history.min.js legend.min.js
    multi-guide.min.js objects.min.js patterns.min.js
    preview.min.js r.min.js refresh.min.js
    scalableyaxis.min.js scalemarkers.min.js scroll.min.js
    selection.min.js selection-tool.min.js toolbar3d.min.js
    tooltip.min.js xy.min.js yx.min.js
    zoom.min.js    

    Country & World Map Modules (125)

    Country & World Map Modules
    maps-afg.min.js maps-ago.min.js maps-alb.min.js
    maps-and.min.js maps-are.min.js maps-arg.min.js
    maps-arm.min.js maps-aus.min.js maps-aut.min.js
    maps-aze.min.js maps-bdi.min.js maps-bel.min.js
    maps-ben.min.js maps-bfa.min.js maps-bgr.min.js
    maps-bih.min.js maps-blr.min.js maps-bol.min.js
    maps-bra.min.js maps-brn.min.js maps-btn.min.js
    maps-bwa.min.js maps-caf.min.js maps-can.min.js
    maps-che.min.js maps-chl.min.js maps-chn.min.js
    maps-civ.min.js maps-cmr.min.js maps-cod.min.js
    maps-cog.min.js maps-col.min.js maps-cri.min.js
    maps-cub.min.js maps-cyp.min.js maps-cze.min.js
    maps-deu.min.js maps-dnk.min.js maps-ecu.min.js
    maps-egy.min.js maps-esp.min.js maps-espL2.min.js
    maps-est.min.js maps-eth.min.js maps-fin.min.js
    maps-fra.min.js maps-fraL2.min.js maps-gab.min.js
    maps-gbr.min.js maps-gbrL2.min.js maps-gha.min.js
    maps-gmb.min.js maps-gnb.min.js maps-grc.min.js
    maps-gtm.min.js maps-guf.min.js maps-guy.min.js
    maps-hrv.min.js maps-hun.min.js maps-ind.min.js
    maps-irl.min.js maps-irn.min.js maps-isl.min.js
    maps-isr.min.js maps-ita.min.js maps-jpn.min.js
    maps-kaz.min.js maps-ken.min.js maps-kor.min.js
    maps-kwt.min.js maps-lao.min.js maps-lbr.min.js
    maps-lie.min.js maps-ltu.min.js maps-lux.min.js
    maps-lva.min.js maps-mda.min.js maps-mex.min.js
    maps-mkd.min.js maps-mlt.min.js maps-mne.min.js
    maps-moz.min.js maps-mta.min.js maps-nam.min.js
    maps-ncl.min.js maps-nga.min.js maps-nld.min.js
    maps-nor.min.js maps-nzl.min.js maps-omn.min.js
    maps-pak.min.js maps-pan.min.js maps-per.min.js
    maps-phl.min.js maps-png.min.js maps-pol.min.js
    maps-prt.min.js maps-qat.min.js maps-rou.min.js
    maps-rus.min.js maps-rwa.min.js maps-sen.min.js
    maps-slv.min.js maps-srb.min.js maps-sur.min.js
    maps-svk.min.js maps-svn.min.js maps-swe.min.js
    maps-tha.min.js maps-tjk.min.js maps-tun.min.js
    maps-tur.min.js maps-twn.min.js maps-uga.min.js
    maps-ukr.min.js maps-ury.min.js maps-usa.min.js
    maps-uzb.min.js maps-ven.min.js maps-vnm.min.js
    maps-world-continents.min maps-world-countries.min.js maps-yem.min.js
    maps-zaf.min.js maps-zmb.min.js maps-zwe.min.js
    maps.min.js    

    US State Modules (51)

     
    maps-usa_ak.min.js maps-usa_al.min.js maps-usa_ar.min.js
    maps-usa_az.min.js maps-usa_ca.min.js maps-usa_co.min.js
    maps-usa_ct.min.js maps-usa_dc.min.js maps-usa_de.min.js
    maps-usa_fl.min.js maps-usa_ga.min.js maps-usa_hi.min.js
    maps-usa_ia.min.js maps-usa_id.min.js maps-usa_il.min.js
    maps-usa_in.min.js maps-usa_ks.min.js maps-usa_ky.min.js
    maps-usa_la.min.js maps-usa_ma.min.js maps-usa_md.min.js
    maps-usa_me.min.js maps-usa_mi.min.js maps-usa_mn.min.js
    maps-usa_mo.min.js maps-usa_ms.min.js maps-usa_mt.min.js
    maps-usa_nc.min.js maps-usa_nd.min.js maps-usa_ne.min.js
    maps-usa_nh.min.js maps-usa_nj.min.js maps-usa_nm.min.js
    maps-usa_nv.min.js maps-usa_ny.min.js maps-usa_oh.min.js
    maps-usa_ok.min.js maps-usa_or.min.js maps-usa_pa.min.js
    maps-usa_ri.min.js maps-usa_sc.min.js maps-usa_sd.min.js
    maps-usa_tn.min.js maps-usa_tx.min.js maps-usa_ut.min.js
    maps-usa_vt.min.js maps-usa_wa.min.js maps-usa_wi.min.js
    maps-usa_wv.min.js maps-usa_wy.min.js  

    Summary

    ZingChart modules allow you to extend the base functionality with additional chart types and feature extensions.