Realtime Dashboard

index.html

<div id="wrapper">

  <div class="content-area">
    <div class="container-fluid">
      <div class="main">

        <div class="row mt-4">
          <div class="col-md-5">
            <div class="box columnbox mt-4">
              <div id="columnchart"> </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="box  mt-4">
              <div id="linechart"> </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-5">
            <div class="box radialbox mt-4">
              <div id="circlechart"> </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="box mt-4">
              <div class="mt-4">
                <div id="progress1"></div>
              </div>
              <div class="mt-4">
                <div id="progress2"></div>
              </div>
              <div class="mt-4">
                <div id="progress3"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

realtime-dashboard.markdown

Realtime Dashboard

A Pen by ApexCharts on CodePen.

License.

script.js

window.Apex = {
  chart: {
    foreColor: "#fff",
    toolbar: {
      show: false
    }
  },
  colors: ["#FCCF31", "#17ead9", "#f02fc2"],
  stroke: {
    width: 3
  },
  dataLabels: {
    enabled: false
  },
  grid: {
    borderColor: "#40475D"
  },
  xaxis: {
    axisTicks: {
      color: "#333"
    },
    axisBorder: {
      color: "#333"
    }
  },
  fill: {
    type: "gradient",
    gradient: {
      gradientToColors: ["#F55555", "#6078ea", "#6094ea"]
    }
  },
  tooltip: {
    theme: "dark",
    x: {
      formatter: function(val) {
        return moment(new Date(val)).format("HH:mm:ss");
      }
    }
  },
  yaxis: {
    opposite: true,
    labels: {
      offsetX: -10
    }
  }
};

var trigoStrength = 3;
var iteration = 11;

function getRandom() {
  var i = iteration;
  return (
    (Math.sin(i / trigoStrength) * (i / trigoStrength) +
      i / trigoStrength +
      1) *
    (trigoStrength * 2)
  );
}

function getRangeRandom(yrange) {
  return Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
}

function generateMinuteWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  var series = [];
  while (i < count) {
    var x = baseval;
    var y =
      (Math.sin(i / trigoStrength) * (i / trigoStrength) +
        i / trigoStrength +
        1) *
      (trigoStrength * 2);

    series.push([x, y]);
    baseval += 300000;
    i++;
  }
  return series;
}

function getNewData(baseval, yrange) {
  var newTime = baseval + 300000;
  return {
    x: newTime,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  };
}

var optionsColumn = {
  chart: {
    height: 350,
    type: "bar",
    animations: {
      enabled: true,
      easing: "linear",
      dynamicAnimation: {
        speed: 1000
      }
    },
    // dropShadow: {
    //   enabled: true,
    //   left: -14,
    //   top: -10,
    //   opacity: 0.05
    // },
    events: {
      animationEnd: function(chartCtx) {
        const newData = chartCtx.w.config.series[0].data.slice();
        newData.shift();
        window.setTimeout(function() {
          chartCtx.updateOptions(
            {
              series: [
                {
                  name: "Load Average",
                  data: newData
                }
              ],
              xaxis: {
                min: chartCtx.minX,
                max: chartCtx.maxX
              },
              subtitle: {
                text:
                  parseInt(getRangeRandom({ min: 1, max: 20 })).toString() + "%"
              }
            },
            false,
            false
          );
        }, 300);
      }
    },
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: 0
  },
  series: [
    {
      name: "Load Average",
      data: generateMinuteWiseTimeSeries(
        new Date("12/12/2016 00:20:00").getTime(),
        12,
        {
          min: 10,
          max: 110
        }
      )
    }
  ],
  title: {
    text: "Load Average",
    align: "left",
    style: {
      fontSize: "12px"
    }
  },
  subtitle: {
    text: "20%",
    floating: true,
    align: "right",
    offsetY: 0,
    style: {
      fontSize: "22px"
    }
  },
  fill: {
    type: "gradient",
    gradient: {
      shade: "dark",
      type: "vertical",
      shadeIntensity: 0.5,
      inverseColors: false,
      opacityFrom: 1,
      opacityTo: 0.8,
      stops: [0, 100]
    }
  },
  xaxis: {
    type: "datetime",
    range: 2700000
  },
  legend: {
    show: true
  }
};

var chartColumn = new ApexCharts(
  document.querySelector("#columnchart"),
  optionsColumn
);
chartColumn.render();

