Forum Discussion

JST15's avatar
JST15
Icon for Helper I rankHelper I
1 year ago
Solved

Creating a 3 Axis Line Chart

Hello! In the attached or below, you'll see 3 axis line chart created in excel. It's a line chart using the secondary and then overlapping another line chart on top of that. It works but is a bit slo...
LINE CHARTS
  • lbendlin's avatar
    lbendlin
    1 year ago

    Here's something to get you going.  Still needs coloring, smoothing etc.

     

    The key is the "resolve"  instruction at the bottom.

     

    {
  "data": {
    "name": "dataset"
  },
  "encoding": {
        "x": {
          "field": "PERIOD_YEAR",
          "type": "nominal"
        }
  },
  "layer": [
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "QTY ",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "GM % ",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "GM $/unit ",
          "type": "quantitative",
          "axis": {"offset":50}
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}
JST15's avatar
JST15
Icon for Helper I rankHelper I
1 year ago

Hi Ibendlin- thank you! I havne't heard of Deneb before, though I'm very new to PBI. Below is the table that the graph is build off of. I hope this is in the correct usable format. I've modified the amounts so none is sensitive information. Ideally, the left y-axis shows both "GM%" and "QTY" each as it's own axis scale with GM% as a percentage and QTY as a number, the right secondary axis shows "ASP$" and "GM $/unit", both in dollar. Picture below. I really hope I've supplied enough information. 

 

PERIOD_YEARQTY GM $/unit GM % ASP $
20191,080$6,950.0041.15%$16,650.00
2020950$7,010.0042.00%$16,680.00
20211,145$6,250.0036.50%$17,500.00
20221,050$5,540.0032.22%$17,200.00
2023970$4,680.0026.50%$17,700.00
2024830$4,840.0027.00%$17,800.00

 

 

 

THANK YOU THANK YOU THANK YOU

  • lbendlin's avatar
    lbendlin
    Icon for Super User rankSuper User
    1 year ago

    Here's something to get you going.  Still needs coloring, smoothing etc.

     

    The key is the "resolve"  instruction at the bottom.

     

    {
  "data": {
    "name": "dataset"
  },
  "encoding": {
        "x": {
          "field": "PERIOD_YEAR",
          "type": "nominal"
        }
  },
  "layer": [
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "QTY ",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "GM % ",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "line"
      },
      "encoding": {
        "y": {
          "field": "GM $/unit ",
          "type": "quantitative",
          "axis": {"offset":50}
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}
    • JST15's avatar
      JST15
      Icon for Helper I rankHelper I
      1 year ago

      This is amazing! I've got it working and is great. Thank you for the help and introducing me to Deneb. 

    • JST15's avatar
      JST15
      Icon for Helper I rankHelper I
      1 year ago

      Sorry, I'm stuck again. 

       

      The intervals ticks for my right side y-axis are using the exact value rather than round whole values intervals like the x-axis. This is causing my the two lines I'm expecting for the right side y-axis to merge into one. I tried changing my formats but it isn't working. I also tried reading the vega light documentation but couldn't figure it out. Do you know how to change this so my right side y-axis uses round whole values rather than the exact? Below is the code I'm using as well. Thank you!!!

       

       

       

      {
        "data": {"name": "dataset"},
        "encoding": {
              "x": {
                "field": "PERIOD_YEAR",
                "type": "nominal"
                }
        },
      "layer": [
          {
            "mark": {
              "type": "line"
            },
            "encoding": {
                "y":{
                  "field": "QTY",
                  "type": "quantitative"
              }
            }
          },
        {
            "mark": {
              "type": "line"
            },
            "encoding": {
              "y":{
                "field": "GM%_Less LC__formatted",
                "sort":"-y"
              }
            }
          },
      {
        "mark": {
          "type": "line"
      },
      "encoding": {
        "y": {
          "field": "GM $/unit_Less LC__formatted",
          "sort":"-y",
          "axis": {"offset":70}
        }
      }
      }
      ],
      "resolve": {"scale": {"y":"independent"}}
      }
      • lbendlin's avatar
        lbendlin
        Icon for Super User rankSuper User
        1 year ago

        Not sure what your concern is. Do you want to manually provide the values for the tick marks?

         

        Axis | Vega-Lite