Highcharts data fetching

Question & Answer
, , , , , ,
1

Hello Team,

my datasets containing these fields end date, total amount, outstanding amount, credit amount, payment amount and Age bucket -(having categorical values of 0-30,30-60,60-90).

In Excel I have created the GROUP & STACKED BAR Graph Chart given below, in which In x axis it is group by End date (Month wise) and Age bucket with different stacked Values representing amounts.

image
image916×452 43.6 KB

Clearly If I am trying to create same Graph in QuickSight It is not possible as it is saying So many Fields for Grouping.

image
image1057×526 66 KB

So, As an Alternative option I am Exploring Highcharts to create such complicated charts.

image
image1363×536 55.8 KB

Code Block for High Chart

{
  "chart": {
    "type": "column"
  },
  "title": {
    "text": ""
  },
  "xAxis": {
      "type": "datetime",
      "categories":["getColumn",0],
      "dateTimeLabelFormats":{ "month": "%b %Y" }

    },
    "yAxis": {
      "min": 0,
      "title": {
        "text": "Amount ($)"
      }
    },
    "tooltip": {
      "headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
      "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>",
      "footerFormat": "</table>",
      "shared": true,
      "useHTML": true
    },
    "plotOptions": {
      "column": {
        "borderWidth": 0,
        "grouping": true,
        "shadow": false
      }
    },
    "series": 
    [
      {
        "type": "column",
        "name": "Patient AR",
        "color": "rgba(124,181,236,1)",
        "data": ["getColumnFromValue", 0],
        "pointPadding": 0.01,
        "pointPlacement": 0.0
      },
      {
        "type": "column",
        "name": "Insurance AR",
        "color": "rgba(100,100,236,1)",
        "data": ["getColumnFromValue", 1],
        "pointPadding": 0.01,
        "pointPlacement": 0.0
      },
      {
        "type": "column",
        "name": "Patient Credit AR",
        "color": "rgba(200,100,0,1)",
        "data": ["getColumnFromValue", 2],
        "pointPadding": 0.01,
        "pointPlacement": 0.0
      },
      {
        "type": "column",
        "name": "Insurance Credit AR",
        "color": "rgba(100,100,100,1)",
        "data": ["getColumnFromValue", 3],
        "pointPadding": 0.01,
        "pointPlacement": 0.0
      }
    ]
}

Problem 1 - I am not able to add X axis lable as it showing some time stamp values for that particular month!! How to convert them?
Problem 2 - I want to stack with Age buckets. ?

Please Help me !!!
Thank You

2

@jaikji

Please see if the Small Multiples suggested in the following would work for you. As mentioned, it may not be exactly as you wanted but close

Regards,
Giri

1 Like
3

Hello Giridhar Prabhu,

By using small Multiple It will create the Multiple graphs which is not requirement.

Is there any possibility to create those charts by using HighCharts?

4

hello @jaikji , hope this message finds you well.

for your problem, I think in 2 solutions:

  1. with the stackecd bar chart: It’s possible to agroup you variables in one calculated field? I mean, transforming all this breaks that you want in one variable that can break the total value

  2. with highchart: this second one is more complex, but I found a documentation that do exaclty what you want Create Stacked Columns with Grouping Graph | Highcharts

hope this help you!! let me know if it’s right

5

Hello @lary_andr ,
Thanks for Responding. I am doing Good. I hope you will fine as well.

Solution 1 - I tried it - Vertical Stacked Bar Chart Graph with one Calculated Field but it is showing Counts only Not the sum of Amount which these Categorical Fields holds in the Calculated Fields.
Like this

image
image900×422 34 KB

This Responsibility Type is a categorical field contains two 3 variable.
and Even though If I add one Variable sum in the value and other I will show in the Tool Tip !! but When a person want to export the report they will not get the values of other Variables.

image
image903×420 40.6 KB

Solution - 2
I have already checked those High charts API Graph. But the thing is how to use those script in our code editor of highcharts.
those script language provided in Highcharts are Different(VueJS or ReactJS) but our QS editor Supports only TypeScript JS.
Therefore, those Scripts are throwing lots of error in the Code Editor.

If you have any other Resources Please Let me know.

Thanks and regards
Jai Kumar