Plotting line graphs with different colors in same graph

I am trying to plot data from two data sources (indexes) in vega. the problem is both the line plots are in same color. All the examples i have seen they change the color based on some common field but i have two different data sources and i am ploting them on the same graph based on time. is there anyway i can customize their color with one line command or something. following is my code, any help would be highly appreciated. thanks

  data: [ 
    { 
      name: target 
      url: { 
        index: es  
        body: {
          "aggs": { 
            "time_buckets": {
              "date_histogram": { 
                "field": "timestamp"
                "interval": "1m"  
                "extended_bounds": {"min": "now-800m/m", "max": "now-1m/m"} 
              }
            }
          }, 
          "_source":["timestamp", "value"],
          "query": { 
            "bool":{
              "must":[
                {"range":{"timestamp":{"gte": "now-800m/m", "lte": "now-1m/m"}}} 
                ]
              }
            },
            "sort": {
              "timestamp": {"order": "asc"}
              },
            "size": 1000
          } 
        }
      format: {property: "hits.hits"} 
    },
    { 
      name: current  
      url: {
        index: mo
        body: {
         "aggs": {
             "time_buckets": {
              "date_histogram": {
                "field": "timestamp"
                "interval": "1m"
                "extended_bounds": {"min": "now-800m/m", "max": "now-1m/m"}
              }
            }
          },
          "_source": ["timestamp", "value"],
          "query": {
            "bool":{ 
              "must":[
                {"range":{"timestamp":{"gte": "now-800m/m", "lte":"now-1m/m"}}}
                ]
              }
            },
            "sort": {
              "timestamp": {"order": "asc"}
              },
            "size": 1000 
          }
        }   
      format: {property: "hits.hits"}
    },
    {
    "name": "T",
    "source": "target",
    "transform":[
              {
            #  "source": "target",
              "type": "formula",
                "as": "TimeT",
                  "expr": "datum._source['timestamp']"
              }, 
              {
            #  "source": "target",
             "type": "formula", 
                "as": "Target",
                 "expr": "datum._source['value']" 
              }
    ]
    },
        {
    "name": "C",
    "source": "current",
    "transform":[ 
              {
              "type": "formula",
                "as": "Time",
                  "expr": "datum._source['timestamp']"
                #   "expr": "datum._source.timestamp"
                  # calculate: "toDate(datum._source['timestamp'])", as: "Time"
              },
              {
             "type": "formula", 
                "as": "Current",
                  "expr": "(datum._source['value']) / 100", 
                  # "color": {"value": "#ff9900"}
              }
    ]
    }
  ], 
         
    "scales": [
    {  
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "T", "field": "TimeT"}
    },
    {
      "name": "y",
      "type": "linear", 
      "range": "height",
      "nice": true, 
      "domain": {"data": "T", "field": "Target"} 
      "zero": false
    },
    
        {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "T", "field": "Target"}
    }
     
    
  ],
   

    "marks": [
    {
      "type": "line",
      "from": {"data": "T"},
      "color": {"value": "#fffff"},
        "encode":{
          "enter":{
            "x":{"scale": "x", "field": "TimeT"},
            "y":{"scale": "y", "field": "Target"},
             "strokeDash": {"value": [5, 5]},
             "stroke": {"scale": "color", "field": "Target"}
            
          }
        }
    },
   {
    "type": "line",
    "from": {"data": "C"},
      "encode":{
        "enter":{
         "x":{"scale": "x", "field": "Time"},
          "y":{"scale": "y", "field": "Current"}
          }
        }
      },

      
    ]
  
  }

You could add an additional filter transform for each data source that adds source_name. Then you could source_name to color each line.

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