K
K
kisey2018-12-13 11:57:55
JavaScript
kisey, 2018-12-13 11:57:55

How to display two or more bars on a chart?

How to group several bars on the chart, how is it done here ? That is, suppose that I have a value state_timein the labels, how can I make it so that the columns are displayed densityfor visconsitythis value in the graph? At the moment, my graph only displays the density value for the label state_timeon the graph, but how can I add it so that it also displays and visconsity? I tried to add this value to the chart, but the label displays undefined all the time, and does not display the information for it at all.

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements AfterViewInit {

  @Input('reports_id') reports_id: string
  @ViewChild('state') stateRef: ElementRef

  constructor(
    private stateService: StateService
  ) { }


  ngAfterViewInit() {
    const stateConfig: any = {
      label: 'Density',
      backgroundColor: '#009688',
      borderColor: '#00796b'
    }

    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      stateConfig.data = data.map(item => item.density)
      stateConfig.labels = data.map(item => item.state_time)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )
  }
function createChartConfig({labels, data, label, borderColor, backgroundColor}) {
  return {
    type: 'bar',
    options: {
      scales: {
        xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        }]
    }},
    data: {
      labels,
      datasets: [
        {
          label, data, 
          backgroundColor: backgroundColor,
          borderColor: borderColor,
          borderWidth: 1
        }
      ]
    }
  }
}
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question