Highcharts Demo

author(s): Jon Arild Nygård

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
/**
 * @license Highcharts JS v6.1.0-modified (2018-05-19)
 *
 * (c) 2016 Highsoft AS
 * Authors: Jon Arild Nygard
 *
 * License: www.highcharts.com/license
 */
'use strict';
(function (factory) {
	if (typeof module === 'object' && module.exports) {
		module.exports = factory;
	} else {
		factory(Highcharts);
	}
}(function (Highcharts) {
	var draw = (function () {
		var isFn = function (x) {
		    return typeof x === 'function';
		};

		/**
		 * draw - Handles the drawing of a point.
		 * TODO: add type checking.
		 *
		 * @param  {object} params Parameters.
		 * @return {undefined} Returns undefined.
		 */
		var draw = function draw(params) {
		    var point = this,
		        graphic = point.graphic,
		        animate = params.animate,
		        attr = params.attr,
		        onComplete = params.onComplete,
		        css = params.css,
		        group = params.group,
		        renderer = params.renderer,
		        shape = params.shapeArgs,
		        type = params.shapeType;

		    if (point.shouldDraw()) {
		        if (!graphic) {
		            point.graphic = graphic = renderer[type](shape).add(group);
		        }
		        graphic.css(css).attr(attr).animate(animate, undefined, onComplete);
		    } else if (graphic) {
		        graphic.animate(animate, undefined, function () {
		            point.graphic = graphic = graphic.destroy();
		            if (isFn(onComplete)) {
		                onComplete();
		            }
		        });
		    }
		    if (graphic) {
		        graphic.addClass(point.getClassName(), true);
		    }
		};


		return draw;
	}());
	(function (H, drawPoint) {
		/**
		 * (c) 2016 Highsoft AS
		 * Authors: Jon Arild Nygard
		 *
		 * License: www.highcharts.com/license
		 *
		 * This is an experimental Highcharts module which enables visualization
		 * of a word cloud.
		 */
		var each = H.each,
		    extend = H.extend,
		    isArray = H.isArray,
		    isNumber =...

JavaScript

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum erat ac justo sollicitudin, quis lacinia ligula fringilla. Pellentesque hendrerit, nisi vitae posuere condimentum, lectus urna accumsan libero, rutrum commodo mi lacus pretium erat. Phasellus pretium ultrices mi sed semper. Praesent ut tristique magna. Donec nisl tellus, sagittis ut tempus sit amet, consectetur eget erat. Sed ornare gravida lacinia. Curabitur iaculis metus purus, eget pretium est laoreet ut. Quisque tristique augue ac eros malesuada, vitae facilisis mauris sollicitudin. Mauris ac molestie nulla, vitae facilisis quam. Curabitur placerat ornare sem, in mattis purus posuere eget. Praesent non condimentum odio. Nunc aliquet, odio nec auctor congue, sapien justo dictum massa, nec fermentum massa sapien non tellus. Praesent luctus eros et nunc pretium hendrerit. In consequat et eros nec interdum. Ut neque dui, maximus id elit ac, consequat pretium tellus. Nullam vel accumsan lorem.';
var lines = text.split(/[,\. ]+/g),
  data = Highcharts.reduce(lines, function(arr, word) {
    var 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;
  }, []);

var chart = Highcharts.chart('container', 
    {"chart": {
        "animation": false,
        "backgroundColor": "transparent",
        "plotBackgroundColor": "transparent",
        "plotBorderWidth": 0,
        "plotBorderColor": "rgba(242,242,242,1)",
        "style": {
            "fontFamily": "\"Open Sans\""
        },
        "events": {},
        "spacingTop": 20,
        "spacingLeft": 30,
        "spacingBottom": 20,
        "spacingRight": 30
    },
    "credits": {
        "enabled": false
    },
    "colors": ["#54a1b7", "#64b79a", "#a6cb6a", "#d6c15d", "#df8e43", "#dd5e38", "#af73ab"],
    "plotOptions": {
        "column": {
       ...