Cara menggunakan html graph template

Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the following built-in chart types:

• Scatter Plot
• Line Chart
• Bar Chart
• Pie Chart
• Donut Chart
• Bubble Chart
• Area Chart
• Radar Chart
• Mixed Chart

How to Use Chart.js?

Chart.js is easy to use.

First, add a link to the providing CDN [Content Delivery Network]:

Then, add a to where you want to draw the chart:

The canvas element must have a unique id.

That's all!

Typical Scatter Chart Syntax:

var myChart = new Chart["myChart", {
  type: "scatter",
  data: {},
  options: {}
}];

Typical Line Chart Syntax:

var myChart = new Chart["myChart", {
  type: "line",
  data: {},
  options: {}
}];

Typical Bar Chart Syntax:

var myChart = new Chart["myChart", {
  type: "bar",
  data: {},
  options: {}
}];

Scatter Plots

House Prices vs. Size

Source Code

var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart["myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba[0,0,255,1]",
      data: xyValues
    }]
  },
  options:{...}
}];

Try it Yourself »

Line Graphs

House Prices vs. Size

Source Code

var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];

new Chart["myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: "rgba[0,0,0,1.0]",
      borderColor: "rgba[0,0,0,0.1]",
      data: yValues
    }]
  },
  options:{...}
}];

Try it Yourself »

If you set the borderColor to zero, you can scatter plot the line graph:

Multiple Lines

Source Code

var xValues = [100,200,300,400,500,600,700,800,900,1000];

new Chart["myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    },{
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    },{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
}];

Try it Yourself »

Linear Graphs

Source Code

var xValues = [];
var yValues = [];
generateData["x * 2 + 7", 0, 10, 0.5];

new Chart["myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      pointRadius: 1,
      borderColor: "rgba[255,0,0,0.5]",
      data: yValues
    }]
  },
  options: {...}
}];

function generateData[value, i1, i2, step = 1] {
  for [let x = i1; x