graphics in html php

Question

graphics in html php

Navigation

#1 by (0 votes)

0

I have this graph that shows a bar only. How can I put another two bars on the side of this and that it changes its colors depending on whether the data is less than 50 is red and greater than 50 is blue?

var ctx = document.getElementById('chart');

var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Risk Level'],
datasets: [
  {
    label: 'Low',
    data: [67.8],
    backgroundColor: '#D6E9C6',
  },
  {
    label: 'Moderate',
    data: [20.7],
    backgroundColor: '#FAEBCC',
  },
  {
    label: 'High',
    data: [11.4],
    backgroundColor: '#EBCCD1',
  }
  ]
  },
  options: {
  scales: {
  xAxes: [{ stacked: true }],
  yAxes: [{ stacked: true }]
  }
  }
  });

canvas { background-color : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chart" width="600" height="400"></canvas>
</body>

graficas chart.js

asked by JV93 20.11.2018 в 16:28

source

1 answer

How to configure Excel / Wndows / Browser to export military date Error uploading a file in PHP

score 0 · Answer 1

You need to add another label in the labels array:

labels: ['Risk Level', 'Risk Level 2'],

And in the part of dataset you need to add the value in data to be reflected in the graph.

var ctx = document.getElementById('chart');

var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Risk Level', 'Risk Level 2'],
datasets: [
  {
    label: 'Low',
    data: [67.8, 50],
    backgroundColor: '#D6E9C6',
  },
  {
    label: 'Moderate',
    data: [20.7, 10],
    backgroundColor: '#FAEBCC',
  },
  {
    label: 'High',
    data: [11.4, 5],
    backgroundColor: '#EBCCD1',
  }
  ],
  },
  options: {
  scales: {
  xAxes: [{ stacked: true }],
  yAxes: [{ stacked: true }]
  }
  }
  });

canvas { background-color : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chart" width="600" height="400"></canvas>
</body>