Word Cloud Generate in Angular using HighChart

In this article, we’ll learn how to generate a Word Cloud in Angular. But first of all, we need to know what is the Word Cloud.
Word Cloud: It’s a visual representation of the words used in a particular piece of text, with the size of each word indicating its relative frequency in the text. In our example, we take one a string(text) we find the frequency of the word in the string then we put in the Word Cloud.
Let’s draw the Word Cloud for that first we need to install highchart in our applications


npm install highcharts --save
npm install highcharts-angular --save

After installing module lets add a module in our app.module.ts file.

....
import { HighchartsChartModule } from 'highcharts-angular';
...
@NgModule({
imports:      [ ..., HighchartsChartModule],
....
})



After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import highchat module using “import * as Highcharts from ‘highcharts’;“. Also we need Word Cloud for draw the stream chart display in below code need to import


const Wordcloud = require('highcharts/modules/wordcloud');
Wordcloud(Highcharts);

Lets assign the text variable then we need to find the frequncy of the word in the text using below code.


var text = 'Education For betterment As all we know that, in front of GOD we are equal. GOD gave us similar power  in front of GOD we are equal. GOD gave us similar power to all. He is not did any partiality for creating all of us. Instead all those we create this Reservation Education For betterment system which force us to create discrimination among us. Because of this discrimination there are many social hazards taking place. Education For betterment As all we are in front of GOD we are equal. GOD gave us similar power Human, so we maintain it also. Not accepting any Reservation Education For betterment system. Education For betterment It hampering our mentality. It also create many social violence. Today I like to create many social violence. Today I like to Education For betterment convey all of you about this harmful and Education For betterment violent system that already playing it’s game among us.';
  var obj ={name:'',weight:0}
var lines = text.split(/[,\. ]+/g),
    data = Highcharts.reduce(lines, function (arr, word) {
        
        obj = Highcharts.find(arr, function (obj) {
            return obj.name === word;
        });
        if (obj) {
         
             obj.weight += 1;
        } else {
            obj = {
                name: word,
                weight: 1
            };
            arr.push(obj);
        }
        return arr;
    }, []);

Below is the full code for component file and html file to Draw the word cloud.


import { Component, VERSION ,OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;
const More = require('highcharts/highcharts-more');
More(Highcharts);

import Histogram from 'highcharts/modules/histogram-bellcurve';
Histogram(Highcharts);

const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts);
import * as newdata from './data';

const Wordcloud = require('highcharts/modules/wordcloud');
Wordcloud(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{


  public activity;
  public xData;
  public label;
  options:any;
 

   
  constructor() {
   
  var text = 'Education For betterment As all we know that, in front of GOD we are equal. GOD gave us similar power  in front of GOD we are equal. GOD gave us similar power to all. He is not did any partiality for creating all of us. Instead all those we create this Reservation Education For betterment system which force us to create discrimination among us. Because of this discrimination there are many social hazards taking place. Education For betterment As all we are in front of GOD we are equal. GOD gave us similar power Human, so we maintain it also. Not accepting any Reservation Education For betterment system. Education For betterment It hampering our mentality. It also create many social violence. Today I like to create many social violence. Today I like to Education For betterment convey all of you about this harmful and Education For betterment violent system that already playing it’s game among us.';
  var obj ={name:'',weight:0}
var lines = text.split(/[,\. ]+/g),
    data = Highcharts.reduce(lines, function (arr, word) {
        
        obj = Highcharts.find(arr, function (obj) {
            return obj.name === word;
        });
        if (obj) {
         
             obj.weight += 1;
        } else {
            obj = {
                name: word,
                weight: 1
            };
            arr.push(obj);
        }
        return arr;
    }, []);

    this.options = {
    accessibility: {
        screenReaderSection: {
            beforeChartFormat: '<h5>{chartTitle}</h5>' +
                '<div>{chartSubtitle}</div>' +
                '<div>{chartLongdesc}</div>' +
                '<div>{viewTableButton}</div>'
        }
    },
    series: [{
        type: 'wordcloud',
        data: data,
        name: 'Occurrences'
    }],
    title: {
        text: ''
    }
};
}

  ngOnInit(){

    Highcharts.chart('container', this.options);
  }
}


<h1 style="text-align:center">Word Cloud in Angular</h1>
<div id="container"></div>




Below is the full embeded code for the Word Cloud you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 4
  • 2
  •  
  •