Dashboard

Which Javascript Framework Provides The Cleanest Code?

If you are building almost any type of web application (like dashboards) you probably need powerful charting components to help you visually represent your data in a way your users can easily understand. In addition, there are a wide variety of front-end Javascript frameworks you can choose from to make it happen. That’s why today we take a look at 6 different front-end JavaScript frameworks that are supported by FusionCharts. The plan is to show you the source code you need to create for each framework to make a simple chart. Once we are done, you can look at the source code yourself and compare how much code it takes in each framework to make it happen. Hopefully, you will also be able to decide which framework is the most readable and understandable to you. As you can see FusionCharts is a powerful data visualization tool. Regardless of what JavaScript framework you are using, however, you should be able to use it with FusionCharts to deliver a powerful user experience. Note: Keep in mind when you make your comparisons that some of the frameworks embed the chart data in the code. Let’s get started!

Table of Contents

With FusionCharts, you can add React charts and graphs like area, bar, donut, line, marimekko, radar, stockcharts, and 100+ other charts. You can also add 2000+ maps to your web or mobile application. Using FusionCharts’ React component you can create charts that are responsive, interactive, and support zooming and panning. They also support APIs, animation, drill-downs, real-time updates, and even full exporting of charts and dashboards. React Component for FusionCharts also comes with event support for mouse, keyboard, and more. This lets you add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ React charts component are mobile-first by default, and responsive across all devices. Furthermore, we test and build all charts and graphs for millions of data points, without any performance issues.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: {/* see data tab */ },
};

class Chart extends Component {
  render () {
    return <ReactFC {...chartConfigs} />;
  }
}

ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);

Learn more about visually stunning React charts.

In Angular, you can also create pie, column, area, line, radar, Marimekko, and over 150 other charts for your web application. Using FusionCharts’ Angular Directive you can create charts that are responsive, interactive, and support zooming, panning, as well as APIs. You also get animations, drill-downs, real-time updates, and even full exporting of charts & dashboards. The Angular Directive also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. In addition, all charts and dashboards made on FusionCharts’ Angular Directive are mobile-first by default, and responsive across all devices. Furthermore, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Angular Directive is completely open-source. A team of dedicated developers actively maintains it to ensure that all the latest versions of Angular JS are always supported.

// Setup needed in app.module.ts

import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load fusion theme
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)

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

// In app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent { 
    dataSource: Object;
    chartConfig: Object;

    constructor() {
         this.chartConfig = {
            width: '700',
            height: '400',
            type: 'column2d',
            dataFormat: 'json',
        };

        this.dataSource = {
            "chart": {
              "caption": "Countries With Most Oil Reserves [2017-18]",
              "subCaption": "In MMbbl = One Million barrels",
              "xAxisName": "Country",
              "yAxisName": "Reserves (MMbbl)",
              "numberSuffix": "K",
              "theme": "fusion",
            },
            "data": [{
              "label": "Venezuela",
              "value": "290"
            }, {
              "label": "Saudi",
              "value": "260"
            }, {
              "label": "Canada",
              "value": "180"
            }, {
              "label": "Iran",
              "value": "140"
            }, {
              "label": "Russia",
              "value": "115"
            }, {
              "label": "UAE",
              "value": "100"
            }, {
              "label": "US",
              "value": "30"
            }, {
              "label": "China",
              "value": "30"
            }]
          };

    }
}

<!-- in app.component.html -->
<fusioncharts
    [chartConfig]=chartConfig
    [dataSource]=dataSource >
</fusioncharts>

Learn more about visually stunning Angular charts.

With the jQuery Plugin for FusionCharts, you can create Gantt, Line, Pie, Area, and over 150 other charts for your web application. Using FusionCharts’ jQuery Plugin (compatible with both Bootstrap or jQuery UI) you can create charts that are responsive, interactive, and support zooming and panning. It also supports APIs, animations, drill-downs, real-time updates, and even the export of charts & dashboards. It also comes with event support for mouse, keyboard, and more, so you can add charts in runtime during any lifecycle phase of your application. All charts and dashboards made on FusionCharts’ jQuery Plugin are mobile-first by default, and responsive across all devices. In addition, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the jQuery Plugin is completely open-source. A team of developers actively maintains it.

/**
 * Assuming you have installed fusioncharts using npm
 * Following code snippet can be used
*/var FusionCharts = require('fusioncharts');
var Charts = require('fusioncharts/fusioncharts.charts');
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');

Charts(FusionCharts); // Resolve Charts as dependency for FusionCharts.
FusionTheme(FusionCharts);  // Resolve Fusion theme as dependency for FusionCharts
jQueryFusionCharts(FusionCharts); // Resolve FusionCharts as dependency for jqueryFusionCharts

$('document').ready(function () {
  $('#chart-container').insertFusionCharts({
    type: 'column2d',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource:  { /* see data tab */ }    
  });
});

/* 
NOTE: 
  * In case you downloaded fusioncharts in zipped format
  * var FusionCharts = require('/path/to/fusioncharts/fusioncharts.js');
  * var Charts = require('/path/to/fusioncharts/fusioncharts.charts.js');
  * var FusionTheme = require('/path/to/fusioncharts/fusioncharts.theme.fusion.js');
*/

