پس از فشردن دکمه Add کمی صبور باشید تا صفحه بارگذاری شود و تصویر زیر برای شما نمایش داده شود (داده‌های نمایش داده شده آزمایشی و تصادفی هستند و با بازآوری صفحه تغییر میکنند): 

همانطور که مشاهده میکنید دو دکمه در بالای این نمودار نمایش داده شده است (در قسمت تنظیمات web part هم می‌توانید ارجاع‌های لازم به این لینک‌ها را بیابید ) : 

Data & Appearance برای مدیریت منبع داده‌های نمودار و نحوه نمایش داده‌ها که دو لینک اصلی در آن وجود دارد : 

Advanced Propertes برای مدیریت قسمت‌های دیگر از قبیل جزییات رنگ بندی و زمینه و ...

یک نمونه از فرم تنظیمات :

 

همانطور که در شکل زیر مشاهده میکنید می‌توانید مشخص کنید که داده‌های محور‌های نمودار از کدام ستون‌ها داده را بگیرند و در صورت نیاز به عملیات گروه بندی می‌توانید آن را اعمال کنید : 

در دیگر قسمت‌های این فرم می‌توانید تنظیمات دیگری را انجام دهید برای مثال در قسمت Other Fields می‌توانید برای آیتم‌های روی نمودار یک لینک یا Tooltip تعریف کنید . 

پس از زدن دکمه Finish خروجی زیر را خواهید دید : 

حال می‌توانید از قسمت Customize Your Chart به ویرایش نحوه نمایش داده‌ها بپردازید 

همانطور که مشاهده میکنید در این قسمت می‌توانید نوع نمودار را بسته به نیاز خود انتخاب نمایید ، ویژکی‌های نمایشی آن را تغییر داده و برای نمودار خود ویژکی‌های 3 بعدی تنظیم کنید .

(برای نمایش بهتر خاصیت group by را از نمودار حذف کردم ) . نوع نمایش را مانند زیر تغییر می‌دهم : 

در این قسمت Theme نمایشی نمودار و نوع نمایش ستون‌ها و درصد transparency بودن ستون را بعلاوه طول و عرض اندازه نمودار و نوع خروجی نمایش داده شده در صفحه می‌توانید تنظیم کنید . روی Next کلیک می‌کنم تا وارد دیگر تنظیمات شود از جمله عنوان نمودار و راهنمای آن : 

در قسمت بالا تنظیمات عنوان برای نمودار قابل اجرا می‌باشد و در قسمت زیرین ، توضیحات و اختصارات راهنمای نمودار قابل تنظیم است . در این قسمت حتی می‌توانید راهنما را داخل خود نمودار انداخته (Dock to chart Area ) و موقعیت آن را مشخص کنید . کار تقریبا تمام شد . روی Finish کلیک کنید .

حال با رجوع به قسمت Advanced Propertes می‌توانید روی ظاهر این نمودار بیشتر کار کنید . این یک نمونه ساده از خروجی کار با این قسمت است : 

• Invoker: از Command می‌خواهد که درخواست را اجرا کند. 
• Command: اطلاعاتی را در رابطه با action، به همراه دارد و هم چنین bind کردن آن به receiver؛ همراه با فراخوانی کردن عملیات مربوطه بر روی command. 
  
• Reciever: می‌داند که چگونه عملیات مرتبط با command مورد نظر را انجام دهد.
•  Client: یک command  را ایجاد می‌کند و receiver را مشخص می‌کند؛ چه کسی قرار است این command را دریافت کند. 

class Command {
  execute() {};
}

//TurnOnPrinter command
class TurnOnPrinter extends Command {
    
    constructor(printingMachine) {
        super();
        this.printingMachine = printingMachine;
        this.commandName = "turn on" 
    }
    
    execute() {
        this.printingMachine.turnOn();
    }
}

//TurnOffPrinter command
class TurnOffPrinter extends Command {

  constructor(printingMachine) {
    super();
    this.printingMachine = printingMachine;
    this.commandName = "turn off" 
  }
  
  execute() {
    this.printingMachine.turnOff();
  }
  
}

//Print command
class Print extends Command {

  constructor(printingMachine) {
    super();
    this.printingMachine = printingMachine;
    this.commandName = "print" 
  }
  
  execute() {
    this.printingMachine.print();
  }
  
}

//Invoker
class PrinterControlPanel {
    pressButton(command) {
        console.log(`Pressing ${command.commandName} button`);
        command.execute();
    }
}

//Reciever: 
class PrintingMachine {

  turnOn() {
    console.log('Printing machine has been turned on');
  }
  
  turnOff() {
    console.log('Printing machine has been turned off');
  }

  print(){
      console.log('The printer is printing your document')
  }
}


const printingMachine = new PrintingMachine();
const turnOnCommand = new TurnOnPrinter(printingMachine);
const turnOffCommand = new TurnOffPrinter(printingMachine);
const printCommand = new Print(printingMachine)
const controlPanel = new PrinterControlPanel();
controlPanel.pressButton(turnOnCommand);
controlPanel.pressButton(turnOffCommand);
controlPanel.pressButton(printCommand);

class PrintingMachine {

  turnOn() {
    console.log('Printing machine has been turned on');
  }
  
  turnOff() {
    console.log('Printing machine has been turned off');
  }

  print(){
      console.log('The printer is printing your document')
  }
}

• turnOn: روشن کردن ماشین (printer) 
  
• turnOff: خاموش کردن ماشین (printer) 
  
• print: چاپ کردن صفحه با استفاده از ماشین (printer) 
  

class TurnOffPrinter extends Command {
   //code...
   execute() {
     this.printingMachine.turnOff();
   }
}

class Print extends Command {
   //code...
   execute() {
     this.printingMachine.print();
   }
}

controlPanel.pressButton(turnOnCommand);

Printing machine has been turned on

1. اگر می‌خواهید یک صف درست کنید و درخواست‌ها را در زمان‌های متفاوتی اجرا کنید. 
   
2. اگر می‌خواهید عملیاتی از قبیل reset و undo را انجام بدهید. 
   
3. اگر می‌خواهید تاریخچه‌ای از درخواست‌های ایجاد شده را داشته باشید.