starlight
Navigation

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Larry Smith

Yesterday, 8:34pm

When, while the lovely valley teems with vapour around me, and the meridian sun strikes...

Donna Seay

Jan 23, 2:32am

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

View More Messages

Suzzeth Bungaos tagged you and 18 others in a post.

October 03, 2017 8:45am

Mellisa Brown appreciated your work The Social Network

October 02, 2017 12:44am

20+ new items added are for sale in your Sale Group

October 01, 2017 10:20pm

Julius Erving wants to connect with you on your conversation with Ronnie Mara

October 01, 2017 6:08pm

Suzzeth Bungaos tagged you and 12 others in a post.

September 27, 2017 6:45am

10+ new items added are for sale in your Sale Group

September 28, 2017 11:30pm

Mellisa Brown appreciated your work The Great Pyramid

September 26, 2017 11:01am

Julius Erving wants to connect with you on your conversation with Ronnie Mara

September 23, 2017 9:19pm

##### Flot Charts

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

###### Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

###### Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

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

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

###### Line Chart

The stacked charts are used when data sets have to be broken down into their constituents.

Javascript Code

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

###### Area Chart

A line graph is a type of chart which displays information as a series of data points connected by straight line segments.

Javascript Code

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

###### Area Chart

Area charts are used to represent cumulated totals using numbers or percentages (stacked area charts in this case) over time.

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.

###### 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.

###### 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: '#677489'},
    { label: "Series 2", data: [[1,30]], color: '#CAB1D2'},
    { 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
    }
    });