jqplot - pass data to build chart

I started a question here and a solution was provided.

The concept of OOP is really a little challenging but the only way I can understand is to do.
The code below works great but now I'm confused as to how I can use this piece of code from below.  I just want the array I can pass to my pie chart in jQplot.  The method being in a loop throws me off because i just want the final array and not while it's still populating it.

this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
	  return pieAry;
	  }

Open in new window


 function complete(data) {
    var truckPie = new truck2pie();
	
	for (i=0;i<data.d.results.length; i++)
	 {  	 
	  console.log(data.d.results[i].Title);
	  truckPie.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
	 }
 }
 

	
	
function truck2pie() {

	this.input= {};
	this.states = [];

	this.addTruck = function (state1, amount1){
	  if (!this.input[state1]){
		  this.states.push(state1);
		  this.input[state1] =0;
	  }	  
	  this.input[state1] +=amount1;
	  }
	  
	this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
	  return pieAry;
	  }

}

Open in new window



Any help would be much appreciated.

Thanks!
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
The array is not the pie array as you're thinking of it but rather a local variable.  For demostration purposes, i've changed it to "a":

this.makePieArray = function (){
	  var a=[];
	  for (i = 0; i < this.states.length; ++i) {
		a.push([this.states[i] , this.input[this.states[i]]]);
		}
	  return a;
	  }

Open in new window


Now when you call

var m = new WhateverYourObjectIs();
console.dir(m.makePieArray());

you'll see the array in the console.

I've written a general article on javascript objects that may shed some light on the subject for you: http://www.experts-exchange.com/articles/13138/Javascript-is-just-an-Object.html

This article of mine also touches on OOP: http://www.experts-exchange.com/articles/12264/Javascript-Frameworks-what-are-they.html
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
I tried that but I get the following script error below:

CODE:

function truck2pie() {

	this.input= {};
	this.states = [];

	this.addTruck = function (state1, amount1){
	  if (!this.input[state1]){
		  this.states.push(state1);
		  this.input[state1] =0;
	  }	  
	  this.input[state1] +=amount1;
	  }
	  
	this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
		console.log(pieAry);
	  return pieAry;
	  }
}

var jqData = truck2pie();
console.log(jqData.makePieArray());

Open in new window



ERROR:

SCRIPT5007: Unable to get property 'makePieArray' of undefined or null reference
0
RobOwner (Aidellio)Commented:
You need the new keyword

var jqData = new truck2pie();
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks!

I get no error but my array is blank.

Image of developer tool (watch)
0
RobOwner (Aidellio)Commented:
Did you add a truck?

E.g.

var jqData = new truck2pie();
jqData.addTruck("red", 100);
jqData.addTruck("green", 55);
jqData.addTruck("orange", 17);
jqData.addTruck("blue", 69);
console.dir(jqData.makePieArray());
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
That's where my confusion lies.  I was just reading your article.  Maybe you can help me with this struggle of understanding OOP.

As you can see from the code, the addTruck() is in a loop.  The addTruck is being added from a SharePoint list (about 300 items).  I don't want to call makePieArray() after each call to addTruck untill after the 300 items.  My pie chart will then show a break down of trucks by state.  ex: MD 150, VA 50, NJ 100 (in a pie chart)

If you look at the sample jqplot code below, it's expecting "[data]" passed to it for it to create the pie chart.  I need makePieArray() to provide that for me.

