Vegalite Viz for cpu/memory usage

vega_lite.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`",
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {
        "process": "java",
        "time": "2023-04-27 00:00:00",
        "cpu": 10,
        "memory": 2200
      },
      {
        "process": "java",
        "time": "2023-04-27 00:01:00",
        "cpu": 34,
        "memory": 1250
      },
      {
        "process": "java",
        "time": "2023-04-27 00:02:00",
        "cpu": 23,
        "memory": 300
      },
      {
        "process": "java",
        "time": "2023-04-27 00:03:00",
        "cpu": 10,
        "memory": 4350
      },
      {
        "process": "java",
        "time": "2023-04-27 00:04:00",
        "cpu": 80,
        "memory": 1400
      },
      {
        "process": "java",
        "time": "2023-04-27 00:05:00",
        "cpu": 20,
        "memory": 4450
      },
      {
        "process": "java",
        "time": "2023-04-27 00:06:00",
        "cpu": 10,
        "memory": 2200
      },
      {
        "process": "java",
        "time": "2023-04-27 00:07:00",
        "cpu": 34,
        "memory": 1250
      },
      {
        "process": "java",
        "time": "2023-04-27 00:12:00",
        "cpu": 23,
        "memory": 300
      },
      {
        "process": "java",
        "time": "2023-04-27 00:15:00",
        "cpu": 10,
        "memory": 4350
      },
      {
        "process": "java",
        "time": "2023-04-27 00:24:00",
        "cpu": 80,
        "memory": 1400
      },
      {
        "process": "java",
        "time": "2023-04-27 00:25:00",
        "cpu": 20,
        "memory": 4450
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal",
      "axis": {
        "title": "Time"
      }
    },
    "color": {
      "field": "process",
      "type": "nominal"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "line",
        "stroke": "#6fbf98",
        "interpolate": "monotone"
      },
      "encoding": {
        "y": {
          "field": "cpu",
          "type": "quantitative",
          "scale": {
            "domain": [
              0,
              100
            ]
          },
          "title": "CPU Upsage (%)",
          "axis": {
            "titleColor": "#6fbf98"
          }
        }
      }
    },
    {
      "mark": {
        "stroke": "#ae29bd",
        "type": "line",
        "interpolate": "monotone"
      },
      "encoding": {
        "y": {
          "type": "quantitative",
          "field": "memory",
          "title": "Memory (MB)",
          "axis": {
            "titleColor": "#ae29bd"
          }
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "opacity": {
          "condition": {
            "value": 0.3,
            "param": "hover",
            "empty": false
          },
          "value": 0
        },
        "tooltip": [
          {
            "field": "cpu",
            "type": "quantitative"
          },
          {
            "field": "memory",
            "type": "quantitative"
          }
        ]
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "type": "point",
            "fields": [
              "time"
            ],
            "nearest": true,
            "on": "mouseover",
            "clear": "mouseout"
          }
        }
      ]
    }
  ],
  "resolve": {
    "scale": {
      "y": "independent"
    }
  }
}

Open the Chart in the Vega Editor