How to use chart - 10 common examples

To help you get started, we’ve selected a few chart 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 ukon1990 / wow-auction-helper / client / src / app / components / sellers / seller-chart / seller-chart.component.ts View on Github external
setChart(data: Array): void {
    if (this.chart) {
      this.chart.destroy();
    }
    this.chart = new Chart('chart', {
      type: this.chartTypeForm.value,
      data: {
        datasets: [{
          data: this.itemClasses.map(c => c.quantity),
          backgroundColor: this.colors
        }],
        labels: this.itemClasses.map(c => `${ c.name } x ${c.quantity}`)
      }
      // options: options
    });
  }
github codefacebook / react-chartjsx / src / chart.js View on Github external
initializeChart(nextProps) {
    var Chart = require('chart.js')
    var el = ReactDOM.findDOMNode(this.canvassRef.current)
    var ctx = el.getContext("2d")
    var chart = new Chart(ctx, {type: nextProps.type, data: nextProps.data, options: nextProps.options || {}, plugins: nextProps.plugins || {}})
    this.state.chart = chart;
  }
}
github lindb / lindb / web / src / components / metric / Chart.tsx View on Github external
renderChart() {
    this.setData(this.chartConfig)
    if (this.chartInstance) {
      this.chartInstance.update()
    } else {
      const canvas = this.chartCanvas.current
      const ctx = canvas.getContext('2d')
      this.chartInstance = new ChartJS(ctx, this.chartConfig)
    }
  }
github abritopach / ionic-surveyjs / src / components / chart / chart.ts View on Github external
createDoughnutChart() {
    this.myChart = new Chart(this.chartCanvas.nativeElement, {
      type: 'doughnut',
      data: {
        labels: this.getLabels(),
        datasets: [{
          label: 'Resultados',
          data: this.getValues(),
          backgroundColor: this.backgroundColor,
          hoverBackgroundColor: this.hoverBackgroundColor
        }]
      }
    });
  }
github naver / pinpoint / web / src / main / webapp / v2 / src / app / core / components / agent-admin-chart / agent-admin-chart.component.ts View on Github external
private initChartObj() {
        this.chartObj = new Chart(this.el.nativeElement.getContext('2d'), {
            type: 'horizontalBar',
            data: this.makeDataOption(),
            options: this.makeNormalOption()
        });
    }
    private makeDataOption(): any {
github mconway / firefly-app / src / pages / piggybanks / piggybanks.ts View on Github external
ionViewDidLoad(){
      this.chart = new Chart(this.progressChart.nativeElement, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [this.piggy.percentage, 100 - this.piggy.percentage],
            backgroundColor: [
              "#00FF00"
            ]
          }],
          
        }
      });
    }
  }
github Ninja-Squad / globe42 / frontend / src / app / chart / chart.component.ts View on Github external
private createChart() {
    if (this.chart) {
      this.chart.destroy();
    }
    if (this.canvas) {
      const ctx = this.canvas.nativeElement;
      this.chart = new Chart(ctx, this.configuration);
    }
  }
}
github ukon1990 / wow-auction-helper / client / src / app / components / charts / charts.component.ts View on Github external
setChart(): void {
    if (this.chart) {
      this.chart.destroy();
    }
    this.chart = new Chart(this.storageName, this.getChartConfig());
  }
github nicolaschan / bell / src / stats.js View on Github external
var hits = data.totalHits.map(d => {
    return {
      x: d.date,
      y: d.count
    }
  })
  var devices = data.uniqueHits.map(d => {
    return {
      x: d.date,
      y: d.count
    }
  })
  hits = hits.splice(hits.length - 48 - 1)
  devices = devices.splice(devices.length - 48 - 1)
  new Chart($('#dailyStats'), {
    type: 'line',
    data: {
      datasets: [{
        fill: false,
        label: 'Devices',
        data: devices,
        pointBorderColor: 'rgba(72, 198, 240, 0.4)',
        lineTension: 0.2,
        backgroundColor: 'rgba(72, 198, 240, 1)',
        borderColor: 'rgba(72, 198, 240, 1)',
        pointHitRadius: 10,
        borderWidth: 4
      }, {
        fill: false,
        label: 'Total Hits',
        data: hits,
github nicolaschan / bell / js / stats.js View on Github external
var hits = [];
    var devices = [];

    for (var date in data.dailyStats) {
      hits.push({
        x: new Date(date),
        y: parseInt(data.dailyStats[date].totalHits)
      });
      devices.push({
        x: new Date(date),
        y: parseInt(data.dailyStats[date].devices)
      });
    }
    hits = hits.splice(hits.length - 48 - 1);
    devices = devices.splice(devices.length - 48 - 1);
    var dailyStats = new Chart($('#dailyStats'), {
      type: 'line',
      data: {
        datasets: [{
          fill: false,
          label: 'Devices',
          data: devices,
          pointBorderColor: 'rgba(72, 198, 240, 0.4)',
          lineTension: 0.2,
          backgroundColor: "rgba(72, 198, 240, 1)",
          borderColor: "rgba(72, 198, 240, 1)",
          pointHitRadius: 10,
          borderWidth: 4
        }, {
          fill: false,
          label: 'Total Hits',
          data: hits,

chart

event based time series charting API

Unknown
Latest version published 12 years ago

Package Health Score

39 / 100
Full package analysis

Popular chart functions