Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Spread.ViewsとRaspberry Pi+ESP32搭載ボードNefry BTでインフルエンザ対策のBIツールを作る

IoT時代の救世主! SpreadJSで作るデータ可視化アプリ 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

Spread.Viewsのコードをホスティング

 index.htmlを以下に書き換えます。パスを少し編集した程度で基本はサンプルコードのままです。

index.html
<!doctype html>
<html style="height:100%;font-size:14px;">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/gc.spread.views.dataview.10.3.0.css">
    <script src="js/gc.spread.common.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.views.dataview.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.views.dataview.locale.ja-JP.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.views.gridlayout.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.views.sparkline.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/license.js" type="text/javascript"></script>
    <script src="js/sales_details_data.js" type="text/javascript"></script>
    <style>
        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>

<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;overflow:hidden;">
    <div id="grid1" style="height:100%"></div>
    <script type="text/javascript">
        var standard = 3000;

        function renderWinlosssparkline(data, container) {
            var newData = [];
            newData.push(
                data.may - standard,
                data.june - standard,
                data.july - standard,
                data.aug - standard,
                data.sept - standard,
                data.oct - standard
            );
            var winlossSparkline = new GC.Spread.Views.Plugins.Sparkline.WinlossSparkline({
                values: newData,
                setting: {
                    axisColor: '#0C0A3E',
                    markersColor: '#FED766',
                    negativeColor: '#FED766',
                    seriesColor: '#995D81',
                    displayXAxis: true,
                    showFirst: true,
                    showHigh: true,
                    showLast: true,
                    showLow: true,
                    showNegative: true,
                    showMarkers: true
                }
            });
            winlossSparkline.paint(container);
        }

        var lineSparklineSetting = {
            highMarkerColor: '#995D81',
            lowMarkerColor: '#FED766',
            markersColor: 'black',
            seriesColor: '#009FB7',
            showMarkers: true,
            showHigh: true,
            showLow: true,
            lineWeight: 2,
            minAxisType: 2,
            maxAxisType: 2,
            manualMax: 25000,
            manualMin: 0
        };
        var columnSparklineSettings = {
            highMarkerColor: '#995D81',
            lowMarkerColor: '#FED766',
            markersColor: 'black',
            seriesColor: '#009FB7',
            showMarkers: true,
            showHigh: true,
            showLow: true,
            minAxisType: 2,
            maxAxisType: 2,
            manualMax: 25000,
            manualMin: 0
        };
        var lineSparklineFormula = '=LINESPARKLINE("may,june,july,aug,sept,oct", "", "' + JSON.stringify(lineSparklineSetting).replace(/\"/g, '') + '")';
        var columnSparklineFormula = '=COLUMNSPARKLINE("may,june,july,aug,sept,oct", "", "' + JSON.stringify(columnSparklineSettings).replace(/\"/g, '') + '")';
        var smallDevice = screen.width <= 480;
        var colWidthSmall = smallDevice ? 125 : '*';
        var colWidthLarge = smallDevice ? 125 : '2*';

        var columns = [{
            id: 'salesPerson',
            caption: 'Sales Person',
            dataField: 'Salesperson',
            width: colWidthSmall
        }, {
            id: 'may',
            caption: 'May',
            dataField: 'May',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'june',
            caption: 'June',
            dataField: 'June',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'july',
            caption: 'July',
            dataField: 'July',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'aug',
            caption: 'Aug.',
            dataField: 'Aug',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'sept',
            caption: 'Sept.',
            dataField: 'Sept',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'oct',
            caption: 'Oct.',
            dataField: 'Oct',
            dataType: 'number',
            format: '$#,##'
        }, {
            id: 'trend',
            caption: 'LineSparkline',
            width: colWidthLarge,
            dataField: lineSparklineFormula
        }, {
            id: 'sales',
            caption: 'ColumnSparkline',
            width: colWidthLarge,
            dataField: columnSparklineFormula,
            visible: !smallDevice
        }, {
            id: 'winloss',
            caption: 'WinlossSparkline',
            width: colWidthLarge,
            asyncRender: renderWinlosssparkline,
            visible: !smallDevice
        }, ];

        dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns,
            new GC.Spread.Views.Plugins.GridLayout({
                rowHeight: 32,
                allowAsyncRender: isTouchDevice()
            }));

        function isTouchDevice() {
            return window.PointerEvent || window.MSPointerEvent || ('ontouchstart' in document.documentElement);
        }

        //focus data.view by default
        document.querySelector('#grid1').focus();
    </script>
</body>

</html>

 利用するJSファイルとCSSファイルをpublic/jspublic/cssに設置します。

 ファイルは以下となっています。

  • gc.spread.views.dataview.10.3.0.css
  • gc.spread.common.10.3.0.min.js
  • gc.spread.views.dataview.10.3.0.min.js
  • gc.spread.views.dataview.locale.ja-JP.10.3.0.min.js
  • gc.spread.views.gridlayout.10.3.0.min.js
  • gc.spread.views.sparkline.10.3.0.min.js
  • license.js
  • sales_details_data.js

 あらかじめ前回までの記事を参考に、Spread.Viwsのファイルをダウンロードしておきましょう。

 先ほどと同様にhttp://localhost:3000にアクセスすると、表とグラフが表示されます。

 サンプルが優秀でコピペだけでできてしまいましたね。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 菅原のびすけ(dotstudio株式会社)(スガワラ ノビスケ)

     日本最大規模のIoTコミュニティ「IoTLT」主催。岩手県立大学大学院ソフトウェア情報学研究科を卒業後、株式会社LIGでWebエンジニアとして入社し、Web開発に携わる。2016年にdotstudio株式会社を立ち上げ、今はIoT領域を中心に活動している。JavaScript Roboticsコミ...

バックナンバー

連載:IoT時代の救世主! SpreadJSで作るデータ可視化アプリ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5