@using Trirand.Web.Mvc
@using Trirand.Web.Mvc.Chart;
@using Trirand.Web.Mvc.Chart.Series;
@using Trirand.Web.Mvc.Chart.Data;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - WordCloud API Usage</title>
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart.min.js"></script>
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart-wordcloud.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().CoreChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in
        the controller based on runtime criteria and database data and pass the model
        to the View using ViewData
        -->
        @(Html.Trirand().CoreChart(                     
                     new CoreChart
                     {
                        Width = "900px",
                        Title = new List<Title>
                        {
                            new Title()
                            {
                                Text = "API Usage"
                            }
                        },
                        Tooltip = new ToolTip
                        {
                            Show = true
                        },
                        Series = new List<object>()
                        {
                            new WordCloud()
                            {
                                Name = "API Usage Trends",
                                Size = new List<string> { "80%", "80%"},
                                TextRotation = new List<int> { 0, 45, 90, -45 },
                                TextPadding = 0,
                                AutoSize = new AutoSizeConfig
                                {
                                    Enable = true,
                                    MinSize = 14
                                },
                                Data = ViewData["data1"] as List<Data>
                            }
                        }
                     }
            , "Chart")
        )

        <br />
        <div>
             
        </div>
    </div>
</body>
</html>

using System.Web.Mvc;
using System;
using System.Collections.Generic;
using Trirand.Web.Mvc.Chart.Data;
using Trirand.Web.Mvc.Chart.Style;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        private ItemStyle CreateAPIRandomItemStyle()
        {
            ItemStyle style = new ItemStyle();
            Random random = new Random();

            int red = random.Next(20, 240);
            int green = random.Next(20, 240);
            int blue = random.Next(20, 240);

            style.Normal = new Normal
            {
                Color = $"rgb({red},{green},{blue})"
            };


            return style;
        }

        public ActionResult APIUsage()
        {
            List<Data> data1 = new List<Data>
            {
              new Data { Name = "visualMap", Value = 22199},
              new Data { Name = "continuous", Value = 10288},
              new Data { Name = "contoller", Value = 620},
              new Data { Name = "series", Value = 274470},
              new Data { Name = "gauge", Value = 12311},
              new Data { Name = "detail", Value = 1206},
              new Data { Name = "piecewise", Value = 4885},
              new Data { Name = "textStyle", Value = 32294},
              new Data { Name = "markPoint", Value = 18574},
              new Data { Name = "pie", Value = 38929},
              new Data { Name = "roseType", Value = 969},
              new Data { Name = "label", Value = 37517},
              new Data { Name = "emphasis", Value = 12053},
              new Data { Name = "yAxis", Value = 57299},
              new Data { Name = "name", Value = 15418},
              new Data { Name = "type", Value = 22905},
              new Data { Name = "gridIndex", Value = 5146},
              new Data { Name = "normal", Value = 49487},
              new Data { Name = "itemStyle", Value = 33837},
              new Data { Name = "min", Value = 4500},
              new Data { Name = "silent", Value = 5744},
              new Data { Name = "animation", Value = 4840},
              new Data { Name = "offsetCenter", Value = 232},
              new Data { Name = "inverse", Value = 3706},
              new Data { Name = "borderColor", Value = 4812},
              new Data { Name = "markLine", Value = 16578},
              new Data { Name = "line", Value = 76970},
              new Data { Name = "radiusAxis", Value = 6704},
              new Data { Name = "radar", Value = 15964},
              new Data { Name = "data", Value = 60679},
              new Data { Name = "dataZoom", Value = 24347},
              new Data { Name = "tooltip", Value = 43420},
              new Data { Name = "toolbox", Value = 25222},
              new Data { Name = "geo", Value = 16904},
              new Data { Name = "parallelAxis", Value = 4029},
              new Data { Name = "parallel", Value = 5319},
              new Data { Name = "max", Value = 3393},
              new Data { Name = "bar", Value = 43066},
              new Data { Name = "heatmap", Value = 3110},
              new Data { Name = "map", Value = 20285},
              new Data { Name = "animationDuration", Value = 3425},
              new Data { Name = "animationDelay", Value = 2431},
              new Data { Name = "splitNumber", Value = 5175},
              new Data { Name = "axisLine", Value = 12738},
              new Data { Name = "lineStyle", Value = 19601},
              new Data { Name = "splitLine", Value = 7133},
              new Data { Name = "axisTick", Value = 8831},
              new Data { Name = "axisLabel", Value = 17516},
              new Data { Name = "pointer", Value = 590},
              new Data { Name = "color", Value = 23426},
              new Data { Name = "title", Value = 38497},
              new Data { Name = "formatter", Value = 15214},
              new Data { Name = "slider", Value = 7236},
              new Data { Name = "legend", Value = 66514},
              new Data { Name = "grid", Value = 28516},
              new Data { Name = "smooth", Value = 1295},
              new Data { Name = "smoothMonotone", Value = 696},
              new Data { Name = "sampling", Value = 757},
              new Data { Name = "feature", Value = 12815},
              new Data { Name = "saveAsImage", Value = 2616},
              new Data { Name = "polar", Value = 6279},
              new Data { Name = "calculable", Value = 879},
              new Data { Name = "backgroundColor", Value = 9419},
              new Data { Name = "excludeComponents", Value = 130},
              new Data { Name = "show", Value = 20620},
              new Data { Name = "text", Value = 2592},
              new Data { Name = "icon", Value = 2782},
              new Data { Name = "dimension", Value = 478},
              new Data { Name = "inRange", Value = 1060},
              new Data { Name = "animationEasing", Value = 2983},
              new Data { Name = "animationDurationUpdate", Value = 2259},
              new Data { Name = "animationDelayUpdate", Value = 2236},
              new Data { Name = "animationEasingUpdate", Value = 2213},
              new Data { Name = "xAxis", Value = 89459},
              new Data { Name = "angleAxis", Value = 5469},
              new Data { Name = "showTitle", Value = 484},
              new Data { Name = "dataView", Value = 2754},
              new Data { Name = "restore", Value = 932},
              new Data { Name = "timeline", Value = 10104},
              new Data { Name = "range", Value = 477},
              new Data { Name = "value", Value = 5732},
              new Data { Name = "precision", Value = 878},
              new Data { Name = "target", Value = 1433},
              new Data { Name = "zlevel", Value = 5361},
              new Data { Name = "symbol", Value = 8718},
              new Data { Name = "interval", Value = 7964},
              new Data { Name = "symbolSize", Value = 5300},
              new Data { Name = "showSymbol", Value = 1247},
              new Data { Name = "inside", Value = 8913},
              new Data { Name = "xAxisIndex", Value = 3843},
              new Data { Name = "orient", Value = 4205},
              new Data { Name = "boundaryGap", Value = 5073},
              new Data { Name = "nameGap", Value = 4896},
              new Data { Name = "zoomLock", Value = 571},
              new Data { Name = "hoverAnimation", Value = 2307},
              new Data { Name = "legendHoverLink", Value = 3553},
              new Data { Name = "stack", Value = 2907},
              new Data { Name = "throttle", Value = 466},
              new Data { Name = "connectNulls", Value = 897},
              new Data { Name = "clipOverflow", Value = 826},
              new Data { Name = "startValue", Value = 551},
              new Data { Name = "minInterval", Value = 3292},
              new Data { Name = "opacity", Value = 3097},
              new Data { Name = "splitArea", Value = 4775},
              new Data { Name = "filterMode", Value = 635},
              new Data { Name = "end", Value = 409},
              new Data { Name = "left", Value = 6475},
              new Data { Name = "funnel", Value = 2238},
              new Data { Name = "lines", Value = 6403},
              new Data { Name = "baseline", Value = 431},
              new Data { Name = "align", Value = 2608},
              new Data { Name = "coord", Value = 897},
              new Data { Name = "nameTextStyle", Value = 7477},
              new Data { Name = "width", Value = 4338},
              new Data { Name = "shadowBlur", Value = 4493},
              new Data { Name = "effect", Value = 929},
              new Data { Name = "period", Value = 225},
              new Data { Name = "areaColor", Value = 631},
              new Data { Name = "borderWidth", Value = 3654},
              new Data { Name = "nameLocation", Value = 4418},
              new Data { Name = "position", Value = 11723},
              new Data { Name = "containLabel", Value = 1701},
              new Data { Name = "scatter", Value = 10718},
              new Data { Name = "areaStyle", Value = 5310},
              new Data { Name = "scale", Value = 3859},
              new Data { Name = "pieces", Value = 414},
              new Data { Name = "categories", Value = 1000},
              new Data { Name = "selectedMode", Value = 3825},
              new Data { Name = "itemSymbol", Value = 273},
              new Data { Name = "effectScatter", Value = 7147},
              new Data { Name = "fontStyle", Value = 3376},
              new Data { Name = "fontSize", Value = 3386},
              new Data { Name = "margin", Value = 1034},
              new Data { Name = "iconStyle", Value = 2257},
              new Data { Name = "link", Value = 1366},
              new Data { Name = "axisPointer", Value = 5245},
              new Data { Name = "showDelay", Value = 896},
              new Data { Name = "graph", Value = 22194},
              new Data { Name = "subtext", Value = 1442},
              new Data { Name = "selected", Value = 2881},
              new Data { Name = "barCategoryGap", Value = 827},
              new Data { Name = "barGap", Value = 1094},
              new Data { Name = "barWidth", Value = 1521},
              new Data { Name = "coordinateSystem", Value = 3622},
              new Data { Name = "barBorderRadius", Value = 284},
              new Data { Name = "znew Data { ", Value = 4014},
              new Data { Name = "polarIndex", Value = 1456},
              new Data { Name = "shadowOffsetX", Value = 3046},
              new Data { Name = "shadowColor", Value = 3771},
              new Data { Name = "shadowOffsetY", Value = 2475},
              new Data { Name = "height", Value = 1988},
              new Data { Name = "barMinHeight", Value = 575},
              new Data { Name = "lang", Value = 131},
              new Data { Name = "symbolRotate", Value = 2752},
              new Data { Name = "symbolOffset", Value = 2549},
              new Data { Name = "showAllSymbol", Value = 942},
              new Data { Name = "transitionDuration", Value = 993},
              new Data { Name = "bottom", Value = 3724},
              new Data { Name = "fillerColor", Value = 229},
              new Data { Name = "nameMap", Value = 1249},
              new Data { Name = "barMaxWidth", Value = 747},
              new Data { Name = "radius", Value = 2103},
              new Data { Name = "center", Value = 2425},
              new Data { Name = "magicType", Value = 3276},
              new Data { Name = "labelPrecision", Value = 248},
              new Data { Name = "option", Value = 654},
              new Data { Name = "seriesIndex", Value = 935},
              new Data { Name = "controlPosition", Value = 121},
              new Data { Name = "itemGap", Value = 3188},
              new Data { Name = "padding", Value = 3481},
              new Data { Name = "shadowStyle", Value = 347},
              new Data { Name = "boxplot", Value = 1394},
              new Data { Name = "labelFormatter", Value = 264},
              new Data { Name = "realtime", Value = 631},
              new Data { Name = "dataBackgroundColor", Value = 239},
              new Data { Name = "showDetail", Value = 247},
              new Data { Name = "showDataShadow", Value = 217},
              new Data { Name = "xnew Data { ", Value = 684},
              new Data { Name = "valueDim", Value = 499},
              new Data { Name = "onZero", Value = 931},
              new Data { Name = "right", Value = 3255},
              new Data { Name = "clockwise", Value = 1035},
              new Data { Name = "itemWidth", Value = 1732},
              new Data { Name = "trigger", Value = 3840},
              new Data { Name = "axis", Value = 379},
              new Data { Name = "selectedOffset", Value = 670},
              new Data { Name = "startAngle", Value = 1293},
              new Data { Name = "minAngle", Value = 590},
              new Data { Name = "top", Value = 4637},
              new Data { Name = "avoidLabelOverlap", Value = 870},
              new Data { Name = "labelLine", Value = 3785},
              new Data { Name = "sankey", Value = 2933},
              new Data { Name = "endAngle", Value = 213},
              new Data { Name = "start", Value = 779},
              new Data { Name = "roam", Value = 1738},
              new Data { Name = "fontWeight", Value = 2828},
              new Data { Name = "fontFamily", Value = 2490},
              new Data { Name = "subtextStyle", Value = 2066},
              new Data { Name = "indicator", Value = 853},
              new Data { Name = "sublink", Value = 708},
              new Data { Name = "zoom", Value = 1038},
              new Data { Name = "subtarget", Value = 659},
              new Data { Name = "length", Value = 1060},
              new Data { Name = "itemSize", Value = 505},
              new Data { Name = "controlStyle", Value = 452},
              new Data { Name = "yAxisIndex", Value = 2529},
              new Data { Name = "edgeLabel", Value = 1188},
              new Data { Name = "radiusAxisIndex", Value = 354},
              new Data { Name = "scaleLimit", Value = 1313},
              new Data { Name = "geoIndex", Value = 535},
              new Data { Name = "regions", Value = 1892},
              new Data { Name = "itemHeight", Value = 1290},
              new Data { Name = "nodes", Value = 644},
              new Data { Name = "candlestick", Value = 3166},
              new Data { Name = "crossStyle", Value = 466},
              new Data { Name = "edges", Value = 369},
              new Data { Name = "links", Value = 3277},
              new Data { Name = "layout", Value = 846},
              new Data { Name = "barBorderColor", Value = 721},
              new Data { Name = "barBorderWidth", Value = 498},
              new Data { Name = "treemap", Value = 3865},
              new Data { Name = "ynew Data { ", Value = 367},
              new Data { Name = "valueIndex", Value = 704},
              new Data { Name = "showLegendSymbol", Value = 482},
              new Data { Name = "mapValueCalculation", Value = 492},
              new Data { Name = "optionToContent", Value = 264},
              new Data { Name = "handleColor", Value = 187},
              new Data { Name = "handleSize", Value = 271},
              new Data { Name = "showContent", Value = 1853},
              new Data { Name = "angleAxisIndex", Value = 406},
              new Data { Name = "endValue", Value = 327},
              new Data { Name = "triggerOn", Value = 1720},
              new Data { Name = "contentToOption", Value = 169},
              new Data { Name = "buttonColor", Value = 71},
              new Data { Name = "rotate", Value = 1144},
              new Data { Name = "hoverLink", Value = 335},
              new Data { Name = "outOfRange", Value = 491},
              new Data { Name = "textareaColor", Value = 58},
              new Data { Name = "textareaBorderColor", Value = 58},
              new Data { Name = "textColor", Value = 60},
              new Data { Name = "buttonTextColor", Value = 66},
              new Data { Name = "category", Value = 336},
              new Data { Name = "hideDelay", Value = 786},
              new Data { Name = "alwaysShowContent", Value = 1267},
              new Data { Name = "extraCssText", Value = 901},
              new Data { Name = "effectType", Value = 277},
              new Data { Name = "force", Value = 1820},
              new Data { Name = "rippleEffect", Value = 723},
              new Data { Name = "edgeSymbolSize", Value = 329},
              new Data { Name = "showEffectOn", Value = 271},
              new Data { Name = "gravity", Value = 199},
              new Data { Name = "edgeLength", Value = 193},
              new Data { Name = "layoutAnimation", Value = 152},
              new Data { Name = "length2", Value = 169},
              new Data { Name = "enterable", Value = 957},
              new Data { Name = "dim", Value = 83},
              new Data { Name = "readOnly", Value = 143},
              new Data { Name = "levels", Value = 444},
              new Data { Name = "textGap", Value = 256},
              new Data { Name = "pixelRatio", Value = 84},
              new Data { Name = "nodeScaleRatio", Value = 232},
              new Data { Name = "draggable", Value = 249},
              new Data { Name = "brushType", Value = 158},
              new Data { Name = "radarIndex", Value = 152},
              new Data { Name = "large", Value = 182},
              new Data { Name = "edgeSymbol", Value = 675},
              new Data { Name = "largeThreshold", Value = 132},
              new Data { Name = "leafDepth", Value = 73},
              new Data { Name = "childrenVisibleMin", Value = 73},
              new Data { Name = "minSize", Value = 35},
              new Data { Name = "maxSize", Value = 35},
              new Data { Name = "sort", Value = 90},
              new Data { Name = "funnelAlign", Value = 61},
              new Data { Name = "source", Value = 336},
              new Data { Name = "nodeClick", Value = 200},
              new Data { Name = "curveness", Value = 350},
              new Data { Name = "areaSelectStyle", Value = 104},
              new Data { Name = "parallelIndex", Value = 52},
              new Data { Name = "initLayout", Value = 359},
              new Data { Name = "trailLength", Value = 116},
              new Data { Name = "boxWidth", Value = 20},
              new Data { Name = "back", Value = 53},
              new Data { Name = "rewind", Value = 110},
              new Data { Name = "zoomToNodeRatio", Value = 80},
              new Data { Name = "squareRatio", Value = 60},
              new Data { Name = "parallelAxisDefault", Value = 358},
              new Data { Name = "checkpointStyle", Value = 440},
              new Data { Name = "nodeWidth", Value = 49},
              new Data { Name = "color0", Value = 62},
              new Data { Name = "layoutIterations", Value = 56},
              new Data { Name = "nodeGap", Value = 54},
              new Data { Name = "color(Array", Value = 76},
              new Data { Name = "<string>)", Value = 76},
              new Data { Name = "repulsion", Value = 276},
              new Data { Name = "tiled", Value = 105},
              new Data { Name = "currentIndex", Value = 145},
              new Data { Name = "axisType", Value = 227},
              new Data { Name = "loop", Value = 97},
              new Data { Name = "playInterval", Value = 112},
              new Data { Name = "borderColor0", Value = 23},
              new Data { Name = "gap", Value = 43},
              new Data { Name = "autoPlay", Value = 123},
              new Data { Name = "showPlayBtn", Value = 25},
              new Data { Name = "breadcrumb", Value = 119},
              new Data { Name = "colorMappingBy", Value = 85},
              new Data { Name = "idnew Data { ", Value = 18},
              new Data { Name = "blurSize", Value = 85},
              new Data { Name = "minOpacity", Value = 50},
              new Data { Name = "maxOpacity", Value = 54},
              new Data { Name = "prevIcon", Value = 12},
              new Data { Name = "children", Value = 21},
              new Data { Name = "shape", Value = 98},
              new Data { Name = "nextIcon", Value = 12},
              new Data { Name = "showNextBtn", Value = 17},
              new Data { Name = "stopIcon", Value = 21},
              new Data { Name = "visibleMin", Value = 83},
              new Data { Name = "visualDimension", Value = 97},
              new Data { Name = "colorSaturation", Value = 56},
              new Data { Name = "colorAlpha", Value = 66},
              new Data { Name = "emptyItemWidth", Value = 10},
              new Data { Name = "inactiveOpacity", Value = 4},
              new Data { Name = "activeOpacity", Value = 4},
              new Data { Name = "showPrevBtn", Value = 19},
              new Data { Name = "playIcon", Value = 26},
              new Data { Name = "ellipsis", Value = 19},
              new Data { Name = "gapWidth", Value = 19},
              new Data { Name = "borderColorSaturation", Value = 10},
              new Data { Name = "handleIcon", Value = 2},
              new Data { Name = "handleStyle", Value = 6},
              new Data { Name = "borderType", Value = 1},
              new Data { Name = "constantSpeed", Value = 1},
              new Data { Name = "polyline", Value = 2},
              new Data { Name = "blendMode", Value = 1},
              new Data { Name = "dataBackground", Value = 1},
              new Data { Name = "textAlign", Value = 1},
              new Data { Name = "textBaseline", Value = 1},
              new Data { Name = "brush", Value = 3 }
            };

            ViewData["data1"] = data1;

            return View("");
        }
    }
}