Tuesday, November 14, 2017

SharePoint Charts with HighCharts

, , No comments

     HighCharts for SharePoint


 Overview

  • HighCharts is an interactive JavaScript based Charts.
  • It is configured with JSON based data
  • HighCharts can be used to populate charts based on SharePoint list data.
  • It can be dynamically updated
  • It can also link multiple lists and provide a drill down chart.

Configuring for SharePoint

  • Refer Jquery and other libraries to read and manipulate SharePoint data.
  • Refer HighCharts.js. Additionally Drilldown.js or Treeview.js or any other related HighCharts libraries may be required based on the type of chart. Details are available in the HighCharts website based on each chart type.
  • Generally HighChart variable as series array. It has data variable which holds chart JSON data.
  • Read and load SharePoint list data.
  • Build the data string in the chart format.
  • Convert the data to JSON object and initialize HighChart.
  • List data can be reloaded with setTimeout function for constant reload.


Reference : https://www.highcharts.com/  
Share:
Read More

Saturday, September 5, 2015

Javascript Basics

No comments

JavaScript
Basics
  • Dynamic
    • Variables have types but can change from one type to other
  • Object Oriented
    • Prototypes based
  • JIT Complied 
  • <script> tags to include script
    • <script type="text/javascript" href="script1.js"></script>
    • Included inside <head> or <body>
      • <head> scripts are loaded before DOM
      • <body> scripts are loaded during DOM
Variables
  • Declaration
    • var myVar1
    • not necessary to be declared
      • myVar2 = "abc";
    • "use strict"  for enforcing declaration
  • Types : typeof(myvariable) to get type
    • boolean
      • true or false
    • number
      • 2
    • string
      • "2"
    • object
      • var person = {
                                 name="abc",
                                 age=25,
                                 address={street,city,pincode},
                                 function printDetails(){statements;}
                                 };
      • objects can be mutated (add new property at any stage)
        • person.height=5.5;
    • function
      • function myFun(var1){
        }
    • undefined
      • var var1;
  • multiple declaration will overwrite any previous declaration
  • Scope
    • can be local only inside a function
    • will be available for that execution of function and if referred in its subfunctions
Arrays
  • var people = [];
  • people.push(person1);
  • people.length
Conditions 

  • if( a == b)

    • == or != Types ignored
    • === or !== types also need to be equal

  • switch(case){case(a) statements;break;case(b) statements;break;}
  • condition?true:false

Loops

  • while(i<10){}
  • for(var i = 0; i < people.length ; i++ ){}

    • break
    • continue

Functions

  • functions are another variable type
  • cannot be overloaded

    • two functions with same name but different parameters will be overwritten as a single function
    • function fun1(var1,var2){}
      • function calls with variable mismatch works
        • fun1(var1) : var2 is undefined

  • Anonymous function

    • will not have name
    • called as and when declared
    • function(){}

  • functions can be passed as function parameter

    • function funMain(var1,callback1){
      statements;
      callback1();
      }
    • function callback1(){}
    • funMain("abc",callback1);

Commom properties and functions

  • alert("Message");
  • console.log("message")

    • logs on debug console window (F12 on browser)

  • document

    • variable which stores all contents of HTML document
    • document.getElementById("idofDOMElement")
      • innerHTML

  • window

    • root of the current window in a browser
    • can have document loaded directly of in side multiple frames
    • stores all global variables

Share:
Read More

Wednesday, September 2, 2015

CSS Basics

No comments

CSS : Cascading Style Sheet

Basics
  • Inline user interface rules
    • <style></style> tags
  • Separate file styling
    • <link rel="stylesheet" href="myStyle.css"/> tag and .css file
  • Specific localized styling overwrites general styling
  • Multiple elements can be styled together by mentioning those elements seperated by comma and space. This will still allow specific styling separately.
    • header, footer {}
  • Specific DOM element can be identified by its ID attribute and can be styled by identifying it with hash symbol followed by its ID value
    • #divMain {}
  • Multiple DOM elements can also be commonly referred by attributing all of them with class. Such elements can be styled by using period symbol followed by the class name.
    • .mainElements{}
  • Positional reference based on HTML nested in a particular document
    • #divMain > Form > Label {}
  • Positional reference for elements at any level
    • #divMain  Label {}
  • Attributes based element references
    • input [type=text]
Style Attributes
  • color
    • Named
      • lightgray
    • Short Hex
      • #ccc
    • Long Hex
      • #FFCCAA
  • border : Line surrounding the element
    • 1px solid black
  • padding : Space between the border and contents inside the element
  • margin : Space between other element and border
    • Four : Top Left Bottom Right
      • 20px 10px 20px 10px
    • Two : Top and Bottom Left and Right
      • 20px 0
      • 0 auto (float div at center)
    • One : All equal spacing
      • 5px
    • individual property
      • margin-left
  • position
    • static : takes space
    • fixed : do not take up space, elements overlap
    • absolute : exact position, needs additional attributes
      • top
      • left
      • right
      • bottom
  • display
    • block : arrange elements in a rectangular block in a new line
    • inline : arrange elements in same line
    • inline-block: arrange elements in a rectangular block in the same line
  • vertical-align
  • float : floats in the current position, doe not take up space, other elements overlaps
Box Model : The document layout










  • Actual size = Margin + Border + Padding + Contents
  • <html> and <body> maargin and padding are not 0 by default
    • set html, body{ padding 0; margin: 0}

Share:
Read More

Tuesday, September 1, 2015

HTML Basics

No comments

HTML : Hyper Text Markup Language

Basics
  • Derived from SGML (Standard Generalized Markup Language)
  • Tags <> based languageDoes not follow strict XML structure
  • Not case sensitive
  • Based on hierarchy of objects in a document DOM (Document Object Model)
Sample HTML Document
Share:
Read More
  • SharePoint Charts with HighCharts
         HighCharts for SharePoint Overview HighCharts is an interactive JavaScript based Charts. It is configured with JSON based...
  • Javascript Basics
    JavaScript Basics Dynamic Variables have types but can change from one type to other Object Oriented Prototypes based ...
  • CSS Basics
    CSS :  Cascading Style Sheet Basics Inline user interface rules <style></style> tags Separate file styling <...
  • HTML Basics
    HTML :  Hyper Text Markup Language Basics Derived from SGML (Standard Generalized Markup Language) Tags <> based languag...
Powered by Blogger.

Comments

Facebook

Ad Home

Business

Random Posts

Recent Posts

Header Ads

Follow Us

Recent Posts

Facebook

Random Posts

Most Popular

  • SharePoint Charts with HighCharts
    SharePoint Charts with HighCharts
         HighCharts for SharePoint Overview HighCharts is an interactive JavaScript based Charts. It is configured with JSON based...
  • Javascript Basics
    Javascript Basics
    JavaScript Basics Dynamic Variables have types but can change from one type to other Object Oriented Prototypes based ...
  • CSS Basics
    CSS Basics
    CSS :  Cascading Style Sheet Basics Inline user interface rules <style></style> tags Separate file styling <...
  • HTML Basics
    HTML Basics
    HTML :  Hyper Text Markup Language Basics Derived from SGML (Standard Generalized Markup Language) Tags <> based languag...

Recent Posts

Unordered List

Pages

Theme Support