JavaScript

ZingChart is dependency free and pure JavaScript.

  1. Install via NPM or Bower:
    npm install zingchart

    or use the ZingChart CDN:

    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  2. Add your chart element wrapper
    <div id="myChart"></div>
  3. Include the library in your HTML document and then render your chart!
    <!-- Just before the closing body tag is best -->
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script>
    zingchart.render({
    id: 'myChart',
    data: {
    type: 'line',
    series: [
      { values: [54,23,34,23,43] },
      { values: [10,15,16,20,40] }
    ]
    }
    });
    </script>
    </body>

View on GitHub

React

Quickly create dynamic JavaScript charts with ZingChart and React

  1. Install via NPM
    npm install zingchart-react
  2. Add your chart element
    <div id="myContainer"></div>
  3. Require the ZingChart com
    var ZingChart = require('zingchart-react').core;
  4. Create and render your chart
    var myConfig = {
    type: 'bar',
    series: [
    { values : [35,42,67,89,25,34,67,85] }
    ]
    };
    
    React.render(
    <ZingChart id="myChart" height="300" width="600" data={myConfig} />,
    document.getElementById('myContainer')
    );

View on GitHub

AngularJS

ZingChart's AngularJS wrapper helps you create JavaScript charts with two-way data binding.

  1. Install via NPM or Bower
    npm install zingchart-angularjs
  2. Inject the directive into your application
    angular.module('myApp', ['zingchart-angularjs']);
  3. Configure your chart through a scope variable
    $scope.myJson = {
    type: 'line',
    series: [
    { values: [54,23,34,23,43] },
    { values: [10,15,16,20,40] }
    ]
    };
  4. Insert the ZingChart-AngularJS directive into your application
    <zingchart id="myChart" data-zc-json="myJson" data-zc-height=500 data-zc-width=600></zingchart>

View on GitHub

jQuery

Easily create and modify JavaScript charts with ZingChart's jQuery wrapper

  1. Include jQuery, ZingChart, and the jQuery wrapper
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.jquery.min.js"></script>
  2. Create a <div> with an ID
    <div id="myChart"></div>
  3. Create your chart inside the $(document).ready() function
    $(document).ready(function() {
    $('#myChart').zingchart({
    data: {
    type: 'line',
    series: [
    { values: [1,2,5,3,9,4] }
    ]
    }
    });
    })

View on GitHub

Ember IconEmber

Generate interactive JavaScript charts with ZingChart's custom Ember component

  1. Install the ZingChart Ember component
    npm install --save ember-zingchart
    ember g ember-zingchart
  2. Create a handlebars template where you want your chart to render
    {{ember-zingchart renderOptions=myRenderOptions}}
  3. Set the render options in the controller
    import Ember from 'ember';
    
    let _renderOptions = {
    height: 400,
    width: '100%',
    data: {
    type: 'bar',
    series: [
    { values : [35,42,67,89,25,34,67,85] }
    ]
    }
    }
    
    export default Ember.Controller.extend({
    myRenderOptions: _renderOptions
    });

View on GitHub

Backbone IconBackbone

Turn simple Models and Views into snazzy JavaScript charts with ZingChart's Backbone wrapper

  1. Include the ZingChart library and this wrapper
    <script src="cdn.zingchart.com/zingchart.min.js"></script>
    <script src="cdn.zingchart.com/backbone/backbone.zingchart.min.js"></script>
  2. Create the target element in the DOM
    <div id="chartDiv"></div>
  3. Create your data Model
    var chartData = new ZingChart.ZingChartModel({
    data: [[3,2,3,3,9], [1,2,3,4,5]],
    charttype: 'bar',
    width: 500,
    height: 400
    });
  4. Create your chart View
    var chartView = new ZingChart.ZingChartView({
    model: chartData,
    el: $('#chartDiv')
    });
  5. Render your chart
    chartView.render();

View on GitHub

PHP IconPHP

Create interactive JavaScript charts all in PHP with ZingChart's PHP wrapper.

  1. Install via Composer
    composer require zingchart/php_wrapper
  2. Include the library
    require __DIR__ . '/vendor/autoload.php;
  3. Render your chart
    $zc = new ZC("myChart");
    $zc->setChartType("bar");
    $zc->setSeriesData([1,4,2,6,3]);
    $zc->render();

View on GitHub