1. Advisor
  2. chartkick
  3. chartkick code examples
View all chartkick analysis

How to use chartkick - 10 common examples

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ankane / react-chartkick / src / index.js View on Github external
const createComponent = (chartType) => {
  const ChartkickComponent = ({innerRef, ...props}) => {
    // props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / react-chartkick / src / index.js View on Github external
const createComponent = (chartType) => {
  const ChartkickComponent = ({innerRef, ...props}) => {
    // props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / react-chartkick / src / index.js View on Github external
}

const createComponent = (chartType) => {
  const ChartkickComponent = ({innerRef, ...props}) => {
    // props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / react-chartkick / src / index.js View on Github external
// props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / react-chartkick / src / index.js View on Github external
}
}

const createComponent = (chartType) => {
  const ChartkickComponent = ({innerRef, ...props}) => {
    // props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / react-chartkick / src / index.js View on Github external
const ChartkickComponent = ({innerRef, ...props}) => {
    // props cloned when split from innerRef, so we can modify directly
    props.chartType = chartType
    props.ref = innerRef
    return React.createElement(ChartComponent, props)
  }
  ChartkickComponent.displayName = chartType.name
  return ChartkickComponent
}

export const LineChart = createComponent(Chartkick.LineChart)
export const PieChart = createComponent(Chartkick.PieChart)
export const ColumnChart = createComponent(Chartkick.ColumnChart)
export const BarChart = createComponent(Chartkick.BarChart)
export const AreaChart = createComponent(Chartkick.AreaChart)
export const ScatterChart = createComponent(Chartkick.ScatterChart)
export const GeoChart = createComponent(Chartkick.GeoChart)
export const Timeline = createComponent(Chartkick.Timeline)

export default Chartkick
github ankane / vue-chartkick / src / index.js View on Github external
this.chart = null
          this.$el.innerText = "Loading..."
        }
      },
      currentState: function() {
        return deepMerge({}, {
          data: this.data,
          chartOptions: this.chartOptions
        })
      }
    }
  })
}

Chartkick.version = "0.6.0" // TODO remove in future versions
Chartkick.install = function(Vue, options) {
  if (options && options.adapter) {
    Chartkick.addAdapter(options.adapter)
  }
  createComponent(Vue, "line-chart", Chartkick.LineChart)
  createComponent(Vue, "pie-chart", Chartkick.PieChart)
  createComponent(Vue, "column-chart", Chartkick.ColumnChart)
  createComponent(Vue, "bar-chart", Chartkick.BarChart)
  createComponent(Vue, "area-chart", Chartkick.AreaChart)
  createComponent(Vue, "scatter-chart", Chartkick.ScatterChart)
  createComponent(Vue, "geo-chart", Chartkick.GeoChart)
  createComponent(Vue, "timeline", Chartkick.Timeline)
}

const VueChartkick = Chartkick

// in browser
github ankane / vue-chartkick / src / index.js View on Github external
this.chart.destroy()
          this.chart = null
          this.$el.innerText = "Loading..."
        }
      },
      currentState: function() {
        return deepMerge({}, {
          data: this.data,
          chartOptions: this.chartOptions
        })
      }
    }
  })
}

Chartkick.version = "0.6.0" // TODO remove in future versions
Chartkick.install = function(Vue, options) {
  if (options && options.adapter) {
    Chartkick.addAdapter(options.adapter)
  }
  createComponent(Vue, "line-chart", Chartkick.LineChart)
  createComponent(Vue, "pie-chart", Chartkick.PieChart)
  createComponent(Vue, "column-chart", Chartkick.ColumnChart)
  createComponent(Vue, "bar-chart", Chartkick.BarChart)
  createComponent(Vue, "area-chart", Chartkick.AreaChart)
  createComponent(Vue, "scatter-chart", Chartkick.ScatterChart)
  createComponent(Vue, "geo-chart", Chartkick.GeoChart)
  createComponent(Vue, "timeline", Chartkick.Timeline)
}

const VueChartkick = Chartkick
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)

chartkick

Create beautiful charts with one line of JavaScript

GitHub
MIT
Latest version published 2 years ago

Package Health Score

53 / 100
Full package analysis

Popular chartkick functions

Similar packages