Breaking News: Grepper is joining You.com. Read the official announcement!

how to make a graph in javascript

Mehedi Islam Ripon answered on March 14, 2023 Popularity 9/10 Helpfulness 4/10

answer how to make a graph in javascript

related javascript graph

how to make a graph in javascript

Comment

To create a graph in JavaScript, you can use a library like D3.js, Chart.js, or Google 
Charts. Here's an example using Chart.js:

1. Include the Chart.js library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Create a canvas element in your HTML file where the graph will be displayed:
<canvas id="myChart"></canvas>

3. In your JavaScript code, create a Chart object and configure it with your data 
and options:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

This code creates a bar chart with data for sales in January through June. You can 
customize the chart type, labels, data, colors, and other options to suit your needs. 
Once you've created the Chart object, it will automatically render the graph in the
canvas element on your web page.

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: graph javascript

Link to this answer
Share Copy Link

Contributed on Mar 14 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

Closely Related Answers

javascript graph

Comment

class Graph {
  constructor(directed = true) {
    this.directed = directed;
    this.nodes = [];
    this.edges = new Map();
  }

  addNode(key, value = key) {
    this.nodes.push({ key, value });
  }

  addEdge(a, b, weight) {
    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
    if (!this.directed)
      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
  }

  removeNode(key) {
    this.nodes = this.nodes.filter(n => n.key !== key);
    [...this.edges.values()].forEach(({ a, b }) => {
      if (a === key || b === key) this.edges.delete(JSON.stringify([a, b]));
    });
  }

  removeEdge(a, b) {
    this.edges.delete(JSON.stringify([a, b]));
    if (!this.directed) this.edges.delete(JSON.stringify([b, a]));
  }

  findNode(key) {
    return this.nodes.find(x => x.key === key);
  }

  hasEdge(a, b) {
    return this.edges.has(JSON.stringify([a, b]));
  }

  setEdgeWeight(a, b, weight) {
    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
    if (!this.directed)
      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
  }

  getEdgeWeight(a, b) {
    return this.edges.get(JSON.stringify([a, b])).weight;
  }

  adjacent(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (a === key) acc.push(b);
      return acc;
    }, []);
  }

  indegree(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (b === key) acc++;
      return acc;
    }, 0);
  }

  outdegree(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (a === key) acc++;
      return acc;
    }, 0);
  }
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.30secondsofcode.org

Tags: graph grap

Link to this answer
Share Copy Link

Contributed on Jan 09 2024

Himanshu Jangid

0 Answers Avg Quality 2/10

how to make a graph in javascript

Contents

More Related Answers

how to make a graph in javascript

Closely Related Answers

javascript graph

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.