/CWC-Area-Chart

Area chart based on Apexcharts.js as custom web control for WinCC Unified

Primary LanguageCSS

Area chart CWC made for WinCC Unified

Icon

1. CONTENT

HTML area chart element done with ApexChart

2. INTERFACE

  • X_axis : Array of element to draw the X axis of the chart
    // Example
    X_axis: [["2024-04-30 09:28:41", "2024-04-30 09:35:42", "2024-04-30 09:36:43", "2024-04-30 09:37:44", "2024-04-30 09:38:45", "2024-04-30 09:38:55"]]
  • Y_axis : Array of element to draw the Y axis of the chart
    // Example
    Y_axis: [["390.00", "375.00", "380.00", "385.00", "390.00", "395.00"]]
  • DataName : Array of strings with the name for each series
    // Example
    DataName: ["Max °C"]

  • X_axisname : Name of the X axis (i.e. "Days")

  • Y_axisname : Name of the Y axis (i.e. "Temperatures")

  • SeriesColor : Array of string with the color in Hex format for each series

    // Example
    SeriesColor: ["#ee730d","#1183e8"]

  • SeriesLabels : Flag to hide or show (False / True) the labels on the series (i.e. true)

  • ShowLine : Flag to hide or show (False / True) the line on the series (i.e. true)

  • X_ToolTipFormat : Format of the Date and time tool tooltip for X axes, used only when "XAxisType" = Datetime (i.e. "dd/MM/yyyy HH:mm:fff")

  • Y_AxisMIN : Minimum value for the Y axis, if 0 (zero) the chart will automatically adjust the value (i.e. -20)

  • Y_AxisMAX : Maximum value for the Y axis, if 0 (zero) the chart will automatically adjust the value (i.e. 500)

  • LineType : Draw smooth lines or straight lines (i.e. "Smooth")

  • XAxisType : Type of data to show on the X axis (Category / Datetime / Numeric) (i.e. "Datetime")

  • ChartType : Type of chart to draw (Line / Area / Bar) (i.e. "Area")

3. EVENTS

  • //

4. METODS

  • Render : Once all the data in the "INTERFACE" section has been filled in, to make the graph visible you need to use the Render() method
    // Example in WinCC Unified
    Screen.FindItem('NAME_OF_YOUR_CHART').Render();

4. USAGE

  • OFFLINE MODE

    • You can test the behavior of the chart with custom data by setting "production" to false
    • Now you can change all the data from "WebCC.Properties"
    var production = false;
//...
    WebCC.Properties = {
      X_axis: [["2024-05-08 08:35:53.364", "2024-05-08 08:35:53.848", "2024-05-08 08:35:54.349"], ["2024-05-08 08:35:53.364", "2024-05-08 08:35:53.848", "2024-05-08 08:35:54.349"]],
      Y_axis: [["590.00", "592.00", "594.00"], ["550.00", "550.00", "550.00"]],
      DataName: ["Temperature act", "Temperature SP."],
      X_axisname: 'Time',
      Y_axisname: 'Kw',
      SeriesColor: ["#EE730D"],
      SeriesLabels: false,
      ShowLine: true,
      X_ToolTipFormat: 'dd/MM/yyyy HH:mm:fff',
      Y_AxisMIN: 0,
      Y_AxisMAX: 0,
      LineType: 'Straight',
      XAxisType: 'DateTime',
      ChartType: 'Line'
};

  • ONLINE MODE (WinCC Unfied)

    • Set "production" to true
    var production = true;
    • To import the custom web control the hierarchy of folders and files must be compressed in ZIP format.
    • The name of the ZIP must be the GUID used the "manifest.json" file surrounded by curly brackets
      type": "guid://4703190B-4D05-4F16-B52C-B4E3B46092C2",

    • {4703190B-4D05-4F16-B52C-B4E3B46092C2}.zip (Download Zip file)

    • If you want this custom web control available for all your project, copy this file in the folder :

      • C:\Program Files\Siemens\Automation\Portal V17\Data\Hmi\CustomControls
      • replace "Portal V17" with your Tia version.

    • If you want to use this custom web control only in one project copy this file in the folder :

      • \path_to_tia_project\UserFiles

    • Refresh "My controls" to update the files in TIA Portal

    • Now you can place the custom web control in the Screen.

      My controls