var optionsLine = {
  chart: {
    height: 350,
    type: "line",
    stacked: true,
    animations: {
      enabled: true,
      easing: "linear",
      dynamicAnimation: {
        speed: 1000
      }
    },
    dropShadow: {
      enabled: true,
      opacity: 0.3,
      blur: 5,
      left: -7,
      top: 22
    },
    events: {
      animationEnd: function(chartCtx) {
        const newData1 = chartCtx.w.config.series[0].data.slice();
        newData1.shift();
        const newData2 = chartCtx.w.config.series[1].data.slice();
        newData2.shift();
        window.setTimeout(function() {
          chartCtx.updateOptions(
            {
              series: [
                {
                  name: "Running",
                  data: newData1
                },
                {
                  name: "Waiting",
                  data: newData2
                }
              ],
              subtitle: {
                text: parseInt(getRandom() * Math.random()).toString()
              }
            },
            false,
            false
          );
        }, 300);
      }
    },
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: "straight",
    width: 5
  },
  grid: {
    padding: {
      left: 0,
      right: 0
    }
  },
  markers: {
    size: 0,
    hover: {
      size: 0
    }
  },
  series: [
    {
      name: "Running",
      data: generateMinuteWiseTimeSeries(
        new Date("12/12/2016 00:20:00").getTime(),
        12,
        {
          min: 30,
          max: 110
        }
      )
    },
    {
      name: "Waiting",
      data: generateMinuteWiseTimeSeries(
        new Date("12/12/2016 00:20:00").getTime(),
        12,
        {
          min: 30,
          max: 110
        }
      )
    }
  ],
  xaxis: {
    type: "datetime",
    range: 2700000
  },
  title: {
    text: "Processes",
    align: "left",
    style: {
      fontSize: "12px"
    }
  },
  subtitle: {
    text: "20",
    floating: true,
    align: "right",
    offsetY: 0,
    style: {
      fontSize: "22px"
    }
  },
  legend: {
    show: true,
    floating: true,
    horizontalAlign: "left",
    onItemClick: {
      toggleDataSeries: false
    },
    position: "top",
    offsetY: -33,
    offsetX: 60
  }
};

var chartLine = new ApexCharts(
  document.querySelector("#linechart"),
  optionsLine
);
chartLine.render();

var optionsCircle = {
  chart: {
    type: "radialBar",
    height: 320,
    offsetY: -30,
    offsetX: 20
  },
  plotOptions: {
    radialBar: {
      size: undefined,
      inverseOrder: false,
      hollow: {
        margin: 5,
        size: "48%",
        background: "transparent"
      },
      track: {
        show: true,
        background: "#40475D",
        strokeWidth: "10%",
        opacity: 1,
        margin: 3 // margin is in pixels
      }
    }
  },
  series: [71, 63],
  labels: ["Device 1", "Device 2"],
  legend: {
    show: true,
    position: "left",
    offsetX: -40,
    offsetY: -10,
    containerMargin: {
      right: -40,
      left: 0
    },
    itemMargin: {
      horizontal: 20,
      vertical: 20
    },
    formatter: function(val, opts) {
      return [val, " - ", opts.globals.series[opts.seriesIndex] + "%"];
    }
  },
  fill: {
    type: "gradient",
    gradient: {
      shade: "dark",
      type: "horizontal",
      shadeIntensity: 0.5,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [0, 100]
    }
  }
};

var chartCircle = new ApexCharts(
  document.querySelector("#circlechart"),
  optionsCircle
);
chartCircle.render();

var optionsProgress1 = {
  chart: {
    height: 70,
    type: "bar",
    stacked: true,
    sparkline: {
      enabled: true
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: "20%",
      colors: {
        backgroundBarColors: ["#40475D"]
      }
    }
  },
  stroke: {
    width: 0
  },
  series: [
    {
      name: "Process 1",
      data: [44]
    }
  ],
  title: {
    floating: true,
    offsetX: -10,
    offsetY: 5,
    text: "Process 1"
  },
  subtitle: {
    floating: true,
    align: "right",
    offsetY: 0,
    text: "44%",
    style: {
      fontSize: "20px"
    }
  },
  tooltip: {
    enabled: false
  },
  xaxis: {
    categories: ["Process 1"]
  },
  yaxis: {
    max: 100
  },
  fill: {
    opacity: 1
  }
};

var chartProgress1 = new ApexCharts(
  document.querySelector("#progress1"),
  optionsProgress1
);
chartProgress1.render();