$(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
      seriesDefaults: {
        // Make this a pie chart.
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
          // Put data labels on the pie slices.
          // By default, labels show the percentage of the slice.
          showDataLabels: true
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

Open in new window

I hope that makes sense.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Sorry, I did not show you the whole code.  Here you go.  you will see the loop I speak of.

function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	
 function complete(data) {
    var truckPie = new truck2pie();
	
	for (i=0;i<data.d.results.length; i++)
	 {  	 
		truckPie.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
	 }
 }
 		
function truck2pie() {

	this.input= {};
	this.states = [];

	this.addTruck = function (state1, amount1){
	  if (!this.input[state1]){
		  this.states.push(state1);
		  this.input[state1] =0;
	  }	  
	  this.input[state1] +=amount1;
	  }
	  
	this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
		console.log(pieAry);
	  return pieAry;
	  }
}

var jqDtPlt = new truck2pie();
console.log(jqDtPlt.makePieArray());

function failure(data) {
 alert("Operation failed.");
 }

Open in new window

0
Slick812Commented:
OK, you do not seem to be able to have in your mind, a way to understand the progression of the Flow of code through several related (related by the operations that they do in ORDERED sequences, one after the other) in your javsscript, so you talk about -
  " don't want to call makePieArray() after each call to addTruck untill after the 300 items.  My pie chart will then show a break down of trucks by state.  ex: MD 150, VA 50, NJ 100 (in a pie chart)"

But first you must understand the javascript to have you CODE correctly the sequence of operations to do whatever code work that you need done.
 FIRST, in your code You do NOT place funtion Class definitions in other functions, the -
       function truck2pie() {
needs to be OUTSIDE and independent of the getListItems() function -
<script>

function truck2pie() {
// your needed truck2pie function code here
}

 function complete(data) {
// all complete( ) function code goes here
 }

function getListItems(url, listname, complete, failure) {
// all getListItems( ) function code goes here
 $.ajax({
// all Ajax code goes here
    });
}
</script>

Open in new window

It is possible to have functions within functions in javascript, However it confuses the "Scope" of how the functions are related,

Next, you do not seem to know how the Ajax process works, the -
    success: function (data) {

IS Asynchronous, and Is always OUT OF ORDER, in the Flow of the javascript code progression.

below is a quick code mock up of how I might try to have a correct code flow foe this -
<script>
function truck2pie() {
// I did not change your code here, BUT it needs refinement to get your result
	this.input= {};
	this.states = [];

	this.addTruck = function (state1, amount1){
	  if (!this.input[state1]){
		  this.states.push(state1);
		  this.input[state1] =0;
	  }	  
	  this.input[state1] +=amount1;
	  }
	  
	this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
		console.log(pieAry);
	  return pieAry;
	  }
}


// IMPORTANT, since the success function  is Asynchronous, make a GLOBAL variable for new truck2pie)(
var truckPie = new truck2pie();

 function complete(data) {
// this is Asynchronous event
  for (i=0;i<data.d.results.length; i++)
      { 
// What is the   data.d.results[i].Title  is that like the State ? ?
      truckPie.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
      }
// IMPORTANT, once you get the AJAX callback here, and LOOP the data into the
//  truckPie instance, then the truck data is complete!
// since this is Asynchronous, you can NOT call the makePieArray() method outside of the
//  function complete( ) UNTIL After that function, so you use it HERE In this event function -
var  pieArray = truckPie.makePieArray();
// NOW use the pieArray to make the Pie chart in that javascript for chart
console.log(pieArray);
 }

function failure(data) {
 alert("Operation failed.");
 }

function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	
}
</script>

Open in new window


This is UNTESTED code, and I only have it to try and show you some about using javascript
, but you have to know javascript programming before you can do more complex work like is in this.

I have NOT given you code that is able to WORK, I am only showing you the  operations and the sequences that you need to understand, you stated that you need to LEARN, so trouble shooting is a very Important thing for you to struggle with to learn the javascript code syntax and sequencing.
Ask questions if you need clarifications.
0
Slick812Commented:
OK , had a little time, so since you seem to not be getting the javascript coding experience, I did some of the usual EE copy and paste code, for you, that works in my firefox browser. This IS a TEST coding, I can not do your AJAX, so there is NO AJAX in this , , , but I do use a test JSON object to get this to work in development testing

<!doctype html><html lang="en"><head><title>Test for a PIE CHART</title>
<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script class="include" src="jquery.js"></script>
<script class="include" src="jquery.jqplot.min.js"></script>
<script class="include" src="jqplot.pieRenderer.min.js"></script>
<script>/* <![CDATA[ */

function truck2pie() {
// I have NOT tried to do other OPTIONS in this
// to keep it simple, no code change
this.input= {};
this.states = [];

this.addTruck = function (state1, amount1){
  if (!this.input[state1]){
    this.states.push(state1);
    this.input[state1] =0;
    }	  
  this.input[state1] +=amount1;
  }
	  
this.makePieArray = function (){
  var pieAry =[];
  for (i = 0; i < this.states.length; ++i) {
    pieAry.push([this.states[i] , this.input[this.states[i]]]);
    }
//console.log(pieAry);
  return pieAry;
  }
}

// IMPORTANT, since the success function  is Asynchronous, make a GLOBAL variable for new truck2pie)(
var truckPie = new truck2pie();

// ATTENTION
//the function below would be your - function complete(dataObject) - in the AJAX callback
function tryTruck(dataObject) {
// this is MY development Test function
for (var i=0;i<dataObject.d.results.length; i++) {
  truckPie.addTruck(dataObject.d.results[i].Title,  dataObject.d.results[i].NumberOfTrucks);
  }

var  pieArray = truckPie.makePieArray();

var out1 = "TRUVK PIE ARRAY = <br />";
for (i=0;i<pieArray.length; i++) {
  out1 += "name: "+pieArray[i][0]+", , amount: "+pieArray[i][1]+"<br />";
  }
document.getElementById("delvView").innerHTML = out1;

// ABOVE CODE was ran BEFORE I added the jqplot Chart javascript
// to see if I got the results I needed in the readout in <div id="delvView">

// Once I got all to work above, I added the jquery and jqplot Chart javascript
// and first used the - function tryChart() - to get a pie chart of some sort
// when I changed the jqplot parameters to show a pie sort of correctly 
// I adadapted that code to run for this TRUCK stuff

var piChart = $.jqplot('pie4Truck', [pieArray], {
  grid: {drawBorder: false, 
         drawGridlines: true,
         background: '#e8ddf8',
         shadow:false
         },
  axesDefaults: {

        },
  seriesDefaults:{renderer:$.jqplot.PieRenderer,
         rendererOptions: {showDataLabels: true}
        },
  legend: {show: true}
    });
}

function tryChart() {
// To make sure the code in the - function tryTruck( ) - did not conflick with the jqplot
// I copied some of the example code of jqplot into this function
// but it did not work at all, I had to change some things to get it working
// after this code worked, I used this format in the - function tryTruck( )

var sta = [['Virgini',17], ['South Cara',23], ['Louxianna',11], ['Vermout',19], ['Indrana', 4]];
var pieC1 = $.jqplot('pieTest', [sta], {
  grid: {drawBorder: false, 
            drawGridlines: false,
            background: '#f8e800',
            shadow:false
        },
        axesDefaults: {
             
        },
        seriesDefaults:{renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {show: true}
    }); 
}

// I do NOT use AJAX, because it's trouble I do not need now for testing
// instead I just create a JSON object below for testing the data input
var truckObj ={d:{
results:[
  {Title:"Virginia",NumberOfTrucks:11},
  {Title:"Ohio",NumberOfTrucks:12},
  {Title:"Virginia",NumberOfTrucks:5},
  {Title:"Maine",NumberOfTrucks:13},
  {Title:"Flordia",NumberOfTrucks:14},
  {Title:"Ohio",NumberOfTrucks:6},
  {Title:"Flordia",NumberOfTrucks:7},
  {Title:"Maine",NumberOfTrucks:8},
  {Title:"Flordia",NumberOfTrucks:3},
  {Title:"Ohio",NumberOfTrucks:9},
  {Title:"Flordia",NumberOfTrucks:43},
  {Title:"North Carolina",NumberOfTrucks:15},
  {Title:"North Carolina",NumberOfTrucks:3}
  ]
}
};

/* ]]> */</script>
</head>
<body>
<h3>Test for a PIE CHART</h3>
<div id="pieTest" style="width:300px; height:280px; border:1px dotted #22c;"></div>
<p><button onclick="tryTruck(truckObj)">Click for truck2pie array</button> - <button onclick="tryChart()">test Pie Chart JS</button></p>
<div id="delvView" style="width:19em; margin:4px; padding:5px; border:2px solid #c22;">Div to view test truck arry</div>
<div id="pie4Truck" style="width:350px; height:330px; border:1px dotted #2c2;"></div>
</body>
</html>

Open in new window

the two HTML buttons in this try out the javascript operations.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
There must be some type of confusion and probably because of me.  I did not place any function in another function.  They are all independent.  That part I understand.  I do not have any private functions.  Here's all the code:

		
	$(document).ready(function(){
	//var iceTrucks = window.iceTrucks || {};
		getListItems('/demos','IceCreamTrucks','complete', 'failure');
	});


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	
 function complete(data) {
    var truckPie = new truck2pie();
	
	for (i=0;i<data.d.results.length; i++)
	 {  	 
		truckPie.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
	 }
 }
 		
function truck2pie() {

	this.input= {};
	this.states = [];

	this.addTruck = function (state1, amount1){
	  if (!this.input[state1]){
		  this.states.push(state1);
		  this.input[state1] =0;
	  }	  
	  this.input[state1] +=amount1;
	  }
	  
	this.makePieArray = function (){
	  var pieAry =[];
	  for (i = 0; i < this.states.length; ++i) {
		pieAry.push([this.states[i] , this.input[this.states[i]]]);
		}
		console.log(pieAry);
	  return pieAry;
	  }
}

var jqDtPlt = new truck2pie();
console.log(jqDtPlt.makePieArray());

function failure(data) {
 alert("Operation failed.");
 }
 

}

Open in new window


I am trying to get your code to work in jsfiddle.  Once i am done analyzing and wrapping my head around it all, I'm sure i will have questions.

Thanks so much for your explanation.  I will be back.
0
RobOwner (Aidellio)Commented:
you're losing your data because of the scope of your function:

when your ajax completes:

function complete(data) {
    var truckPie = new truck2pie();  This object only lasts as long as the complete function!

What you need to do is have a global variable (or use a namespace as described in one of the articles i posted earlier)

Here is your full code: http://jsbin.com/letime/1/edit?js,console and a demo ajax load from http://jsbin.com/cagapu/1/edit?js,console

var iceTrucks = window.iceTrucks || {};
var jqDtPlt = window.jqDtPlt || {};

$(document).ready(function(){
  getListItems('/demos','IceCreamTrucks','complete', 'failure');
});


function getListItems(url, listname, complete, failure) {

  // Executing our items via an ajax request
  $.ajax({
    //url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
    url: "http://output.jsbin.com/cagapu.js",
    method: "GET",
    dataType: "json",
    success: function (data) {
      mycomplete(data); // Returns JSON collection of the results
    },
    error: function (data) {
      myfailure(data);
    }
  });
}
function mycomplete(data) {
  window.iceTrucks = new truck2pie();

  for (i=0;i<data.d.results.length; i++)
  {  	 
    window.iceTrucks.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
  }

  console.log(window.iceTrucks.makePieArray());

}

function truck2pie() {

  this.input= {};
  this.states = [];

  this.addTruck = function (state1, amount1){
    if (!this.input[state1]){
      this.states.push(state1);
      this.input[state1] =0;
    }	  
    this.input[state1] +=amount1;
  };

  this.makePieArray = function (){
    var pieAry =[];
    for (i = 0; i < this.states.length; ++i) {
      pieAry.push([this.states[i] , this.input[this.states[i]]]);
    }
    return pieAry;
  };
}

function myfailure(data) {
  alert("Operation failed.");
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
I changed the names of your complete and failure functions as it was conflicting with the arguments you were passing to the getListItems function.

There are quite a few changes so just ask about what doesn't make any sense.
0
Slick812Commented:
you say - "I did not place any function in another function. "

this is untrue, , ,you have the -
        function truck2pie() {
and others, INSIDE of the  -
       function getListItems(

you may need to pay closer attention to how you see the "grouping" and "relationships" of your code work.


here is a terribly Large  code mistake in your code -
       var jqDtPlt = new truck2pie();
       console.log(jqDtPlt.makePieArray());

you do not seem to understand that you can NOT get information - data from another Instance,
The Instance that has the data (after the function complete(data)  completes ) is this
    var truckPie = new truck2pie();

so the jqDtPlt has nothing and delivers nothing in the console.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Okay.

I think I'm starting to see the light. Still a long way to go though to become an expert.

Rob Jurd,

Thanks for your jsbin code and your articles.  Those helped a lot.  I need to get used to everything in javascript being an object, including functions.

Slick812,
You are right.  After close examination of the code, I realized that I did have functions in a function.  That was not my intention.

Last question from you two.

So I recreated the code to what you see below.  What is the difference between that and the one you both helped me with?  Is there a performance difference between the two?  How do you decide when to pick one over the other?

var iceTrucks = window.iceTrucks || {};
var jqDtPlt = window.jqDtPlt || {};

$(document).ready(function(){
  getListItems('http://www.isogunro.com/demos','IceCreamTrucks');
});


function getListItems(url, listname) {
  $.ajax({
    url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
    method: "GET",
	headers: { "Accept": "application/json; odata=verbose" },
    dataType: "json",
    success: function (data) {
      complete(data); // Returns JSON collection of the results
    },
    error: function (data) {
      failure(data);
    }
  });
}
function complete(data) {
  window.iceTrucks = new truck2pie();

  for (i=0;i<data.d.results.length; i++)
  {  	 
    window.iceTrucks.addTruck(data.d.results[i].Title,  data.d.results[i].NumberOfTrucks);
  }

  console.log(window.iceTrucks.makePieArray());

}

function truck2pie() {

  this.input= {};
  this.states = [];
};
truck2pie.prototype.addTruck = function (state1, amount1){
    if (!this.input[state1]){
      this.states.push(state1);
      this.input[state1] =0;
    }	  
    this.input[state1] +=amount1;
  };
truck2pie.prototype.makePieArray = function (){
    var pieAry =[];
    for (i = 0; i < this.states.length; ++i) {
      pieAry.push([this.states[i] , this.input[this.states[i]]]);
    }
    return pieAry;
  };

function failure(data) {
  alert("Operation failed.");
}

Open in new window

0
RobOwner (Aidellio)Commented:
The only differences I can see between your code and the example I posted was:

You've removed the completeand failure arguments, which is good they're not needed
You've used the prototype keyword to define your functions versus creating them inside your "constructor" e.g. this.addTruck versus truck2pie.prototype.addTruck though both are the same thing.  Using prototype, doesn't allow you to define private functions. They have to be created inside the "constructor" i.e. function truck2pie() { ... var p = function() {...};

see the section "Functions are objects" in my article http://www.experts-exchange.com/articles/13138/Javascript-is-just-an-Object.html as it explains about private and public properties/functions
0
Slick812Commented:
You have now not accidentally placed functions in side functions, which is good.
I looked at the other code constructs you have decided to use, and I can not see why you have used these things.
?????????????????????????????????

You have some rather awkward code uses, and you you seem to have used them for no reason, no advantage in usage, and not have a plan to get your wanted result, the array of states for the pie chart.

in this code, why would any one use these?
       var iceTrucks = window.iceTrucks || {};
       var jqDtPlt = window.jqDtPlt || {};

what are they there for? ?   the variable  jqDtPlt  in not any where else in this code work?

why would any one use this?
     window.iceTrucks = new truck2pie();
what advantage is placing the here useless "window" , and don't tell me about "Scope" because there is no scope in this code work, the only place the  iceTrucks  instance is used is in the FOR loop and in the -
      console.log(window.iceTrucks.makePieArray());

I can see that somewhere you have read about the unique javascript "prototype" modifier, and thought to use it here, but for what benefit? I can not even begin to explain the complications of understanding the reasons to use a prototype, you can use it as you do in your code, but you should really learn about building functions as object definitions, before you try and tackle prototyping. Generally (my opinion) prototyping is used to modify DYNAMICALLY an object function for different code inputs, Like first, to make a vehicle function - object with several standard methods, and then use prototype to add  methods for a "Car" object, and then for a Truck object, you add different  methods wid prototyme. But I have seen coders that do like you here, and just use prototype to add any and all methods.
Look at the jquery and mootools base code, they do not use much prototyping at all.

just for your info, you can add methods to an object with just an equal =   , , like -
    var truckPie = new truck2pie();
    truckPie.addMe = function(a, b) {
    var c = a + b;
    alert("The addition is "+c);
    }
How is this different than using prototype? ?


You have so far not even tried to modify the  
   function truck2pie() {

at all, and to learn javascript , you should try and make it so it will put the states "Names" into alphabetical order, BEFORE it outputs the pie chart array. My opinion is, you need to get much other things in javascript, before you need to prototype.

You should at least change the object variable name from "inputs", which I named in a real hurry, to "totals" or "truckTotals" or "truckNumbers".
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
I thought the following was from preventing namespace collisions.  I know the code is small but what if it grew to much larger than it is now with a few more developers working on it.  With that scenario, wouldn't it now be necessary to use?
       var iceTrucks = window.iceTrucks || {};
       var jqDtPlt = window.jqDtPlt || {};  

Open in new window


' var jqDtPlt = window.jqDtPlt || {};' was deleted out of my final code construct. I did modify it some more and realized it was not used anywhere.

YOU said
just for your info, you can add methods to an object with just an equal =   , , like -
    var truckPie = new truck2pie();
    truckPie.addMe = function(a, b) {
    var c = a + b;
    alert("The addition is "+c);
    }
How is this different than using prototype? ?

I don't know, that was my question.  I'm just trying to learn though I'm making a bunch of mistakes.

Any recommended books/blogs?
0
Slick812Commented:
Don't know what to say? You do not seemed to have learned much even though I spent time on this to show you things.

You say -
"what if it grew to much larger than it is now with a few more developers working on it.  With that scenario, wouldn't it now be necessary to use?"

The short answer is = NO, NO, NO,,  why Rob tried to drop the concept of namespaces on a beginner, who needs to learn other thing first, baffles me.

I gave you a hint to start to learn by my say - "try and make it so it will put the states "Names" into alphabetical order,"
which uses a beginners learning array method as .sort(),  in that object as  this.states.sort( );   you can get info here -
    http://www.w3schools.com/jsref/jsref_sort.asp

you are trying to do programming concepts like prototypes, private, public, namespaces, and others , ,which have NO PART, and no relevance to the code work you need to do for your simple task of building a a two level array for the pie chart.

- - - - - - - - - - - - - - - -
you might look at these JS tutorials -
        http://www.codecademy.com/tracks/javascript 
        http://www.htmldog.com/guides/javascript/

I do not know very much about these tuts, but they seem to be popular, beware of any tuts that have "Design Patterns" in thier name, as patterns are not really for beginners, (my opinion).
0
RobOwner (Aidellio)Commented:
Namespaces certainly have their place in OO programming. Slick, if you'd read my article you'd understand what I'm talking about. It outlines how objects are used in JavaScript, which are the fundamentals to the language and a good place to start for a beginner.
0
RobOwner (Aidellio)Commented:
Namespace is just a fancy word for an object. You put your variables, arrays, objects and whatever in them. It's a good practice to know about when you start out to prevent bad habits and conflicting variables.
Please read and re read my article on JavaScript objects (http://www.experts-exchange.com/articles/13138/Javascript-is-just-an-Object.html). It's aimed at the beginner and anyone else that wants to refresh their knowledge.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.