How to use the chart.js function in chart

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 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 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,
github c3bottles / c3bottles / js / entries / numbers.js View on Github external
function draw_drop_points_by_state(_data) {
  const d = [];
  const l = [];
  const c = [];

  for (const state in labels) {
    if (typeof _data[state] !== 'number' || _data[state] === 0) {
      continue;
    }
    d.push(_data[state]);
    c.push(labels[state][2]);
    l.push($(labels[state][1]).text());
  }
  new Chart($('#drop_points_by_state'), {
    type: 'doughnut',
    data: {
      labels: l,
      datasets: [
        {
          data: d,
          backgroundColor: c,
          hoverBackgroundColor: c,
        },
      ],
    },
    options,
  });
}
github nicolaschan / bell / js / stats.js View on Github external
var themesLabels = [];
    var themesColors = [];
    for (var i in data.userStats.theme) {
      themesLabels.push(i);
      themesNumbers.push(data.userStats.theme[i]);
      themesColors.push(themeColorsLabels[i]);
    }
    var themesData = {
      labels: themesLabels,
      datasets: [{
        data: themesNumbers,
        backgroundColor: themesColors,
        hoverBackgroundColor: themesColors
      }]
    };
    var themes = new Chart($('#themes'), {
      type: 'pie',
      data: themesData,
      options: {}
    });


    var osColorsLabels = {
      macos: '#1FCEFF',
      ios: '#96E8FF',
      android: '#FFBE30',
      windows: 'blue',
      linux: '#45FF30',
      Unknown: 'lightgray'
    };
    var osNumbers = [];
    var osLabels = [];
github nicolaschan / bell / js / stats.js View on Github external
var browserLabels = [];
    var browserColors = [];
    for (var i in data.userStats.browser) {
      browserLabels.push(i);
      browserNumbers.push(data.userStats.browser[i]);
      browserColors.push(browserColorsLabels[i]);
    }
    var browserData = {
      labels: browserLabels,
      datasets: [{
        data: browserNumbers,
        backgroundColor: browserColors,
        hoverBackgroundColor: browserColors
      }]
    };
    var browser = new Chart($('#browser'), {
      type: 'pie',
      data: browserData,
      options: {}
    });

  });
});

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