Documentation menu
JS React Angular Vue
JS React Angular Vue

Integration with FusionCharts

FusionCharts is a charting library that provides a wide range of interactive charts, maps, and graphs. This tutorial describes how to integrate WebDataRocks with FusionCharts and visualize your data from the component.

Supported chart and map types

Charts:

Maps:

  • maps/worldwithcountries (demo)

In case the chart you need is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of fusioncharts.getData().

Please follow the steps below to integrate your pivot table component with FusionCharts.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the Quick start guide. Your code of the component with WebDatarocks should look similar to the following:

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}
    <app-wbr-pivot
 [toolbar]="true">
</app-wbr-pivot>

    Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

      import { Component} from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };
}
      <app-wbr-pivot
 [toolbar]="true"
 [report]="report">
</app-wbr-pivot>

      The fields you’ve specified in the report will be shown on the chart.

      Step 2. Get a reference to the WebDataRocks instance

      Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

      Import WebdatarocksComponent and get a reference to the <app-wbr-pivot> instance using a template variable and the @ViewChild decorator:

        import { Component, ViewChild } from "@angular/core";
import { WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild("pivot") pivotRef!: WebdatarocksComponent;

  // ...
}
        <app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="report">
</app-wbr-pivot>

        Now it’s possible to interact with the component through this.pivotRef.webdatarocks.

        Note. If you are using the legacy @webdatarocks/ng-webdatarocks wrapper, import WebdatarocksComponent from it.

        Step 3. Add FusionCharts

        Step 3.1. Download FusionCharts and its wrapper for Angular:

        npm install fusioncharts angular-fusioncharts

        Step 3.2. Import FusionChartsModule and necessary FusionCharts dependencies into src/app/app.module.ts:

          // Import FusionChartsModule for Angular
import { FusionChartsModule } from "angular-fusioncharts";
// Import the FusionCharts library
import * as FusionCharts from "fusioncharts";
// Import the chart module
import * as Charts from "fusioncharts/fusioncharts.charts";
// Import a FusionCharts theme
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

          Step 3.3. Pass the imported dependencies to FusionChartsModule:

            FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

            Step 3.4. Add FusionChartsModule to the imports array in @NgModule:

              @NgModule({
  // ...
  imports: [
    // ...
    WebdatarocksPivotModule,
    FusionChartsModule
  ],
  // ...
})

              Step 3.5. In the HTML template of the component, create a chart using the fusioncharts element:

                <fusioncharts
 width="100%"
 height="450"
 type="mscolumn2d"
 dataFormat="json">
</fusioncharts>

                To learn more about configurations available for FusionCharts, please refer to the FusionCharts documentation.

                If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with FusionCharts yet. We will connect them in the next step.

                Step 3.6. Ensure that @angular-devkit/build-angular:browser is specified as a builder in angular.json since FusionCharts is not compatible with @angular-devkit/build-angular:browser-esbuild.

                Your builder configurations in the angular.json file should be similar to the following:

                {
                  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
                  "version": 1,
                  "newProjectRoot": "projects",
                  "projects": {
                    "wdr-fusioncharts": {
                      "architect": {
                        "build": {
                          "builder": "@angular-devkit/build-angular:browser",
                          "options": {
                            "outputPath": "dist/wdr-fusioncharts",
                            "index": "src/index.html",
                            "main": "src/main.ts"
                          }
                        }
                      }
                    }
                  }
                }

                Step 4. Show the data from the pivot table on the chart

                Step 4.1. Create a variable to store the chart’s data source (e.g., chartDataSource):

                  chartDataSource: Object = {};

                  The chartDataSource variable is now empty, but soon we’ll fill it with data from our component.

                  Step 4.2. Import the WebDataRocks Connector for FusionCharts:

                    import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

                    The Connector provides the fusioncharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

                    Step 4.3. If we call the fusioncharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

                      onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  this.pivotRef.webDataRocks.off("reportComplete");
  this.createChart();
}
                      <app-wbr-pivot #pivotRef
 [toolbar]="true"
 [report]="report"
 (reportcomplete)="onReportComplete()">
</app-wbr-pivot>

                      Now we know when the data is loaded and the report is ready.

                      Step 4.4. Implement the createChart() function. It will use the fusioncharts.getData() method from the Connector:

                        createChart() {
  this.pivotRef.webDataRocks.fusioncharts?.getData(
    {
      type: "mscolumn2d",
    },
    // Function called when data for the chart is ready
    this.drawColumnChart.bind(this),
    // Function called on report changes (filtering, sorting, etc.)
    this.drawColumnChart.bind(this)
  );
}

                        Notice the type configuration — it must correspond to the chart type specified in step 3.5 (in our case, it is "mscolumn2d").

                        If the Connector does not support the desired chart type or you need to preprocess the data differently, implement a function that handles the data processing and pass it to fusioncharts.getData() as the options.prepareDataFunction parameter.

                        Step 4.5. Now create a function to draw the chart:

                          drawColumnChart(chartConfig: any) {
  // Applying the chart theme
  chartConfig.chart.theme = "fusion";
  // Updating the chart’s data source
  this.chartDataSource = chartConfig;
}

                          Step 4.6. Finally, pass the configured data source to the chart:

                            <fusioncharts
 width="100%"
 height="450"
 type="mscolumn2d"
 dataFormat="json"
 [dataSource]="chartDataSource">
</fusioncharts>

                            Since the dataSource property is bound to chartDataSource, the chart will be re-rendered each time the chartDataSource’s value is updated. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

                            Step 5. Run the project

                            Run your project with the following command:

                            ng serve --open

                            If the page with WebDataRocks is not opened automatically, go to http://localhost:4200/ in the browser to see an interactive dashboard with WebDataRocks and FusionCharts. The column chart shows the data from WebDataRocks and reacts instantly to any changes in the report.

                            Check out the full code

                            After completing this tutorial, the full code of the component should look as follows:

                              import { Component, ViewChild } from "@angular/core";
import { WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild("pivot") pivotRef!: WebdatarocksComponent;
  dataSource: Object = {};

  report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  onReportComplete() {
    this.pivotRef.webDataRocks.off("reportComplete");
    this.createChart();
  }

  createChart() {
    this.pivotRef.webDataRocks.fusioncharts?.getData(
      {
        type: "mscolumn2d",
      },
      this.drawColumnChart.bind(this),
      this.drawColumnChart.bind(this)
    );
  }

  drawColumnChart(chartConfig: any) {
    chartConfig.chart.theme = "fusion";
    this.dataSource = chartConfig;
  }
}
                              <app-wbr-pivot #pivot
 [toolbar]="true"
 [report]="report"
 (reportcomplete)="onReportComplete()">
</app-wbr-pivot>
<fusioncharts
 width="100%"
 height="450"
 type="mscolumn2d"
 dataFormat="JSON"
 [dataSource]="dataSource"
></fusioncharts>
                              import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { FusionChartsModule } from "angular-fusioncharts";
import * as FusionCharts from "fusioncharts";
import * as Charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebdatarocksPivotModule,
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

                              See also