var optionsProgress2 = {
  chart: {
    height: 70,
    type: "bar",
    stacked: true,
    sparkline: {
      enabled: true
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: "20%",
      colors: {
        backgroundBarColors: ["#40475D"]
      }
    }
  },
  colors: ["#17ead9"],
  stroke: {
    width: 0
  },
  series: [
    {
      name: "Process 2",
      data: [80]
    }
  ],
  title: {
    floating: true,
    offsetX: -10,
    offsetY: 5,
    text: "Process 2"
  },
  subtitle: {
    floating: true,
    align: "right",
    offsetY: 0,
    text: "80%",
    style: {
      fontSize: "20px"
    }
  },
  tooltip: {
    enabled: false
  },
  xaxis: {
    categories: ["Process 2"]
  },
  yaxis: {
    max: 100
  },
  fill: {
    gradient: {
      inverseColors: false,
      gradientToColors: ["#6078ea"]
    }
  }
};

var chartProgress2 = new ApexCharts(
  document.querySelector("#progress2"),
  optionsProgress2
);
chartProgress2.render();

var optionsProgress3 = {
  chart: {
    height: 70,
    type: "bar",
    stacked: true,
    sparkline: {
      enabled: true
    }
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: "20%",
      colors: {
        backgroundBarColors: ["#40475D"]
      }
    }
  },
  colors: ["#f02fc2"],
  stroke: {
    width: 0
  },
  series: [
    {
      name: "Process 3",
      data: [74]
    }
  ],
  fill: {
    gradient: {
      gradientToColors: ["#6094ea"]
    }
  },
  title: {
    floating: true,
    offsetX: -10,
    offsetY: 5,
    text: "Process 3"
  },
  subtitle: {
    floating: true,
    align: "right",
    offsetY: 0,
    text: "74%",
    style: {
      fontSize: "20px"
    }
  },
  tooltip: {
    enabled: false
  },
  xaxis: {
    categories: ["Process 3"]
  },
  yaxis: {
    max: 100
  }
};

var chartProgress3 = new ApexCharts(
  document.querySelector("#progress3"),
  optionsProgress3
);
chartProgress3.render();

window.setInterval(function() {
  iteration++;

  chartColumn.updateSeries([
    {
      name: "Load Average",
      data: [
        ...chartColumn.w.config.series[0].data,
        [chartColumn.w.globals.maxX + 210000, getRandom()]
      ]
    }
  ]);

  chartLine.updateSeries([
    {
      name: "Running",
      data: [
        ...chartLine.w.config.series[0].data,
        [chartLine.w.globals.maxX + 300000, getRandom()]
      ]
    },
    {
      name: "Waiting",
      data: [
        ...chartLine.w.config.series[1].data,
        [chartLine.w.globals.maxX + 300000, getRandom()]
      ]
    }
  ]);

  chartCircle.updateSeries([
    getRangeRandom({ min: 10, max: 100 }),
    getRangeRandom({ min: 10, max: 100 })
  ]);

  var p1Data = getRangeRandom({ min: 10, max: 100 });
  chartProgress1.updateOptions({
    series: [
      {
        name: "Process 1",
        data: [p1Data]
      }
    ],
    subtitle: {
      text: p1Data + "%"
    }
  });

  var p2Data = getRangeRandom({ min: 10, max: 100 });
  chartProgress2.updateOptions({
    series: [
      {
        name: "Process 2",
        data: [p2Data]
      }
    ],
    subtitle: {
      text: p2Data + "%"
    }
  });

  var p3Data = getRangeRandom({ min: 10, max: 100 });
  chartProgress3.updateOptions({
    series: [
      {
        name: "Process 2",
        data: [p3Data]
      }
    ],
    subtitle: {
      text: p3Data + "%"
    }
  });
}, 3000);

scripts

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

style.css

body {
  background: #1b213b;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #f3f4fa !important;
}

.box .apexcharts-xaxistooltip {
  background: #1b213b;
  color: #fff;
}

.content-area {
  max-width: 1280px;
  margin: 0 auto;
}

.box {
  background-color: #262d47;
  padding: 25px 25px;
  border-radius: 4px;
}

.columnbox {
  padding-right: 15px;
}
.radialbox {
  max-height: 333px;
  margin-bottom: 60px;
}

.apexcharts-legend-series tspan:nth-child(3) {
  font-weight: bold;
  font-size: 20px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />