[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

###### Bar Chart

Below is the basic bar chart example.

Javascript Code

    $.plot("#flotBar1", [{
      data: [[0, 3], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4], [14,6]]
    }], {
      series: {
        bars: {
          show: true,
          lineWidth: 0,
          fillColor: '#4E6577'
        }
      },
      grid: {
        borderWidth: 1,
        borderColor: '#D9D9D9'
      },
      yaxis: {
        tickColor: '#d9d9d9',
        font: {
          color: '#666',
          size: 10
        }
      },
      xaxis: {
        tickColor: '#d9d9d9',
        font: {
          color: '#666',
          size: 10
        }
      }
    });

###### Line Chart

Below is the basic line chart example.

Javascript Code

    series: {
      bars: { show: false },
      lines: {
        show: true,
        lineWidth: 1
      },
      shadowSize: 0
    }

###### Area Chart

Below is the basic area chart example.

Javascript Code

    series: {
      lines: {
        show: true,
        lineWidth: 0,
        fill: 0.8 //making the area chart
      },
      shadowSize: 0
    }

Javascript Code

    series: {
      lines: { show: false },
      splines: { // this making the smooth line
        show: true,
        lineWidth: 0,
        fill: 0.8 //making the area chart
      },
      shadowSize: 0
    }

###### Real Time Updates

You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.

Javascript Code

    var plot = $.plot('#flotRealtime', data, option);
    var updateInterval = 1000;

    function update_plot() {
      plot.setData([getRandomData()]);
      plot.draw();
      setTimeout(update_plot, updateInterval);
    }
    update_plot();

###### Pie Chart

Labels can be hidden if the slice is less than a given percentage of the pie.

Javascript Code

    var piedata = [
      { label: "Series 1", data: [[1,10]], color: '#9A3267'},
      { label: "Series 2", data: [[1,30]], color: '#ED4151'},
      { label: "Series 3", data: [[1,90]], color: '#F89D44'},
      { label: "Series 4", data: [[1,70]], color: '#85C441'},
      { label: "Series 5", data: [[1,80]], color: '#36B3E3'}
    ];

    $.plot('#flotPie1', piedata, {
      series: {
        pie: {
          show: true,
          radius: 1,
          label: {
            show: true,
            radius: 2/3,
            formatter: labelFormatter,
            threshold: 0.1
          }
        }
      },
      grid: {
        hoverable: true,
        clickable: true
      }
    });