JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="//cdn3.devexpress.com/jslib/13.2.8/js/dx.chartjs.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<div id="chart"></div>

JavaScript

var dataSource = (function () {
    var count = 10;

    return {
        labels: _.map(_.range(0, count), function (i) {
            return {
                name: 'item_number_' + i,
                valueField: 'item_number_' + i
            };
        }),
        data: _.map(_.range(0, 2), function (i) {
            return _.reduce(_.range(0, count), function (acc, next) {
                acc['item_number_' + next] = next;
                return acc;
            }, {
                index: i
            });
        })
    };
}()),
    labels = dataSource.labels,
    data = dataSource.data;
console.log(dataSource);

$(function () {
    $("#chart").dxChart({
        dataSource: data,
        commonSeriesSettings: {
            argumentField: "index"
        },
        series: labels,
        argumentAxis: {
            grid: {
                visible: true
            }
        },
        tooltip: {
            enabled: true
        },
        title: "Observable notifications over time",
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center"
        },
        commonPaneSettings: {
            border: {
                visible: true,
                right: false
            }
        }
    });
});