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

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

+ Add Event

Chartist

Highly customizable responsive charts.

An example of a simple line chart with three series.

var line2 = new Chartist.Line('#chartLine2', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
},{
  high: 30,
  axisY: {
    onlyInteger: true
  },
  fullWidth: true,
  chartPadding: {
    bottom: 0,
    left: 0
  }
});

This chart uses the showArea option to draw line, dots but also an area shape. Use the low option to specify a fixed lower bound that will make the area expand. You can also use the areaBase property to specify a data value that will be used to determine the area shape base position (this is 0 by default).

showArea: true

A bi-polar bar chart with a range limit set with low and high. There is also an interpolation function used to skip every odd grid line / label.

new Chartist.Bar('#bar', data, option);

Guess what! Creating horizontal bar charts is as simple as it can get. There's no new chart type you need to learn, just passing an additional option is enough.

horizontalBars: true

You can also set your bar chart to stack the series bars on top of each other easily by using the stackBars property in your configuration.

stackedBars: true

A very simple pie chart with label interpolation to show percentage instead of the actual data series value.

var sum = function(a, b) { return a + b };
var data = {
  series: [5, 3, 4]
};

var pie1 = new Chartist.Pie('#chartPie1', data, {
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
});

This pie chart uses donut, startAngle and total to draw a gauge chart.

new Chartist.Pie('#chartDonut', {
  series: [20, 10, 30]
}, {
  donut: true,
  donutWidth: 60,
  donutSolid: true,
  startAngle: 270,
  showLabel: true
});