mjarvis

C# Displaying a simple trend using the PI Web API

Discussion created by mjarvis Employee on Aug 4, 2014
Latest reply on Aug 6, 2015 by Eugene Lee

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

 

 

Outcomes