AnyChart AnyChart Los gráficos de JavaScript están diseñados para su fácil integración

                     anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples/sparkline-charts/column-chart/data.json
    anychart.data.loadJsonFile('https://cdn.anychart.com/samples/sparkline-charts/column-chart/data.json', function (data) {
        // set of colors and fonts used in this demo
        var fontFamilyText = "'Verdana', Helvetica, Arial, sans-serif";
        var headerFontColor = '#545f69';
        var borderColor = '#CECECE';

        // create table for sparkline charts layout
        var table = anychart.standalones.table();
        // set table size settings
        table.bounds('5%', '20px', '90%', '90%');

        // set table contents (sparkline charts and text)
        table.contents([
            ['Region', 'Actual Sales (mn)', null, null, '% to\nGoal', '12 Month', null, 'Gross\nMargin', 'Profit Trend\n12 Month'],
            ['Alabama', '$4,916', createLine(data['alabama'], 'actualSales'), null, '107%', createColumn(data['alabama'], 'toGoal'), null, '$1,172', createColumn(data['alabama'], 'profitTrend')],
            ['Alaska', '$3,916', createLine(data['alaska'], 'actualSales'), null, '65%', createColumn(data['alaska'], 'toGoal'), null, '-$791', createColumn(data['alaska'], 'profitTrend')],
            ['Arizona', '$4,916', createLine(data['arizona'], 'actualSales'), null, '103%', createColumn(data['arizona'], 'toGoal'), null, '$1,010', createColumn(data['arizona'], 'profitTrend')],
            ['Idaho', '$5,916', createLine(data['idaho'], 'actualSales'), null, '101%', createColumn(data['idaho'], 'toGoal'), null, '$1,030', createColumn(data['idaho'], 'profitTrend')],
            ['Illinois', '$4,916', createLine(data['illinois'], 'actualSales'), null, '92%', createColumn(data['illinois'], 'toGoal'), null, '-$90', createColumn(data['illinois'], 'profitTrend')],
            ['Indiana', '$5,916', createLine(data['indiana'], 'actualSales'), null, '89%', createColumn(data['indiana'], 'toGoal'), null, '-$139', createColumn(data['indiana'], 'profitTrend')],
            ['Ohio', '$5,916', createLine(data['ohio'], 'actualSales'), null, '113%', createColumn(data['ohio'], 'toGoal'), null, '$1,196', createColumn(data['ohio'], 'profitTrend')],
            ['Oklahoma', '$4,916', createLine(data['oklahoma'], 'actualSales'), null, '81%', createColumn(data['oklahoma'], 'toGoal'), null, '-$127', createColumn(data['oklahoma'], 'profitTrend')],
            ['Oregon', '$6,916', createLine(data['oregon'], 'actualSales'), null, '92%', createColumn(data['oregon'], 'toGoal'), null, '-$16', createColumn(data['oregon'], 'profitTrend')],
            ['Vermont', '$4,916', createLine(data['vermont'], 'actualSales'), null, '118%', createColumn(data['vermont'], 'toGoal'), null, '$1,240', createColumn(data['vermont'], 'profitTrend')],
            ['Virginia', '$7,916', createLine(data['virginia'], 'actualSales'), null, '192%', createColumn(data['virginia'], 'toGoal'), null, '$4,172', createColumn(data['virginia'], 'profitTrend')],
            ['Washington', '$5,916', createLine(data['washington'], 'actualSales'), null, '69%', createColumn(data['washington'], 'toGoal'), null, '-$390', createColumn(data['washington'], 'profitTrend')]
        ]);

        // span [0,1] and [0,2] cell
        table.getCell(0, 1).colSpan(2);
        // disable borders for all cells in the table
        table.cellBorder(null);
        // set dashed bottom border for all cells in the table
        table.cellBorder().bottom({color: borderColor, dash: '1 1'});

        // set default text settings for the table
        table.hAlign('center')
                .vAlign('middle')
                .fontSize('12px')
                .fontFamily(fontFamilyText);

        // set fixed height for the first row
        table.getRow(0).height(40).fontColor(headerFontColor);

        // set fixed width for some of the tables columns
        table.getCol(0).width(90).hAlign('left');
        table.getCol(1).width(65);
        table.getCol(3).width(20).cellBorder().bottom('none');
        table.getCol(4).width(65);
        table.getCol(6).width(20).cellBorder().bottom('none');
        table.getCol(7).width(65);

        // set container id for the table
        table.container('container');
        // draw the table and all elements it contains
        //(you don't need to call the draw method for internal tables and charts)
        table.draw();
    });
});

/**
 * Helper function, creates sparkline chart with Line type using anychart.sparkline method,
 * sets passed data and visual preference.
 * @param {Object.<string, Array>} data Sparkline data.
 * @param {string} field Data field
 * @return {anychart.charts.Sparkline} New sparkline chart with passed data.
 */
function createLine(data, field) {
    var sparkline = anychart.sparkline(data[field]);
    sparkline.seriesType('line');
    sparkline.height('100%');
    sparkline.margin().top('5%');
    sparkline.margin().bottom('5%');
    sparkline.padding(0);
    return sparkline;
}

/**
 * Helper function, creates sparkline chart with Bar type using anychart.sparkline method,
 * sets passed data and visual preference.
 * @param {Object.<string, Array>} data Sparkline data.
 * @param {string} field Data field
 * @return {anychart.charts.Sparkline} New sparkline chart with passed data.
 */
function createColumn(data, field) {
    var sparkline = anychart.sparkline(data[field]);
    sparkline.seriesType('column');
    sparkline.height('100%');
    sparkline.margin().top('5%');
    sparkline.margin().bottom('5%');
    sparkline.padding(0);
    return sparkline;
}