Vega Brush zoom doesn't work

Hi,
I am trying to create an interactive vega graph which is zoomable. I have the brush and everything but it doesn't zoom in on the other graph.
I oriented myself on this.
My vega code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444444",
      "lowval":45500,
      "highval":45300,
      "resultdecimal":45466 
},
   {
       "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444445",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45433
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444446",
         "lowval":45000,
      "highval":45500,
      "resultdecimal":45400
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444447",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45422 
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444448",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45403 
},
{
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444455",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45403 
},
{
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444456",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45403 
},
{
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444457",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45373 
},
{
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444458",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45303 
},
   {
        "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444449",
     "lowval":45000,
      "highval":45500,
      "resultdecimal":45422
    }
  ]
},

"vconcat": [
  {
  "repeat": {
    "layer": ["lowval", "highval","resultdecimal"]
  },
  
  "spec": {
        "mark":{
        "type":"line",
        "strokeWidth":3,
        "point":{
            "size":45,
            "filled":true
        }
      },
    "encoding": {
      "x": {
        "field": "serialnumber",
        "type": "ordinal",
            "axis":{
          "labelAngle":-90,
          "title":"Selected Tests",
          "titleFontSize":10,
          "scale": {"domain": {"selection": "brush"}}
        }
      },
      "y": {
        "field": {"repeat": "layer"},
        "type": "quantitative",
          "axis": {
            "title": "Teststeps in selected Tests",
            "titleFontSize": 10},
            "scale":{
              "domain":[45000,45500]
            }
      },
        "tooltip":[
          {
            "field":"serialnumber",
            "type":"ordinal"
          },
          {
            "field":"resultdecimal",
            "type":"quantitative"
          }
        ],
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal",
       "scale": {
        "range": ["#2b64ff", "#f54242", "#efbfff"]
      },
      "legend": {"title": "Weather type"}
      }
    }
  },
 "config": {
   "font": "Roboto",
      "axisX": {
         "labelFontSize": 9
       },
       "axisY": {
         "labelFontSize": 9
        }
      }
  },
  {
      "mark": "line",
      "selection": {"brush": {"type": "interval", "encodings": ["x"]}},
      "encoding": {
        "x": {"field": "serialnumber", "type": "ordinal"},
        "y": {
          "field": "resultdecimal",
          "type": "quantitative",
          "axis": {"tickCount": 5, "grid": false},
          "scale":{
              "domain":[45000,45500]
            }
        }
      }
  }
]
}

The problem is that the selection doesn't do anything:

Hope someone can help me on this.

Kinda works now:

{

  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",

  "data": {

    "values": [

   {

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444444",

      "lowval":45000,

      "highval":45500,

      "resultdecimal":45466 

},

   {

       "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444445",

    "lowval":45000,

      "highval":45500,

      "resultdecimal":45433

},

   {

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444446",

         "lowval":45000,

      "highval":45500,

      "resultdecimal":45400

   

},

   {

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444447",

    "lowval":45000,

      "highval":45500,

      "resultdecimal":45422 

},

   {

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444448",

       "lowval":45000,

      "highval":45500,

      "resultdecimal":45403 

},

{

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444455",

       "lowval":45000,

      "highval":45500,

      "resultdecimal":45403 

},

{

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444456",

       "lowval":45000,

      "highval":45500,

      "resultdecimal":45403 

},

{

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444457",

       "lowval":45000,

      "highval":45500,

      "resultdecimal":45373 

},

{

      "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444458",

       "lowval":45000,

      "highval":45500,

      "resultdecimal":45303 

},

   {

        "stepid":"4444",

      "stepname":"Name1",

      "serialnumber":"SN3444449",

     "lowval":45000,

      "highval":45500,

      "resultdecimal":45422

    }

  ]

},

"vconcat": [

  {

  "width": 400,

  "repeat": {

    "layer": ["lowval", "highval","resultdecimal"]

  },

  "transform": [{"filter": {"selection": "brush"}}],

  "spec": {

        "mark":{

        "type":"line",

        "strokeWidth":3,

        "point":{

            "size":45,

            "filled":true

        }

      },

    "encoding": {

      "x": {

        "field": "serialnumber",

        "type": "ordinal",

        "axis":{

          "labelAngle":-90,

        "title":"",

          "titleFontSize":10,

          "scale": {"domain": {"selection": "brush"}}

        }

      },

      "y": {

        "field": {"repeat": "layer"},

        "type": "quantitative",

          "axis": {

            "title": "Teststeps in selected Tests",

            "titleFontSize": 10},

            "scale":{

              "domain":[45000,45500]

            }

      },

        "tooltip":[

          {

            "field":"serialnumber",

            "type":"ordinal"

          },

          {

            "field":"resultdecimal",

            "type":"quantitative"

          }

        ],

      "color": {

        "datum": {"repeat": "layer"},

        "type": "nominal",

       "scale": {

        "range": ["#2b64ff", "#f54242", "#efbfff"]

      },

      "legend": {"title": "Weather type"}

      }

    }

  },

 "config": {

   "font": "Roboto",

      "axisX": {

         "labelFontSize": 9

       },

       "axisY": {

         "labelFontSize": 9

        }

      }

  },

  {

    "width": 400,

      "mark": "line",

      "selection": {"brush": {"type": "interval", "encodings": ["x"]}},

      "encoding": {

        "x": {"field": "serialnumber", "type": "ordinal","title":"Selected Tests"},

        "y": {

          "title": "Teststeps in selected Tests",

          "field": "resultdecimal",

          "type": "quantitative",

          "axis": {"tickCount": 5, "grid": false},

          "scale":{

              "domain":[45000,45500]

            }

        }

      }

  }

]

}

I also wrote a tutorial for this kind of chart here: https://www.elastic.co/guide/en/kibana/7.9/vega-tutorial.html

1 Like

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.