18 Replies Latest reply on Jan 23, 2017 1:57 AM by thanh

    Coresight extensibility and Highcharts gauges

    bnewby

      Hi All,

       

      I'm attempting to get Highcharts gauges to work.  I see the gauge but no needle or data/update. Not sure what i'm missing.  I've looked at the timeserieschart and that works fine. Any help would be much appreciated.

       

      Thanks

      Brett

        • Re: Coresight extensibility and Highcharts gauges
          jyi

          Hi Brett,

           

          Are you referencing this GitHub repository? If you have not already, i highly recommend to take a look at them.

          PI-Coresight-Custom-Symbols/tutorials/timeserieschart at master · osisoft/PI-Coresight-Custom-Symbols · GitHub

          Meanwhile, do you get any error messages? from Coresight or within PI Data archive? More information would be definitely helpful here!

          1 of 1 people found this helpful
          • Re: Coresight extensibility and Highcharts gauges
            bnewby

            Hi folks,

             

            I have all the Github, as mentioned timeserieschart in my original post. also the Webinar. The issue i'm having is past that. The gauges are not updating. Can I post the js here?

            • Re: Coresight extensibility and Highcharts gauges
              bnewby

              If you have the timeserieschart running already, all you need is this js and html:

               

              html

              <div id="container" style="width:100%;height:100%"></div>
              

               

              js

               

              (function (CS) {
                  'use strict';
              
              
                  var def = {
                      typeName: 'gaugechart',
                      datasourceBehavior: CS.DatasourceBehaviors.Single,
                      getDefaultConfig: function () {
                          return {
                              DataShape: 'Value',
                              Interval: 400,
                              Height: 200,
                              Width: 200
                          };
                      },       
                      init: init
                  };
              
              
                  function init(scope, elem) {
                      var container = elem.find('#container')[0];
                      var id = "gauge_" + Math.random().toString(36).substr(2, 16);
                      container.id = id;
              
              
                     
                      var chart;
                      function dataUpdate(data) {
                          if(data) {
              
              
                              console.log(id, data.Value, data.Label);
                              var series = data.Value; 
              
                              if(!chart) {
              
              
                                  chart = new Highcharts.Chart({
                                      chart: {
                                          type: 'gauge',
                                          renderTo: id,
                                          plotBackgroundColor: null,
                                          plotBackgroundImage: null,
                                          plotBorderWidth: 0,
                                          plotShadow: false
                                        
                                      },
                                  title: {
                                          text: ''
                                  },
              
              
              
              
                                  pane: {
                                          startAngle: -150,
                                          endAngle: 150,
                                          background: [{
                                              backgroundColor: {
                                                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                  stops: [
                                                      [0, '#FFF'],
                                                      [1, '#333']
                                                  ]
                                              },
                                              borderWidth: 0,
                                              outerRadius: '109%'
                                          }, {
                                              backgroundColor: {
                                                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                  stops: [
                                                      [0, '#333'],
                                                      [1, '#FFF']
                                                  ]
                                              },
                                              borderWidth: 1,
                                              outerRadius: '107%'
                                          }, {
                                              // default background
                                          }, {
                                              backgroundColor: '#DDD',
                                              borderWidth: 0,
                                              outerRadius: '105%',
                                              innerRadius: '103%'
                                          }]
                                  },
                                  plotOptions: {
                                          gauge: {
                                              dial: {
                                                      radius: '100%',
                                                      backgroundColor: 'silver',
                                                      borderColor: 'black',
                                                      borderWidth: 1,
                                                      baseWidth: 10,
                                                      topWidth: 1,
                                                      baseLength: '90%', // of radius
                                                      rearLength: '50%'
                                              }
                                          }
                                  },
                                  // the value axis
                                  yAxis: {
                                          min: 0,
                                          max: 200,
              
              
                                          minorTickInterval: 'auto',
                                          minorTickWidth: 1,
                                          minorTickLength: 10,
                                          minorTickPosition: 'inside',
                                          minorTickColor: '#666',
              
              
                                          tickPixelInterval: 30,
                                          tickWidth: 2,
                                          tickPosition: 'inside',
                                          tickLength: 10,
                                          tickColor: '#666',
                                          labels: {
                                          step: 2,
                                          rotation: 'auto'
                                          },
                                      title: {
                                              text: 'km/h'
                                      },
                                      plotBands: [{
                                          from: 0,
                                          to: 120,
                                          color: '#55BF3B' // green
                                      }, {
                                          from: 120,
                                          to: 160,
                                          color: '#DDDF0D' // yellow
                                      }, {
                                          from: 160,
                                          to: 200,
                                          color: '#DF5353' // red
                                      }]
                                  },
              
              
                                  series: series //[{
                                  //name: 'Speed',
                                  //data: [80],
                                  //tooltip: {
                                  //    valueSuffix: ' km/h'
                                  //}
                                  //}]
                              });
                              //var options = {
                              //    width: 400, height: 120,
                              //    redFrom: 90, redTo: 100,
                              //    yellowFrom: 75, yellowTo: 90,
                              //    minorTicks: 5
                              //};
                              //chart.draw(data, options);
                              //chart.setData(data);
                              //setInterval(function () {
                              //    data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
                              //    chart.draw(data, options);
                              //}, 5000);
                          }       
                         
              
              
                      }
                  }
              
              
                  function resize(width, height) {
                      if(chart) {
                          chart.setSize(width, height);
                      }
                  }
              
              
                  return { dataUpdate: dataUpdate, resize: resize };
              }   
              
              
                  CS.symbolCatalog.register(def);
              
              
              }(window.Coresight));
              
              • Re: Coresight extensibility and Highcharts gauges
                bpayne

                Hi Brett,

                Are you seeing any messages from Coresight or any other component that would be helpful?

                • Re: Coresight extensibility and Highcharts gauges
                  bnewby

                  This is based on- PI-Coresight-Custom-Symbols/tutorials/timeserieschart at master · osisoft/PI-Coresight-Custom-Symbols · GitHub

                   

                  I have that working fine.  My goal was to just change the chart type to gauge instead if time series.

                  • Re: Coresight extensibility and Highcharts gauges
                    jgolla

                    I think the main issue is that the gauge from highcharts is slightly different than how their trend works.

                     

                    The two things that need to be changed are your series configuration of the Highchart and your data update if the chart has already been created.

                     

                    Series update:

                    series: [{
                      name: '',  
                      data: [+data.Value]                       
                    }]

                    If the chart exists:

                    var point = chart.series[0].points[0];
                    point.update(+data.Value);
                    

                     

                    Here is the full code:

                    (function (CS) {
                        //'use strict';
                    
                    
                        var def = {
                            typeName: 'gaugechart',
                            datasourceBehavior: CS.DatasourceBehaviors.Single,
                            getDefaultConfig: function () {
                                return {
                                    DataShape: 'Value',
                                    Interval: 400,
                                    Height: 200,
                                    Width: 200
                                };
                            },     
                            init: init
                        };
                    
                    
                        function init(scope, elem) {
                            var container = elem.find('#container')[0];
                            var id = "gauge_" + Math.random().toString(36).substr(2, 16);
                            container.id = id;
                    
                    
                            var chart;
                            function dataUpdate(data) {
                                if(data) {
                    
                    
                                    console.log(id, data.Value, data.Label);
                                                                             
                                    if(!chart) {
                    
                    
                                        chart = new Highcharts.Chart({
                                            chart: {
                                                type: 'gauge',
                                                renderTo: id,
                                                plotBackgroundColor: null,
                                                plotBackgroundImage: null,
                                                plotBorderWidth: 0,
                                                plotShadow: false
                                             
                                            },
                                        title: {
                                                text: ''
                                        },
                    
                    
                    
                    
                                        pane: {
                                                startAngle: -150,
                                                endAngle: 150,
                                                background: [{
                                                    backgroundColor: {
                                                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                        stops: [
                                                            [0, '#FFF'],
                                                            [1, '#333']
                                                        ]
                                                    },
                                                    borderWidth: 0,
                                                    outerRadius: '109%'
                                                }, {
                                                    backgroundColor: {
                                                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                        stops: [
                                                            [0, '#333'],
                                                            [1, '#FFF']
                                                        ]
                                                    },
                                                    borderWidth: 1,
                                                    outerRadius: '107%'
                                                }, {
                                                    // default background
                                                }, {
                                                    backgroundColor: '#DDD',
                                                    borderWidth: 0,
                                                    outerRadius: '105%',
                                                    innerRadius: '103%'
                                                }]
                                        },
                                        plotOptions: {
                                                gauge: {
                                                    dial: {
                                                            radius: '100%',
                                                            backgroundColor: 'silver',
                                                            borderColor: 'black',
                                                            borderWidth: 1,
                                                            baseWidth: 10,
                                                            topWidth: 1,
                                                            baseLength: '90%', // of radius
                                                            rearLength: '50%'
                                                    }
                                                }
                                        },
                                        // the value axis
                                      yAxis: {
                                                min: 0,
                                                max: 200,
                    
                    
                                                minorTickInterval: 'auto',
                                                minorTickWidth: 1,
                                                minorTickLength: 10,
                                                minorTickPosition: 'inside',
                                                minorTickColor: '#666',
                    
                    
                                                tickPixelInterval: 30,
                                                tickWidth: 2,
                                                tickPosition: 'inside',
                                                tickLength: 10,
                                                tickColor: '#666',
                                                labels: {
                                                step: 2,
                                                rotation: 'auto'
                                                },
                                            title: {
                                                    text: 'km/h'
                                            },
                                            plotBands: [{
                                                from: 0,
                                                to: 120,
                                                color: '#55BF3B' // green
                                            }, {
                                                from: 120,
                                                to: 160,
                                                color: '#DDDF0D' // yellow
                                            }, {
                                                from: 160,
                                                to: 200,
                                                color: '#DF5353' // red
                                            }]
                                        },
                    
                    
                                        series: [{
                                            name: '',
                                            data: [+data.Value]                     
                                        }]
                                    });
                                } else {
                                    var point = chart.series[0].points[0];
                                    point.update(+data.Value);
                                }
                            }
                        }
                    
                    
                        function resize(width, height) {
                            if(chart) {
                                chart.setSize(width, height);
                            }
                        }
                    
                    
                        return { dataUpdate: dataUpdate, resize: resize };
                    } 
                    
                    
                        CS.symbolCatalog.register(def);
                    
                    
                    }(window.Coresight));
                    
                    2 of 2 people found this helpful
                    • Re: Coresight extensibility and Highcharts gauges
                      bnewby

                      Update -- fixed most of the issues. Still looking to add configuration to the Highcharts symbols. Thanks to Jason Golla at JGolla@osisoft.com for his help with UOM and other issues....Thanks man!

                       

                      • Re: Coresight extensibility and Highcharts gauges
                        ksward

                        I implemented the code for the timeseries and found that I am getting the error; missing angular.js

                        • Re: Coresight extensibility and Highcharts gauges
                          bnewby

                          I added the configuration for the Highcharts symbols. Looks great. Just so everyone knows you will have to pay for a Highcharts license.

                          • Re: Coresight extensibility and Highcharts gauges
                            ksward

                            Has OSISoft thought of partnering with Highcharts and including the license fee within the cost of Coresight as an uplift?  I am not a developer, don't have time, but I need well developed, feature rich, visualization tools.

                            • Re: Coresight extensibility and Highcharts gauges
                              thanh

                              Hello Everyone,

                               

                              I tried to implement Jason's .js script for the gauge symbol (after changing the data source behaviour to CS.Extensibility.Enums.DatasourceBehaviors.Single and adding the highcharts-more.js library).

                               

                              However, in Coresight, the symbol would not show up (see attachment).

                               

                              I am new to working with javascript so any help why this is happening is appreciated. highcharts-gauge.png