<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="//cdn.zingchart.com/zingchart.min.js"></script>
<script src="zingchart-angularjs.js"></script>
<style>
html, body {
margin:0;
}
header {
width:100%;
height:55px;
}
header a {
display:inline-block;
padding:10px;
text-decoration:none;
background-color:#2196f3;
color:#FFF;
}
header a:hover {
background-color:#64b5f6;
}
.view-contents {
background-color:#f7f7f7;
padding:10px;
}
.graph-contents {
background-color:#fff;
}
</style>
</head>
<body ng-app="myApp">
<header>
<a href="#/">Home</a>
<a href="#view1">View 1</a>
<a href="#view2">View 2</a>
</header>
<h1>This content is static</h1>
<div class="view-contents" ng-view></div>
<script src="MainController.js"></script>
</body>
</html>
<div ng-controller="MainController">
<h3>View 1 Content</h3>
<div zingchart zc-json="myJson" zc-values="aValues" zc-width="99%" zc-height="300px" id="chart-1"></div>
</div>
(function(){
'use strict';
angular.module('zingchart-angularjs', [] )
.directive('zingchart', [function(){
var currentAutoId = 1;
return {
restrict : 'EA',
scope : {
id : '@',
zcValues : '=',
zcJson : '=',
zcRender : '='
},
controller : ['$scope', '$element', '$attrs', function($scope, $element, $attrs){
var id;
// Get or generate id
if(!$attrs.id){
id = 'zingchart-auto-' + currentAutoId;
currentAutoId++;
$attrs.id = id;
// newly generated id has to be put back on the element too to meet
// zingcharts requirements
$element.attr('id', id);
}
else{
if($attrs.id.indexOf('{{') > -1){
id=$scope.id;
$element.attr('id', id);
}
else{
id = $attrs.id;
}
}
var initializing = {
json : true,
values :true
};
$scope.$watchCollection('zcValues', function(){
if(initializing.values){
initializing.values = !initializing.values;
return;
}
if($scope.zcValues){
if(isMultiArray($scope.zcValues)){
zingchart.exec(id, 'setseriesvalues', {
values : $scope.zcValues
});
}
else{
zingchart.exec(id, 'setseriesvalues', {
values : [$scope.zcValues]
});
}
}
});
$scope.$watch('zcJson', function(){
if(initializing.json){
initializing.json = !initializing.json;
return;
}
if($attrs.zcJson){
var _json = $scope.zcJson;
//Inject values
if($scope.zcValues){
injectValues($scope.zcValues, _json);
}
//Inject type
if(JSON.stringify(_json).indexOf('type') === -1){
_json.type = 'line';
}
else{
_json.type = ($attrs.zcType) ? $attrs.zcType : _json.type
}
zingchart.exec(id, 'setdata', {
data : _json
});
}
},true);
}],
link : function($scope, $element, $attrs){
var id = $element.attr('id');
//Defaults
var _json = {
data : {
type : 'line',
series : []
},
width : 600,
height: 400
};
//Add render object.
if($scope.zcRender){
mergeObject($scope.zcRender, _json);
}
//Add JSON object
if($scope.zcJson){
mergeObject($scope.zcJson, _json.data);
}
//Add Values
if($scope.zcValues){
injectValues($scope.zcValues, _json.data);
}
//Add other properties
_json.data.type = ($attrs.zcType) ? $attrs.zcType : _json.data.type;
_json.height = ($attrs.zcHeight) ? $attrs.zcHeight : _json.height;
_json.width = ($attrs.zcWidth) ? $attrs.zcWidth : _json.width;
_json.id = id;
//Set the box-model of the container element if the height or width are defined as 100%.
if(_json.width === "100%" && !$element.css('width')){
$element.css('width', '100%');
}
if(_json.height === "100%" && !$element.css('height')){
$element.css('height', '100%');
}
zingchart.render(_json);
}
};
}]);
/**
* Injects values into each series, and handles multi series cases.
* @param the values to inject into the config object
* @param the configuration object itself.
*/
function injectValues(values, config) {
if(typeof config.series === 'undefined'){
config.series = [];
}
//Single Series
if(!isMultiArray(values)){
if(config.series[0]){
config.series[0].values = values;
}
else{
config.series.push({'values' : values});
}
}
//Multi Series
else{
for(var i = 0; i < values.length; i++){
if(config.series[i]){
config.series[i].values = values[i];
}
else{
config.series.push({'values' : values[i]});
}
}
}
return config;
}
/**
* Helper function to merge an object into another, overwriting properties.
* A shallow, not a recursive merge
* @param {object} fromObj - The object that has properties to be merged
* @param {object} intoObj - The object being merged into (Result)
*/
function mergeObject(fromObj, intoObj){
for(var property in fromObj){
if (fromObj.hasOwnProperty(property)) {
intoObj[property] = fromObj[property];
}
}
}
/**
* Determines whether an array is multidimensional or not.
* @param {array} _array - The array to test
* @returns {boolean} - true if the array is multidimensional, false otherwise
*/
function isMultiArray(_array){
return Array.isArray(_array[0]);
}
})();
<div ng-controller="MainController">
<h3>View 2 Content</h3>
<p> We are executing a ZingChart API call to show
that the chart doesn't persist:</p>
<p class="graph-contents" ng-init="getChartInfo(this)">{{graphContent}}</p>
</div>
// initialize application
var app = angular.module("myApp", ['ngRoute', 'zingchart-angularjs']);
// define controller
app.controller('MainController', function($scope, $timeout) {
$scope.graphContent = '';
$scope.aValues = [[1,2,3,4,5],[1,2,3,4,5]];
$scope.myJson = {
type : "bar",
title:{
backgroundColor : "transparent",
fontColor :"black",
text : "Hello world"
},
series : [
{
backgroundColor : '#00baf2'
},
{
backgroundColor : '#4caf4f'
}
]
};
// Will use this to show that the chart still persists in the application
// Even though the view does not
$scope.getChartInfo = function() {
var returnContent = zingchart.exec('chart-1','getdata');
if (!returnContent)
$scope.graphContent = 'Contents Undefined'
else
$scope.graphContent = JSON.stringify(returnContent);
}
// destroy the chart
$scope.$on('$destroy', function() {
zingchart.exec('chart-1', 'destroy');
});
});
// define routes
app.config(function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl : 'view1.html'
})
.when('/view2', {
templateUrl : 'view2.html'
})
.otherwise({
template : '<h3>Nothing Exists In This View</h3>'
});
});