<div id="chart-container">
    FusionCharts will render here
</div>

Learn more about visually stunning jQuery charts.

Want Vue.Js charts and graphs? With FusionCharts you get area, bar, donut, line, Marimekko, radar, stock charts, and over 150 other charts. You also get 1000+ maps for your web application. Using FusionCharts’ Vue component you can create charts that are responsive and interactive. They support zooming, panning, APIs, animations, drill-downs, and real-time updates as well as full chart and dashboard exports. The Vue component also comes with event support for the mouse and keyboard, so you can add charts in runtime during any lifecycle phase of your app. In addition, all charts and dashboards made on FusionCharts’ Vue component are mobile-first, responsive across all devices. Finally, we test and build all charts and graphs for millions of data points, without any performance issues. Finally, the Vue component is completely open-source and actively maintained by a team of dedicated developers.

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

//import the theme
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts, FusionTheme)

// Copy datasource from 'Data' tab
var dataSource = /*{ "chart": {..}, ..}*/;

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    }
});

<div id="app">
    <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
    ></fusioncharts>
</div>

Learn more about visually stunning Vue charts.

The Ember Component for FusionCharts gives you area, bar, donut, line, Marimekko, radar, stock charts as well as 150+ other charts and 1000+ maps. Using FusionCharts’ Ember component you can create responsive and interactive charts that support zooming, panning, and APIs. In addition, you get animations, drill-downs, real-time updates, and even full exporting of charts & dashboards. Ember Component for FusionCharts also comes with event support for mouse, keyboard, and more. This means you can add charts in runtime during any lifecycle phase of the application. All the charts and dashboards made on FusionCharts’ Ember charts component are mobile-first by default, and responsive across all devices. Finally, we test and build all charts and graphs for millions of data points, without any performance issues. Finally, a dedicated team actively maintains the open-source Ember component.

import Component from '@ember/component';

export default Component.extend({
    width: 600,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: {/* see data tab */}
});

/* eslint-env node */'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function (defaults) {
    let app = new EmberAddon(defaults, {
        // Add options here
    });

    // Import FusionCharts library
    app.import('bower_components/fusioncharts/fusioncharts.js');
    app.import('bower_components/fusioncharts/fusioncharts.charts.js');        
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fusion.js');    

    /*
      This build file specifies the options for the dummy test app of this
      addon, located in `/tests/dummy`
      This build file does *not* influence how the addon or the app using it
      behave. You most likely want to be modifying `./index.js` or app's build file
    */
    return app.toTree();
};

{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource}}

Learn more about visually stunning Ember charts.

Finally, there are Svelte charts. Like the others, they come complete with the area, bar, donut, line, Marimekko, radar, stock charts, and 100+ other charts. You also get 2000+ maps for your web or mobile application. Using FusionCharts’ Svelte component you can create charts that are responsive, interactive, and support zooming and panning. You also get API support, animations, drill-downs, real-time updates, and even full exporting of charts & dashboards. Svelte Charts come with event support for mouse, keyboard, and more, so you can add charts in runtime during any lifecycle phase of your application. All charts and dashboards made on FusionCharts’ Svelte charts component are mobile-first by default, and responsive across all devices. Lastly, all charts & graphs are tested and built for millions of data points, without any performance issues.

<script>
  import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  import SvelteFC, {fcRoot} from 'svelte-fusioncharts';
  import dataSource from './data.js';

  fcRoot(FusionCharts, Charts, FusionTheme);

  const chartConfigs = {
    type: 'column2d',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource
  };
</script>

<div id="container">
  <SvelteFC {...chartConfigs} />
</div>

export default {
    "chart": {
      "caption": "Countries With Most Oil Reserves [2017-18]",
      "subCaption": "In MMbbl = One Million barrels",
      "xAxisName": "Country",
      "yAxisName": "Reserves (MMbbl)",
      "numberSuffix": "K",
      "theme": "fusion"
    },
    "data": [
      {
        "label": "Venezuela",
        "value": "290"
      },
      {
        "label": "Saudi",
        "value": "260"
      },
      {
        "label": "Canada",
        "value": "180"
      },
      {
        "label": "Iran",
        "value": "140"
      },
      {
        "label": "Russia",
        "value": "115"
      },
      {
        "label": "UAE",
        "value": "100"
      },
      {
        "label": "US",
        "value": "30"
      },
      {
        "label": "China",
        "value": "30"
      }
    ]
  }

Learn more about visually stunning Svelte charts.

Now that we have looked at the source code for the different frameworks, you can dive deeper into the framework that most interests you. You can also learn more about FusionCharts below. FusionCharts helps you build beautiful dashboards for your web & mobile projects. With extensive documentation, cross-browser support, and a consistent API, it is easier than ever to add interactive and responsive charts. From simple charts like line, column, and pie to domain-specific charts like heatmaps, radar, and stock charts we’ve got you covered. Start building your dashboards with FusionCharts today.

Eli M