How to use the britecharts/dist/umd/line.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 = '.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;
github colapdev / ngx-britecharts / dist / components / chart / Chart.component.js View on Github external
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;
github colapdev / ngx-britecharts / src / components / line-chart / LineChart.component.ts View on Github external
private drawChart() {
    let that = this;
    this.line = lineChart();
    this.chartTooltip = tooltip();

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

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

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

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
github kiraka / annict-web / app / frontend / javascript / common / components / workWatchersChart.js View on Github external
mounted() {
    const container = d3Selection.select('.c-work-watchers-chart');
    const containerWidth = container.node() ? container.node().getBoundingClientRect().width : false;
    const lineMargin = {
      top: 15,
      bottom: 45,
      left: 45,
      right: 0,
    };

    const lineChart = new LineChart();

    $.ajax({
      method: 'GET',
      url: `/api/internal/works/${this.workId}/watchers_chart_data`,
    }).done((data) => {
      const dataset = {
        dataByTopic: [
          {
            topicName: 'Watchers',
            topic: -1,
            dates: data,
          },
        ],
      };

      if (containerWidth) {
github colapdev / ngx-britecharts / dist / components / line-chart / LineChart.component.js View on Github external
LineChartComponent.prototype.drawChart = function () {
        var that = this;
        this.line = lineChart();
        this.chartTooltip = tooltip();
        var lineContainer = d3Selection.select(this.el).select('.line-chart-container'), containerWidth = lineContainer.node() ? lineContainer.node().getBoundingClientRect().width : false;
        if (containerWidth) {
            this.line.width(containerWidth);
            for (var option in this.chartConfig['properties']) {
                if (this.line.hasOwnProperty(option) && option !== 'colorSchema') {
                    this.line[option](this.chartConfig['properties'][option]);
                }
            }
            var showTooltip = false;
            if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
                showTooltip = true;
                this.line.on('customMouseOver', function () {
                    that.chartTooltip.show();
                });
                this.line.on('customMouseMove', function (dataPoint, topicColorMap, dataPointXPosition) {
github kiraka / annict-web / app / frontend / javascript / v3 / components / WorkWatchersChart.vue View on Github external
onMounted(() => {
      const container = d3Selection.select(".c-work-watchers-chart")
      const containerWidth = container.node() ?
              container.node().getBoundingClientRect().width
              :
              false
      const lineMargin = {
        top: 15,
        bottom: 45,
        left: 45,
        right: 0
      }

      const lineChart = new LineChart()

      $.ajax({
        method: 'GET',
        url: `/api/internal/works/${props.workId}/watchers_chart_data`
      }).done(data => {
        const dataset = {
          dataByTopic: [
            {
              topicName: "Watchers",
              topic: -1,
              dates: data
            }
          ]
        }

        if (containerWidth) {