Google Charts (Vuram) Component

Overview

This component includes seven charts that provide enhanced visualization and understanding of your data.

Google Line Chart - Used to represent the information or data over a continuous span of time.
Google Column Chart - Used to compare a given set of data having different categories.
Google Gauge Chart - Used to represent a single value over a gauge with a dial, the value denoted by a pointer.
Google Trendlines Chart - Used to provide a superimposed representation of data revealing its overall direction.
Google Annotations Chart - Used when you need a time series line chart that supports annotations.
Google Bar Chart - Used for comparison of metric values across different subgroups of your data.
Google Area Chart - Used to visually represent volume while depicting a time-series relationship of date.
Google Table Chart - The visual representation of table data in the chart is created using Google Charts.
Google Stepped Area Chart - A Stepped Area chart in Google Charts displays data as connected steps, emphasizing abrupt changes and providing a clear visual representation of discrete data points over time.
Google Organisation Chart - Org charts are diagrams of a hierarchy of nodes, commonly used to portray superior/subordinate relationships in an organization.

Key Features & Functionality

To use this plug-in:

Use the desired Google Chart component.
Pass the necessary information to the input parameters such as column configuration data and row data as a dictionary format.
Use the chart options parameter to make the necessary changes to your chart axis and text style.
Select the type of the file that you want to export the chart to. Available options are SVG, PNG or PDF.

Parents

Jack Ferguson over 3 years ago

I've run into a couple of issues using the Google Bar Chart Component.

1) The chart doesn't expand horizontally to accommodate for longer labels

2) The chart doesn't expand vertically to accommodate for more bars. Setting the height to "tall" just creates a large amount of white space and the actual chart size remains unchanged.

3) When downloading the chart as a PDF, I get an error when trying to open the PDF

Are these errors in my implementation? I've added the code of my implementation below.

googleBarChartField(
          label: "Google Column Chart",
          labelPosition: "ABOVE",
          validations: {},
          height: "TALL",
          chartColumnData: {
            {
             type: "string",
             id: "FailureMode",
             rowDataKey: "FailureMode"
             },
             {
               type: "number",
               id: "FailureCount",
               rowDataKey: "FailureCount"
             }
            
          },
          chartRowData: {
            {
              FailureMode: "Improper Environmental Control Setup or Flush Failure",
              FailureCount: rule!sam_failure_mode_1(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Equipment Problem (bad bearing, misalignment, excessive pipe strain)",
              FailureCount: rule!sam_failure_mode_2(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Erroneous Installation",
              FailureCount: rule!sam_failure_mode_3(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Improper Equipment Operation (dry run, dead head, ect.)",
              FailureCount: rule!sam_failure_mode_4(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Incorrect Selection of Seal Design or Materials for the Application",
              FailureCount: rule!sam_failure_mode_5(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Contamination of Sealing Fluid with Abrasive or Corrosive Materials",
              FailureCount: rule!sam_failure_mode_6(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Abuse of Seal Components Before Installation",
              FailureCount: rule!sam_failure_mode_7(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Worn Out Seal (seal achieved its normal life expectancy)",
              FailureCount: rule!sam_failure_mode_8(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            },
            {
              FailureMode: "Maintenance Outage for Equipment Repair (Seal did not fail)",
              FailureCount: rule!sam_failure_mode_9(
                ri!Cust_Id,
                ri!Loc_Id,
                ri!StartDate,
                ri!EndDate,
                null
              ).totalCount
            }
          },
          chartOptions: 
          {
            bar: {groupWidth: "95%"}
          },
          chartFilterData: null,
          exportChartType: "PDF",
          exportChartValue: ri!DownloadImage,
          exportChartSaveInto: ri!ChartImage,
          onSelection: null,
          onFilterRangeSelection: null
        )
      }
    )

Comment