Inverting x axis on line chart component

Certified Associate Developer

I'm creating a line chart where I want to display a sum of transaction amounts per last 6 months. 

The expression for the linechart component is the following:

a!lineChartField(
  data: 'recordType!{2e778cbc-bcd7-48a6-bda3-2f52ac5e15d0}W0592PF Transaction',
  config: a!lineChartConfig(
    primaryGrouping: a!grouping(
      field: 'recordType!{2e778cbc-bcd7-48a6-bda3-2f52ac5e15d0}W0592PF Transaction.fields.{012826cc-c147-43c8-8171-e9c1cc8990bd}date',
      alias: "date_month_primaryGrouping",
      interval: "MONTH_SHORT_TEXT"
    ),
    measures: {
      a!measure(
        function: "SUM",
        field: 'recordType!{2e778cbc-bcd7-48a6-bda3-2f52ac5e15d0}W0592PF Transaction.fields.{53db9671-69f5-4d88-b573-89f591e99754}amount',
        alias: "amount_sum_measure1",
        formatValue: "DOLLAR"
      )
    },
    sort: {
      a!sortInfo(
        field: "date_month_primaryGrouping",
        ascending: false
      )
    },
    dataLimit: 6,
    showIntervalsWithNoData: false
  ),
  label: "Line Chart",
  labelPosition: "ABOVE",
  xAxisTitle: "Month",
  yAxisTitle: "Amount spent",
  showLegend: false,
  showTooltips: true,
  allowImageDownload: true,
  colorScheme: "RAINFOREST",
  height: "MEDIUM",
  xAxisStyle: "STANDARD",
  yAxisStyle: "STANDARD",
  refreshAfter: "RECORD_ACTION"
)

What I keep seeing is that if I sort the data on descending (which is what I need since I want to show the LAST 6 months) is that the chart will show the months going from right to left, and I would want them to show from left to right which would be easier for a user to read. 

Here's the generated chart: 

Sorting in the ascending order changes the orientation but since I'm limiting the data to 6 rows it's not working correctly (it will cut off any months that come after the 6th one). 

I'm guessing that there is some way to invert the X axis which would probably be the easiest solution to achieve this but I cannot seem to find how to do that. 

Any suggestions? 

Thanks. 

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Associate Developer

    I am not sure whether you can fix this with the Record type or not. Other members can help.

    However, you can try with a custom query. See the sample code for reference:

    a!localVariables(
      local!data: a!queryRecordType(
        recordType: 'recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course',
        fields: {},
        pagingInfo: a!pagingInfo(
          startIndex: 1,
          batchSize: 6,
          sort: a!sortInfo(field: 'recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{1e27585b-2faa-44f3-be46-2507e0d2fc88}createdOn', ascending: true),
        )
      ).data,
      a!lineChartField(
        categories: text((local!data['recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{1e27585b-2faa-44f3-be46-2507e0d2fc88}createdOn']), "MMMM"),
        series: {
          a!chartSeries(label: "Transactions", data: local!data['recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{c8b37fe2-de65-4251-98fc-7d21a978c21d}id'])
        },
        label: "Line Chart",
        labelPosition: "ABOVE",
        xAxisTitle: "Month",
        yAxisTitle: "Amount spent",
        showLegend: false(),
        showTooltips: true,
        allowImageDownload: true,
        colorScheme: "RAINFOREST",
        height: "MEDIUM",
        xAxisStyle: "STANDARD",
        yAxisStyle: "STANDARD",
        refreshAfter: "RECORD_ACTION"
      )  
    )
    

Reply
  • 0
    Certified Associate Developer

    I am not sure whether you can fix this with the Record type or not. Other members can help.

    However, you can try with a custom query. See the sample code for reference:

    a!localVariables(
      local!data: a!queryRecordType(
        recordType: 'recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course',
        fields: {},
        pagingInfo: a!pagingInfo(
          startIndex: 1,
          batchSize: 6,
          sort: a!sortInfo(field: 'recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{1e27585b-2faa-44f3-be46-2507e0d2fc88}createdOn', ascending: true),
        )
      ).data,
      a!lineChartField(
        categories: text((local!data['recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{1e27585b-2faa-44f3-be46-2507e0d2fc88}createdOn']), "MMMM"),
        series: {
          a!chartSeries(label: "Transactions", data: local!data['recordType!{098777fc-c21b-4c7d-8d7a-b07371616f47}YD Course.fields.{c8b37fe2-de65-4251-98fc-7d21a978c21d}id'])
        },
        label: "Line Chart",
        labelPosition: "ABOVE",
        xAxisTitle: "Month",
        yAxisTitle: "Amount spent",
        showLegend: false(),
        showTooltips: true,
        allowImageDownload: true,
        colorScheme: "RAINFOREST",
        height: "MEDIUM",
        xAxisStyle: "STANDARD",
        yAxisStyle: "STANDARD",
        refreshAfter: "RECORD_ACTION"
      )  
    )
    

Children
No Data