Wijmo 5 - Creating Controls

by warren guo

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<h1>Creating Wijmo 5 Controls</h1>

<p>This is a <b>FlexGrid</b> control:</p>
<div id="theGrid" style="width:100%;height:auto;"></div>

<p>And this is a <b>FlexChart</b> control showing the same data:</p>
<div id="theChart" style="width:100%;height:350px;"></div>

<p>That's it for now...</p>

JavaScript

$(document).ready(function () {

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

    // wrap data in a CollectionView to get updates
    // (so editing the grid updates the chart)
    var view = new wijmo.collections.CollectionView(data);

    // create grid and show data
    var grid = new wijmo.grid.FlexGrid('#theGrid');
    grid.itemsSource = view;

    // create a chart and show the same data    
    var chart = new wijmo.chart.FlexChart('#theChart');
    chart.initialize({
        itemsSource: view,
        bindingX: 'country',
        series: [{
            name: 'Sales',
            binding: 'sales'
        }, {
            name: 'Expenses',
            binding: 'expenses'
        }, {
            name: 'Downloads',
            binding: 'downloads',
            chartType: wijmo.chart.ChartType.LineSymbols
        }]
    });
});