Dojo- Grid + Chart -Pending

Dojo- Grid + Chart custom widget

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojox/grid/resources/Grid.css">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/document.css">
<script>
	var dojoConfig = {
		baseUrl : "src",
		packages : [ {
			name : "dojo",
			location : "dojo"
		}, {
			name : "dijit",
			location : "dijit"
		}, {
			name : "dojox",
			location : "dojox"
		}, {
			name : "app",
			location : "app"
		}, ],
		parseOnLoad : true,
		async : true
	};
</script>
<script type="text/javascript">
	//require([ "src/EmployeeWidget" ]);
</script>

<div id ="gridDataId" data-dojo-type="EmployeeWidget" data-dojo-attach-point="titleNode" data-dojo-props="title:'Employee Details',displayType:'G'"> </div>

<div id="grid"></div>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>

CSS

/* Any demo specific styling needed for this tutorial only */
#grid {
	width: 600px;
	height: 300px;
}

JavaScript

//dojoConfig = {parseOnLoad: false};
define([ "dojo/_base/declare",
          "dojo/dom-construct",
          "dojo/parser",
          "dojo/ready",
          "dijit/_WidgetBase"],
        function (declare, domConstruct, parser, ready, _WidgetBase){
				return declare ("EmployeeWidget",[_WidgetBase],{
					i : 10,
					name : '',
					age : 0,
					title : '',
					displayType:'G',	
					constructor : function(){
						this.i = 30;
            console.log("constructor.");
					},
					postMixInProperties : function(){
						this.i = 20;
					},
					buildRendering : function(){
          console.log("buildRendering....");
						fnDataCallback(this.displayType);
						this.domNode = domConstruct.create("h3",{innerHTML: this.title});
					},
					_setNameAttr : function(name){
						this.name = name;
					},
					_setAgeAttr : function(age){
						this.age = age;
					},
					postCreate : function(){
						
					},
					startUP : function(){
						//alert ("5.Inside SatrtUp");
					}
				});
});

var fnChart = function (empArray) {
		var chart = new CanvasJS.Chart("chartContainer", {
				title: {
					text: ""
				},
				data: [{
					type: "column",
					dataPoints: empArray
				}]
		});
		chart.render();
	}
	
var fnDataCallback = function(displayType){
	//require([ "src/EmployeeWidget" ]);
	var grid, dataStore, store;
	define([
		"dojox/grid/DataGrid",
		"dojo/store/Memory",
		"dojo/data/ObjectStore",
		"dojo/request",
		"dojo/domReady!"
	], function(DataGrid, Memory, ObjectStore,request){
		request.get("https://api.myjson.com/bins/7pjv9", {
			handleAs: "json"
		}).then(function(data){
			if(displayType =="G"){
				store = new Memory({ data: data.items });
				dataStore = new ObjectStore({ objectStore: store });
				grid = new DataGrid({
					store: dataStore,
					query: { id: "*" },
					structure: [
						{ name: "EMP ID", field: "sapid", width: "70px" },
						{ name: "First Name", field: "firstname", width: "84px" },
						{ name: "Last Name", field:...