14 Replies Latest reply on Aug 6, 2015 12:48 AM by Eugene Lee

    C# Displaying a simple trend using the PI Web API

    mjarvis

      When I was travelling to many customer sites, one of the most common questions I would be asked was "How can I display a trend of this one important tag on our corporate website?"

       

      And their corporate website, is, like, "locked down" and their users are, like, "not computer savvy"

       

      So if your IT Team laughed at installing the PI AF Client on their front end web servers, and you think Aunt Edna would have difficulties navigating through a Silverlight install, read on:

       

       

       

      This simple 60-liner shows how to use a pre-built trending toolkit with the PI Web API. If you want to use your own AF Attribute, you can just replace the current URL with the 'Recorded Values' option of your favorite tag. 

       
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
      using Plotter.Core;
      using Plotter.Helper;
      using System.Net;
      using System.IO;
      using System.Text.RegularExpressions;
      
      
      namespace Trends3Dec2012
      {
          public partial class _Default : System.Web.UI.Page
          {
      
              public System.ComponentModel.BindingList<Curve> PICurves { get; set; }
              public bool IsLoaded { get; private set; }
              public List<Point> Myset = new List<Point>();
      
              protected void Page_Load(object sender, EventArgs e)
              {
                  //csvData will contain the output from the PI Web API webpage
                  string csvData;
                              using (WebClient web = new WebClient())
                  {
                                  //if you would like to actually use this for your system, you could replace the download string with recorded values from any time series attribute
                      csvData = web.DownloadString("https://restdemo.osisoft.int/piwebapi/streams/A0ENxzXSxtlKkGzAhZfHOB-KAtQgjAWpAOkSBb7lXTAYXbA8dP9CE6ADk67vHYL2zHqlwUEhMQUZTMDRcV0lORFRPUElBXFdJTkQgUE9XRVIgR0VORVJBVElPTiBGTEVFVFxCSUcgQlVGRkFMTyBXSU5EIEZBUk1cR0UwMXxPVkVSSEVBVCBBTEFSTQ/recorded");
                                  
                  }
                              //spliting out each individual value
                              string[] OutputArray = csvData.Split('{');
                              foreach (string s in OutputArray)
                              {
                                  //I'm not a fan of the double quote
                              string sNoQuotes= s.Replace("\"", "");
                                  //make sure we are only using lines which have data on them
                                  if (sNoQuotes.StartsWith("Timestamp"))
                                  {
                                      PICurves = new System.ComponentModel.BindingList<Curve>();
                                      {
                                          //regex to get the timestamp and value out into individual variables for plotting
                                      var groups = Regex.Match(sNoQuotes, @"Timestamp:(.+?),Value:(.+?),").Groups;
                                      var TempTimeStamp= groups[1].Value;
                                      var TempValue= groups[2].Value;    
                                          //I'm using a 3rd party plotter here, it is very simple to use, they have many more plot types available
                                          Point MyPoint = new Point(Convert.ToDateTime(TempTimeStamp), Convert.ToSingle(TempValue));
                                          Myset.Add(MyPoint);
                                      };
                                  }
                              }
                  //naming the curve, and giving it to the plotting engine
                  PICurves.Add(new Curve("Overnight HVAC Performance", Myset));
                  Flot1.Curves = PICurves;
              }
          }
      }
      

       The result would look like this:

       

      4035.web-api-trend.png

       

      Full VS2013 project attached