Demo - FlexChart

by Ashwin Saxena

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div id="theChart">
</div>

CSS

body {
    margin: 40px;
}

.wj-flexchart {
    height: 300px;
}

JavaScript

onload = function() {

    // wrap data in a CollectionView so the grid and chart 
    // get notifications
    var data = new wijmo.collections.CollectionView(getData());

    // create the chart
    var theChart = new wijmo.chart.FlexChart('#theChart', {
        itemsSource: data,
        bindingX: 'country',
        series: [{
                binding: 'sales',
                name: 'Sales'
            },
            {
                binding: 'expenses',
                name: 'Expenses'
            },
            {
                binding: 'downloads',
                name: 'Downloads'
            }
        ],
        rendered: function(sender, e) {
            let labels = document.querySelectorAll('.wj-axis-x .wj-label');
            labels.forEach((value, key, parent) => {
                let x = +value.getAttribute('x');
                let y = +value.getAttribute('y');
                let text = value.innerHTML.split('\n');
                value.innerHTML = '';
                text.forEach((item, index) => {
                    let e = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
                    e.setAttribute('x', (x + 50).toString());
                    e.setAttribute('y', (y + 15 * index).toString());
                    e.innerHTML = item;
                    value.appendChild(e);
                });
            });
        },
        plotMargin: 'auto auto 100 auto'
    });

    theChart.axisX.labelAngle = 0;
    theChart.axisX.overlappingLabels = wijmo.chart.OverlappingLabels.Show;


    // create some random data
    function getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i] + "Long\nLongLong\nLong",
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000,
                downloads: Math.round(Math.random() * 20000),
  ...