How to use the chartkick.LineChart function in chartkick

To help you get started, we’ve selected a few chartkick examples, based on popular ways it is used in public projects.

github oguzhaninan / Stacer / src / components / resources / CpuHistory.js View on Github external
si.currentLoad(val => {
			let cpuCount = val.cpus.length

			for (var i = 0; i < cpuCount; i++)
				this.cpuValues.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
					0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
				])

			let cpuChart = new Chartkick.LineChart('cpus-chart', this.cpuData, {
				colors: ['#2ecc71', '#e74c3c', '#3498db', '#f1c40f', '#9b59b6', '#34495e',
					 '#1abc9c', '#e67e22', '#46f0f0', '#f032e6', '#fabebe', '#008080',
					 '#e6beff', '#aa6e28', '#d2f53c', '#800000', '#aaffc3', '#808000',
					 '#000080', '#808080'],
				legend: true,
				min: 0,
				max: 100,
				points: false
			})

			setInterval(() => {
				si.currentLoad(val => {
					this.cpuValues.forEach((cpu, i) => this.cpuValues[i].splice(0, 1))
					this.cpuValues.forEach((cpu, i) => this.cpuValues[i].push(val.cpus[i].load.toFixed(1)))

					this.cpuData = []
github oguzhaninan / Stacer / src / components / resources / MemoryHistory.js View on Github external
si.mem(ram => {
			let totalMem = helpers.prettyMemSize(ram.total)
			let totalSwap = helpers.prettyMemSize(ram.swaptotal)

			for (var i = 0; i < 2; i++)
				this.memoryValues.push((new Array(seconds_max)).fill(0))

			let memoryChart = new Chartkick.LineChart('memory-chart', this.memoryData, {
				colors: ['#2ecc71', '#e74c3c', '#3498db', '#f1c40f', '#9b59b6', '#34495e', '#1abc9c', '#e67e22'],
				min: 0,
				max: Math.max(totalMem, totalSwap),
				legend: true,
				points: false
			})

			setInterval(() => {
				si.mem(ram => {
					let usedMem = helpers.prettyMemSize(ram.total - ram.available)
					let usedSwap = helpers.prettyMemSize(ram.swapused)

					this.memoryValues.forEach((m, i) => this.memoryValues[i].splice(0, 1))

					this.memoryValues[0].push(usedMem)
					this.memoryValues[1].push(usedSwap)
github oguzhaninan / Stacer / src / components / resources / NetworkHistory.js View on Github external
si.networkInterfaceDefault(defaultNetwork => {

			for (var i = 0; i < 2; i++)
				this.networkValues.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
					0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
				])

			let networkChart = new Chartkick.LineChart('network-chart', this.networkData, {
				colors: ['#2ecc71', '#e74c3c', '#3498db', '#f1c40f', '#9b59b6', '#34495e', '#1abc9c', '#e67e22'],
				legend: true,
				min: 0,
				points: false
			})

			setInterval(() => {
				si.networkStats(defaultNetwork, data => {
					let downSpeed = Math.abs(data.rx_sec / 1024).toFixed(2) || 0.00
					let upSpeed = Math.abs(data.tx_sec / 1024).toFixed(2) || 0.00

					this.networkValues.forEach((n, i) => this.networkValues[i].splice(0, 1))

					this.networkValues[0].push(downSpeed > 0 ? downSpeed : 0)
					this.networkValues[1].push(upSpeed > 0 ? upSpeed : 0)

chartkick

Create beautiful charts with one line of JavaScript

MIT
Latest version published 4 months ago

Package Health Score

67 / 100
Full package analysis

Similar packages