【④Visual StudioでWeb画面の作成】設備データをWebアプリでグラフ化

昨今、製造業では『スマートファクトリー』や『DX』に注目が集まっています。

その一環として、製造工程の設備データ（PLC）を一元管理して、定周期でデータベースに蓄積することがよくあります。

蓄積しただけで活用されないということがないように活用方法の一つを紹介していきます。

今回は以下で紹介している記事の手順④になります。

データベースに蓄積した設備データをWebアプリでグラフ化して共有する方法
データベースに蓄積した設備データをWebアプリでグラフ化して共有する方法
リアルタイムな設備データ（PLC）をどのデバイスからでも見られるようにすることで、現場での分析業務に活かすことができます。

Webページの作成

最初に表示されるページとなるDefault.aspxを修正していきます。

デザインビューはサーバーコントロールをドラッグアンドドロップの操作で追加していくことができます。ソースビューはHTMLマークアップが表示されます。

まずはソースビューで初期のソースを削除しておきます。

デザインビューでツールボックスの標準にあるDropDownListとButtonとデータにあるChartをドラッグアンドドロップしてグラフを表示します。

ソースビューが以下になるように整形して完了です。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <p>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </p>
        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>
</asp:Content>

その他のサーバーコントロール

ドロップダウンリストでテーブル名を選択するコントロールを配置したり、カレンダーでグラフに表示する設備データの期間を指定したりすることができます。

まとめ

馴染みのあるドラッグアンドドロップ操作で数百あるコントロールを利用して、動的な Web サイトを構築することができます。

プロジェクトを作成する
このチュートリアル シリーズでは、ASP.NET 4.5 と Microsoft Visual Studio Express 2013 for We.. を使用して、ASP.NET Web Forms アプリケーションを構築する基本につ…
learn.microsoft.com

ページの見た目が完成した後はイベント処理をDefault.aspx.csに記述していきます。

【⑤Visual StudioとC#でサーバーサイドの実装】設備データをWebアプリでグラフ化

ASP.NET C# Visual Studio