Code Monkey home page Code Monkey logo

zingchart-angularjs's Introduction

ZingChart-AngularJS

Code Climate Build Status

An AngularJS directive for ZingChart to make your charts work dynamically with your data.

Check out our getting started page! (http://zingchart.github.io/ZingChart-AngularJS)

Install

Install the directive using one of the following options:

Bower

bower install zingchart-angularjs

NPM

npm install zingchart-angularjs

Download

https://github.com/zingchart/ZingChart-AngularJS/archive/master.zip

Quick Start

Step 1 : Include the following dependencies into your HTML file

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>

Step 2 :Inject the directive into your application

angular.module('myApp', ['zingchart-angularjs']);

Step 3 : Insert the ZingChart-AngularJS directive into your application

As an element

<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>

or

As an attribute

<div zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></div>

Step 4 : Configure your chart through a scope variable

...
$scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
    ]
};
...

##FAQ

How do I make my charts responsive?

Background

ZingChart internally attaches itself to the element that is specified in the render function, and continues to build children elements inside. In this Angular directives case, it will attach itself to either :

  • The <zingchart> if the element binding syntax is used
  • The <div> if the zingchart attribute binding syntax is used.

Since the element zingchart is not a valid HTML element, the browser will not assign css attributes to the element where as a div has inherit properties such as display:block.

How to

We reccomended using the attribute binding syntax on a div to automatically inherit the display:block CSS attribute. You will also need to apply a value of 100% to the zc-height and zc-width attributes.

Example :

<div zingchart id="chart-1" zc-width="100%" zc-height="100%"></div>

Options

The ZingChart Component takes the following attributes:

id [string] (required)

The id for the DOM element for ZingChart to attach to.

Example:
<zingchart id="chart-1"></zingchart>

zc-values [array] (optional)

default : null

Either a single-dimensional or multi-dimensional array containing the values to be charted. Must be an Angular scope variable to bind to the directive Overrides the series values in the zc-render and zc-data objects.

This parameter simulates the values parameter in each series object in a ZingChart json.

//ZingChart json example
data:{
    series : [
        {'values' : [45,43,26]},
        {'values' : [0,1,5,3]}
    ]
}

The directive takes care of the work so you don't have to create this object

Example:
//.js
$scope.myData = [0,2,2,3,3,4];
$scope.myData2 = [[45,43,26],[0,1,5,3]];

//.html
<zingchart id="chart-1" zc-values="myData"></zingchart>
<zingchart id="chart-2" zc-values="myData2"></zingchart>

zc-json [object] (optional)

default : null

A ZingChart configuration object. Must be an Angular scope variable to bind to the directive. This is the same object you would use to configure a chart using zingchart.render.data. It is a pseudo-parent object of zc-values. The directive performs a deep-watch on the object for any changes, and stringifies the result as JSON to be rendered to ZingChart. More information : http://www.zingchart.com/docs/json-attributes-syntax/

Example:

http://jsfiddle.net/mschultz/tne7uuq0/

//.js
$scope.myValues = [[0,2,3,4],[9,6,4,3]];
$scope.myObj = {
  series:[
        {
            lineColor:"#900000",
            marker:{
                backgroundColor:"#dc3737",
                borderWidth:1,
                shadow:0,
                borderColor:"#f56b6b"
            }
        },
        {
            lineColor:"#efe634",
            marker:{
                backgroundColor:"#fff41f",
                borderWidth:1,
                shadow:0,
                borderColor:"#fdffc0"
            }
        },
    ]
};

//.html
<zingchart id="chart-1" zc-values="myValues" zc-json="myObj"></zingchart>

Note: You can add series values into this object like you normally would while using ZingChart. However if you define the directives zc-values parameter, those values will override the "values" inside of your zc-data object


zc-render [object] (optional)

default : null

A ZingChart render object. This is the same object you would use to configure a chart using zingchart.render. You can change the render type, add events, and change other zingchart properties in here. Acts like a pseudo-parent of zc-values and zc-data. zc-render's properties will be overwritten if zc-values and zc-data are defined. More information : http://www.zingchart.com/docs/reference/zingchart-object/#zingchart__render

Note: This object will not be watched inside the directive. It is a one-time setup. While you can insert your data values into the render object directly, it is encouraged to use the zc-values attribute to enable dynamic updating.

Example:
//.js
$scope.myValues = [0,1,2];
$scope.myRender = {
    output :'canvas',
    events: {
        complete : function(p) {...}
    }
};

//.html
<zingchart id="chart-1" zc-render="myRender" zc-values="myValues"></zingchart>

zc-height [number] (optional)

default : 400

Will override the height inside of a zc-render object if defined. #####Example:

//.html
<zingchart id="chart-1" zc-height="500"></zingchart>

zc-width [number] (optional)

default : 600

Will override the width inside of a zc-render object if defined.

Example:
//.html
<zingchart id="chart-1" zc-width="500"></zingchart>

zc-type [string] (optional)

default : line

Will override the render type inside of a zc-render and zc-data object if defined.

Example:
//.html
<zingchart id="chart-1" zc-type="bar"/zingchart>

zingchart-angularjs's People

Contributors

mike-schultz avatar nmastracchio avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.