LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  
CSS
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
JS
var chartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      type: "line",
      label: "Dataset 1",
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    },
    {
      type: "bar",
      label: "Dataset 2",
      backgroundColor: window.chartColors.red,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ],
      borderColor: "white",
      borderWidth: 2
    },
    {
      type: "bar",
      label: "Dataset 3",
      backgroundColor: window.chartColors.green,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }
  ]
};
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myMixedChart = new Chart(ctx, {
    type: "bar",
    data: chartData,
    options: {
      responsive: true,
      title: {
        display: true,
        text: "Chart.js Combo Bar Line Chart"
      },
      tooltips: {
        mode: "index",
        intersect: true
      },
      annotation: {
        events: ["click"],
        annotations: [
          {
            drawTime: "afterDatasetsDraw",
            id: "hline",
            type: "line",
            mode: "horizontal",
            scaleID: "y-axis-0",
            value: randomScalingFactor(),
            borderColor: "black",
            borderWidth: 5,
            label: {
              backgroundColor: "red",
              content: "Test Label",
              enabled: true
            },
            onClick: function(e) {
              // The annotation is is bound to the `this` variable
              console.log("Annotation", e.type, this);
            }
          },
          {
            drawTime: "beforeDatasetsDraw",
            type: "box",
            xScaleID: "x-axis-0",
            yScaleID: "y-axis-0",
            xMin: "February",
            xMax: "April",
            yMin: randomScalingFactor(),
            yMax: randomScalingFactor(),
            backgroundColor: "rgba(101, 33, 171, 0.5)",
            borderColor: "rgb(101, 33, 171)",
            borderWidth: 1,
            onClick: function(e) {
              console.log("Box", e.type, this);
            }
          }
        ]
      }
    }
  });
};

document.getElementById("randomizeData").addEventListener("click", function() {
  chartData.datasets.forEach(function(dataset) {
    dataset.data = dataset.data.map(function() {
      return randomScalingFactor();
    });
  });
  window.myMixedChart.update();
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:50

Related Codes

Pen ID
Pen ID
Pen ID