How to build line chart with two values on y axis and sorded X axis acording string

[Tsach_Yanay]

I want to create a line charts for the folowing df:
Scope Bradley Beal Steven Adams
0 120 Days 2229.6 949.9
1 60 Days 2229.6 949.9
2 30 Days 2445.6 897.5
3 14 Days 2087.0 700.3
4 7 Days 2075.0 642.5

X axis will have Scope sorted acording days and Y will have 2 lines of the values accordingly.

cant sort x and y together.
how can i do it?

[andfanilo]

Hello @Tsach_Yanay, welcome to the community!

This looks more of an Altair question but let me get you started with this snippet :

import altair as alt
import pandas as pd
import streamlit as st

df = pd.DataFrame(
    {
        'Duration': [f"{d} Days" for d in [120, 60, 30, 14, 7]],
        'Bradley Beal': [10,20,30,40,50],
        'Steven Adams': [30,10,50,90,70]
    },
    columns=['Duration', 'Bradley Beal', 'Steven Adams']
)

st.write(df)

st.markdown("Make a long form dataframe: https://altair-viz.github.io/user_guide/data.html#long-form-vs-wide-form-data")

df = df.melt('Duration', var_name='name', value_name='value')
st.write(df)

chart = alt.Chart(df).mark_line().encode(
  x=alt.X('Duration:N'),
  y=alt.Y('value:Q'),
  color=alt.Color("name:N")
).properties(title="Hello World")
st.altair_chart(chart, use_container_width=True)

• the hard part is the long vs wide format. You’ll need a column where you put the name of the runner so you can use that as input for color for each row. There are tips to transform your dataframe for long format here.
• then you can configure your X/Y/color axis inside the alt.X and alt.Y part for legend, sorting your X axis and scale limits, and title inside the .properties part. Duration:N is a shortcode for use Duration column as a nominal/categorical column (help here).
• Check their examples gallery for more code inspiration ;).

Hope this helps you get started!
Fanilo

[Tsach_Yanay]

@andfanilo

chart = alt.Chart(df).mark_line().encode(
  x=alt.X('Duration:N'),
  y=alt.Y('value:Q'),
  color=alt.Color("name:N")
).properties(title="Hello World")
st.altair_chart(chart, use_container_width=True)

HI Fanilo,
thanks for your help.
but the last issue that I have is the sort the days: