Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://nagix.github.io/chartjs-plugin-streaming/master/samples/integration/annotation.html below:

Website Navigation

• GitHub (opens new window)

Annotation | chartjs-plugin-streaming

Integration with chartjs-plugin-annotation (opens new window)

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 1000,
          delay: 2000,
          onRefresh: onRefresh
        }
      },
      y: {
        title: {
          display: true,
          text: 'Value'
        }
      }
    },
    interaction: {
      intersect: false
    },
    plugins: {
      annotation: {
        annotations: {
          line: {
            drawTime: 'afterDatasetsDraw',
            type: 'line',
            scaleID: 'y',
            value: Utils.rand(-100, 100),
            borderColor: 'black',
            borderWidth: 5,
            label: {
              backgroundColor: 'red',
              content: 'Test Label',
              enabled: true
            }
          },
          box: {
            drawTime: 'beforeDatasetsDraw',
            type: 'box',
            xMin: 0,
            xMax: 0,
            backgroundColor: Utils.transparentize(Utils.CHART_COLORS.purple, 0.5),
            borderColor: Utils.CHART_COLORS.purple,
            borderWidth: 1
          }
        }
      }
    }
  }
};

const data = {
  datasets: [
    {
      label: 'Dataset 1 (Linear Interpolation)',
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      borderColor: Utils.CHART_COLORS.red,
      borderDash: [8, 4],
      data: []
    },
    {
      label: 'Dataset 2 (Cubic Interpolation)',
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderColor: Utils.CHART_COLORS.blue,
      cubicInterpolationMode: 'monotone',
      data: []
    }
  ]
};
const onRefresh = chart => {
  const box = chart.options.plugins.annotation.annotations.box;
  const now = Date.now();
  chart.data.datasets.forEach(dataset => {
    dataset.data.push({
      x: now,
      y: Utils.rand(-100, 100)
    });
  });
  if (!(box.xMax >= now - 22000)) {
    box.xMin = now - 2000;
    box.xMax = now + 8000;
    box.yMin = Utils.rand(-100, 100);
    box.yMax = Utils.rand(-100, 100);
    chart.update('none');
  }
};

const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data.forEach(dataObj => {
          dataObj.y = Utils.rand(-100, 100);
        });
      });
      chart.update();
    }
  },
  {
    name: 'Add Dataset',
    handler(chart) {
      const datasets = chart.data.datasets;
      const dsColor = Utils.namedColor(datasets.length);
      const newDataset = {
        label: 'Dataset ' + (datasets.length + 1),
        backgroundColor: Utils.transparentize(dsColor, 0.5),
        borderColor: dsColor,
        data: []
      };
      datasets.push(newDataset);
      chart.update();
    }
  },
  {
    name: 'Add Data',
    handler(chart) {
      onRefresh(chart);
      chart.update();
    }
  },
  {
    name: 'Remove Dataset',
    handler(chart) {
      chart.data.datasets.pop();
      chart.update();
    }
  },
  {
    name: 'Remove Data',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data.shift();
      });
      chart.update();
    }
  }
];

For plain JavaScript, use script tags in the following order.

For bundlers, import and register modules to the chart.

← Data Labels Zoom →

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4