Plot timestamp in x-axis

Using Streamlit
1

I am a performance tester. I use Apache JMeter to run the load test. The load test results is in CSV file. In CSV file, columns such as time in ms, latency, connect time, error details etc will be there.

I am trying to plot a graph b/w Time and Latency using Streamlit.

I was able to convert the time in ms to date time format and plot the graph.

But I need to plot the time in x-axis and latency in y-axis.

Please let me know how to plot the time in x-axis. Thanks!

2

Hi @QAInsights and welcome to the forum!

This is totally possible, you can draw a vega-lite chart

import pandas as pd
import numpy as np

df = pd.DataFrame(np.random.randn(200, 3), columns=['a', 'b', 'c'])

st.vega_lite_chart(df, {
... 'mark': 'circle',
... 'encoding': {
... 'x': {'field': 'a', 'type': 'quantitative'},
... 'y': {'field': 'b', 'type': 'quantitative'},
... 'size': {'field': 'c', 'type': 'quantitative'},
... 'color': {'field': 'c', 'type': 'quantitative'},
... },
... })

You must set the axis with a temporal type

Also, you can check the vega-lite docs to see how to define your chart. Here are a couple of helpful links:
*Scale
*TimeUnits

Hope this helps and let us know if you need any additional help!

1 Like
3

Thanks @DaniCaminos Is it possible to plot the same using st.line_chart();

st.linechart is more interactive.

4

Hi @QAInsights.

You can write the data in the format you’d like if you first convert it to a string:

import streamlit as st

import pandas as pd

import time

millis = str(round(time.time() * 1000))

from datetime import datetime

dateTimeObj = datetime.now()

timestampStr = dateTimeObj.strftime("%H:%M:%S.%f")

df = pd.DataFrame({

'date': [timestampStr, millis],

'second column': [10, 20]

})

df = df.rename(columns={'date':'index'}).set_index('index')

st.line_chart(df)

50%20PM
50%20PM1426Ă—390 18.4 KB

5

Thanks @DaniCaminos. I implemented using vega lite. Below is the code.

st.vega_lite_chart(chart_data, {
        "mark": {"type": "bar", "color": "maroon"},    
        "selection": {
            "grid": {
            "type": "interval", "bind": "scales"
            }
        }, 
        'encoding': {
            "tooltip": [
        {"field": "timeStamp", "type": "temporal"},
        {"field": "label", "type": "nominal"},
        {"field": "Latency", "type": "quantitative"}
        ],
        'x': {'field': 'timeStamp', 'type': 'temporal'},
        'y': {'field': 'Latency', 'type': 'quantitative'},
        },
        })