What i will write down here in this article is how to summarize a table, and create a graphic based on it. I will also explain how to do it, we're going to break open SharePoint so you can do finally what you want to do with it. While we  wont need more access then well basically SharePoint Designer, or using only the web browser is possible too!. But with SPD (SharePoint designer)  we could do a bit more.

I will keep  in mind that most of you don't code, or are new to SharePoint, JavaScript CAML Jquery etc etc.
You should know HTML tags, i am not going to explain those. Code will be briefly explained, enough to  get you started.

I would advice to use some kind of editor to write Jscript in, for example Notepad++ / Editra  / ... etc
Also to test locally jscript its handy to have locally on your client pc a webserver
A real small one can be downloaded here Tinyweb also read its small manual. It is less then 1 Mb.
It installs without GUI, its simply active once started and that's enough if you want to play with scripting.

Our client interaction

A thing to note is that we will work user interaction based; or better name it "triggered by user interaction". We are not going to make something that will keep running like an extra service even if you logoff. Also we would like to use only a part on a standard SharePoint webpage. And we would like to update preferably  only our part of our applet. We wouldn't like to reload the whole page if you  click  on something. As that makes pages slow. So we need a trick to update a part of a page. So lets make a little webpage called index.html and place it in the c:\www\root\  folder from Tinyweb; Tinyweb uses this folder hard coded see its manual.


Note that instead of having the <div id="mystuff">  tag, also <from id=title> could be used. However the webparts for  customized HTML in SharePoint wont accept that so.. so that's why we use <div title=....> instead. a <Div> is just like a section placeholder.
Well saved it in c:\www\root\ ?  Then try it locally, browse to http://127.0.0.1/index.html if you installed tinyweb.

We just learned to change a part of a html page, by user action. And well basically this new text was created by some JavaScript function that changed the DOM parts of a HTML page. It was simple text display, but could have been an image or calculation.. from the moment you clicked it!

Also note that in javascript  a function() has commands who start in between { } brackets end instructions end use ; another thing to note is that there are two way of string endings the single '  and the double ", if  one needs to include one of them to show, then suround  it with the other one.
Thats used like this :

var mycar = "That's my car";

var quote = 'It think he said "you are using double quotes", and finished with a single one';

It might be helpful for your coding in javascript  to have some site about javascript open as well to do quick lookups
Because strings in java can be more complex then the sample above, a good online manual is the online java school it has a good command reference

Placing your JavaScript on SharePoint

Although its maybe a bit silly the previous page we made we could put its script part on SharePoint to. Note that it  would be a fragment for a normal .aspx based page. .aspx is a complex HTML type on which SharePoint is based, if your interested some informative information can be found

here Well our code only will  go inside another aspx page.. kinda cool huh ?...
Let us simply just copy from <div id="MyStuff"> ... to ... <input type='button' onclick='changeText()' value='Change Text'/>
And save that as a new file myfirst.js
Notice that is actually a bit more then only <script> code since some text before and after the <script...> tags is also used, but that's OK, Sharepoint wont complain about it. As SharePoint wil just thread it like a part of its own page.

I'm a lazy writer, so to add our peace of code to a page follow this guys article, but note that your file is not text.txt like in his example. Also note that he uses the "Site Assets library" to store the script. Well it could be anywhere but be sure normal users can only read it.. ! (If your unfamiliar with permissions then read about SharePoint permissions here). Permissions should be properly set as Scripts are powerful and you wouldn't want, someone meshing up your script to create havoc !.

Our SharePoint list setup

Before we go on lets create some a common testing environment. Lets create two lists on sharepoint. One calendar list named Rent. And another  list named Socks. With the Rent list add an exra column named SockType of the type lookup and point to the Socks list. So we can start our Sock renting emperium. With the Socks list add a column Price. When done create some items in the Socks  use the Title colomn to describe each sock for example Red Socks /  Black Socks / White Socks etc and decide a rental price for them.  Note sharepoint keeps the internally the columns names based upon creation time. So if you rename them, you have to dig into webpage to find original names back. As we will need the internal names to script against.

Now for the Rent list, change a view to include also the socks column, it might be more handy for the moment  to  not  show it as a calendar view.
Just a plain list, with created by, title, socktype and price. Now add  about 10 calendar items. Try to use different sock bookings for the Rent list title just enter some imagiairy names of people who rent your socks.

 

 

Useful script parts for SharePoint

Instead of writing a single huge script where i will combine everything, i think its better for your understanding. To start thinking in scripts as functions you need to combine, and to adjust to your own situation. So i will keep my script  parts relatively small, for sake of understanding and simplicity. But provide some good starting points for you to learn from.

So here is a script to read from a sharepoint list :

(Copy and paste using notepad (or notepad++) as some lines are wrapped here)

I'm  not  going to much in detail but the above script has some interesting features:

It uses the line below to read a normal column using  .the get_item method; most columns can be read this way. However lookup  columns have a different method to read them  out, as their data isnt in this list itself they require  .get_lookupValue()
Then we also  had a line with a simple CAML Query we asked for two fields of all items. Its wise to  not ask for every column, only the ones you need.
But it is also posibble to do more advanced CAML queries, again i'm lazy here and so i just point here to another website with an example. The point is with CAML you can query for a selection much like the way databases work, do actions like "give me all items bigger then 5 and smaller then 10  AND who's name contains Sock" etc etc.. You can not only read but also set values with the proper CAML commands, its beyond my topic, but here are some more samples again on another website, (as i'm still lazy )

And there is even a Query builder to create more complex CAML queries it can be downloaded U2U CAML Query builder. And since your on the internet your able to find more examples yourself just use the keywords like jscript CAML sharepoint <query> etc..

In the end the display of our results works just like our first example.
Note however  that we retrieve  a  list and write it line by line; but we also could put our results in  a Jscript array
To do complex calculations with it; thats our next topic

Code to summarize per item using a jscript array

NOTE: I will continue writing this article later make it a favorite if you wish
I hope to finish it soon (so i have a good reminder of all i did the past days).
This will cost me a few evenings to write, for now its time to sleep for me.