How to use britecharts - 10 common examples

}

      // If the size of some property must be set relative to the container width it must be sent in an
      // object name 'sizeRelativeToContainerWidth' containing the property to set as key and the ratio to the
      // container's width as value.
      if (this.chartConfig.hasOwnProperty('sizeRelativeToContainerWidth')) {
        for (let option in this.chartConfig['sizeRelativeToContainerWidth']) {
          if (this.chart.hasOwnProperty(option)) {
            this.chart[option](containerWidth / this.chartConfig['sizeRelativeToContainerWidth'][option]);
          }
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            if (this.chartConfig['colors'].hasOwnProperty('reverse') && this.chartConfig['colors']['reverse'] === true) {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']].reverse());
            } else {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
            }
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.chart.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      chartContainer.datum(this.data).call(this.chart);

      if (this.chartConfig.hasOwnProperty('click')) {
        if (this.chartType === ChartType.Line || this.chartType === ChartType.StackedArea) {
          this.chart.on('customDataEntryClick', function (e, d, m) {

// container's width as value.
      if (this.chartConfig.hasOwnProperty('sizeRelativeToContainerWidth')) {
        for (let option in this.chartConfig['sizeRelativeToContainerWidth']) {
          if (this.chart.hasOwnProperty(option)) {
            this.chart[option](containerWidth / this.chartConfig['sizeRelativeToContainerWidth'][option]);
          }
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            if (this.chartConfig['colors'].hasOwnProperty('reverse') && this.chartConfig['colors']['reverse'] === true) {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']].reverse());
            } else {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
            }
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.chart.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      chartContainer.datum(this.data).call(this.chart);

      if (this.chartConfig.hasOwnProperty('click')) {
        if (this.chartType === ChartType.Line || this.chartType === ChartType.StackedArea) {
          this.chart.on('customDataEntryClick', function (e, d, m) {
            that.chartConfig['click'](e, d, m);
          });
        } else if (this.chartType === ChartType.ScatterPlot) {
          this.chart.on('customClick', function (e, d, m, s) {

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;
      case ChartType.Line:
        this.chart = line();
        this.chartSelector = '.line-chart';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = '.line-chart .metadata-group .hover-marker';
        break;
      case ChartType.ScatterPlot:
        this.chart = scatterPlot();
        this.chartSelector = '.scatter-plot';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = '.scatter-plot .metadata-group';
        break;
      case ChartType.Sparkline:
        this.chart = sparkline();
        this.chartSelector = '.sparkline';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = ''; // No tooltip selector.
        break;

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;
            case ChartType.Line:
                this.chart = line();
                this.chartSelector = '.line-chart';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = '.line-chart .metadata-group .hover-marker';
                break;
            case ChartType.ScatterPlot:
                this.chart = scatterPlot();
                this.chartSelector = '.scatter-plot';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = '.scatter-plot .metadata-group';
                break;
            case ChartType.Sparkline:
                this.chart = sparkline();
                this.chartSelector = '.sparkline';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = ''; // No tooltip selector.
                break;

mounted() {
    const container = d3Selection.select('.c-work-status-chart');
    const containerWidth = container.node() ? container.node().getBoundingClientRect().width : false;

    const barChart = new BarChart();

    if (containerWidth) {
      const colors = ['#FFF9C4', '#B3E5FC', '#C8E6C9', '#FFCDD2', '#CFD8DC'];
      const removedColors = [];

      $.ajax({
        method: 'GET',
        url: `/api/internal/works/${this.workId}/status_chart_data`,
      }).done((data) => {
        // Remove colors which corresponded to status if its quantity is zero.
        _.forEach(data, function (data, i) {
          if (data.quantity === 0) {
            return removedColors.push(colors[i]);
          }
        });

private initializeChart() {
    switch (this.chartType) {
      case ChartType.Bar:
        this.chart = bar();
        this.chartSelector = '.bar-chart';
        this.chartClickSelector = '.bar-chart .bar';
        this.tooltipContainerSelector = '.bar-chart .metadata-group';
        break;
      case ChartType.Brush:
        this.chart = brush();
        this.chartSelector = '.brush-chart';
        this.chartClickSelector = ''; // No click selector.
        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;

ChartComponent.prototype.initializeChart = function () {
        switch (this.chartType) {
            case ChartType.Bar:
                this.chart = bar();
                this.chartSelector = '.bar-chart';
                this.chartClickSelector = '.bar-chart .bar';
                this.tooltipContainerSelector = '.bar-chart .metadata-group';
                break;
            case ChartType.Brush:
                this.chart = brush();
                this.chartSelector = '.brush-chart';
                this.chartClickSelector = ''; // No click selector.
                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;

this.tooltipContainerSelector = '.bar-chart .metadata-group';
        break;
      case ChartType.Brush:
        this.chart = brush();
        this.chartSelector = '.brush-chart';
        this.chartClickSelector = ''; // No click selector.
        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;

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;
      case ChartType.Line:
        this.chart = line();
        this.chartSelector = '.line-chart';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = '.line-chart .metadata-group .hover-marker';
        break;
      case ChartType.ScatterPlot:
        this.chart = scatterPlot();
        this.chartSelector = '.scatter-plot';
        this.chartClickSelector = ''; // No click selector.
        this.tooltipContainerSelector = '.scatter-plot .metadata-group';
        break;

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;
            case ChartType.Line:
                this.chart = line();
                this.chartSelector = '.line-chart';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = '.line-chart .metadata-group .hover-marker';
                break;
            case ChartType.ScatterPlot:
                this.chart = scatterPlot();
                this.chartSelector = '.scatter-plot';
                this.chartClickSelector = ''; // No click selector.
                this.tooltipContainerSelector = '.scatter-plot .metadata-group';
                break;