How to use the britecharts/dist/umd/groupedBar.min function in britecharts

To help you get started, weโ€™ve selected a few britecharts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github colapdev / ngx-britecharts / src / components / chart / Chart.component.ts View on Github external
this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Bullet:
        this.chart = bullet();
        this.chartSelector = '.bullet-chart';
        this.chartClickSelector = '.bullet-chart .range, .bullet-chart .measure, .bullet-chart .marker-line';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Donut:
        this.chart = donut();
        this.chartSelector = '.donut-chart';
        this.chartClickSelector = '.donut-chart .arc';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.GroupedBar:
        this.chart = groupedBar();
        this.chartSelector = '.grouped-bar';
        this.chartClickSelector = '.grouped-bar .bar';
        this.tooltipContainerSelector = '.grouped-bar .metadata-group';
        break;
      case ChartType.Heatmap:
        this.chart = heatmap();
        this.chartSelector = '.heatmap';
        this.chartClickSelector = '.heatmap .box';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
      case ChartType.Legend:
        this.chart = legend();
        this.chartSelector = '.britechart-legend';
        this.chartClickSelector = '.legend-entry';
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;
github colapdev / ngx-britecharts / dist / components / chart / Chart.component.js View on Github external
this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
            case ChartType.Bullet:
                this.chart = bullet();
                this.chartSelector = '.bullet-chart';
                this.chartClickSelector = '.bullet-chart .range, .bullet-chart .measure, .bullet-chart .marker-line';
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
            case ChartType.Donut:
                this.chart = donut();
                this.chartSelector = '.donut-chart';
                this.chartClickSelector = '.donut-chart .arc';
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
            case ChartType.GroupedBar:
                this.chart = groupedBar();
                this.chartSelector = '.grouped-bar';
                this.chartClickSelector = '.grouped-bar .bar';
                this.tooltipContainerSelector = '.grouped-bar .metadata-group';
                break;
            case ChartType.Heatmap:
                this.chart = heatmap();
                this.chartSelector = '.heatmap';
                this.chartClickSelector = '.heatmap .box';
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
            case ChartType.Legend:
                this.chart = legend();
                this.chartSelector = '.britechart-legend';
                this.chartClickSelector = '.legend-entry';
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;
github colapdev / ngx-britecharts / src / components / grouped-bar-chart / GroupedBarChart.component.ts View on Github external
private drawChart() {
    this.groupedBar = groupedBar();
    this.chartTooltip = tooltip();

    let groupedBarContainer = d3Selection.select(this.el).select('.grouped-bar-chart-container'),
      containerWidth = groupedBarContainer.node() ? groupedBarContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.groupedBar.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.groupedBar.hasOwnProperty(option) && option !== 'colorSchema') {
          this.groupedBar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
github colapdev / ngx-britecharts / dist / components / grouped-bar-chart / GroupedBarChart.component.js View on Github external
GroupedBarChartComponent.prototype.drawChart = function () {
        var _this = this;
        this.groupedBar = groupedBar();
        this.chartTooltip = tooltip();
        var groupedBarContainer = d3Selection.select(this.el).select('.grouped-bar-chart-container'), containerWidth = groupedBarContainer.node() ? groupedBarContainer.node().getBoundingClientRect().width : false;
        if (containerWidth) {
            this.groupedBar.width(containerWidth);
            for (var option in this.chartConfig['properties']) {
                if (this.groupedBar.hasOwnProperty(option) && option !== 'colorSchema') {
                    this.groupedBar[option](this.chartConfig['properties'][option]);
                }
            }
            var showTooltip = false;
            if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
                showTooltip = true;
                var that_1 = this;
                this.groupedBar.on('customMouseOver', function () {
                    that_1.chartTooltip.show();
                });