ECharts: set up/save input array

General
1

Hi there! Trying to plot two daily profit data points ('day" and "total") using line echarts. Everything is prepped, just stuck on the task of setting up and saving the array every 24 hours. Here is the function generating the data:

let time = new Date(new Date().getTime())
msgMessage.payload = {'day':paper_dc, 'total':paper_ch, 'time': time}

output:

{"day":"0.38","total":"1.75","time":"2022-11-27T19:42:22.657Z"}

and here is the echart template:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divProfit" style="padding: 0px; margin:-20px 0px 0px -90px; width:1330px; height:290px;"></div>

<script type="text/javascript">
    var dom = document.getElementById("divProfit");
    var myChart =null
    myChart = echarts.init(dom);
    option = null;
    
    let day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]


option = {

    xAxis : [
        {
            type: 'time',
            boundaryGap:false,
            axisLabel: {
                formatter: (function(value){
                    return moment(value).format('M/D');
                })
            }
        }
    ],

    yAxis : [
        {
            type : 'value',
            splitLine: {lineStyle: {color:'#434651'}},
        }
    ],
    
    dataZoom: [
      {
         type: 'slider',
         backgroundColor: "rgba(0, 0, 0, 0.05)",
         fillerColor: "rgba(0, 0, 0, 0.15)",
         moveHandleStyle: {
         color: "rgba(0, 0, 0, 0)"
         },
         start: 0,
         end: 100
      }
    ],

    series : [
        {
            name:'Total',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color: '#079F70', opacity: 0.3}
            },
            areaStyle: {color: '#079F70', opacity: 0.3},

            data: [["2018-08-16T10:04:01.339Z",2],[ "2018-08-17T10:14:13.914Z",2.5],[ "2018-08-18T10:40:03.147Z",3],[ "2018-08-19T11:50:14.335Z",3.5]]
        },
        {
            name:'Day',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color:'#079F70', opacity: 0.9}
            },            
            areaStyle: {color: '#079F70', opacity: 0.9},         
            
//            data: [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]
            data: day
        }
    ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>

The day/total values are continuously updated but at midnight the data point marking the end of day is saved (I assume local file), so the chart is showing two types of data (saved history and current day).

Also, doing something wrong when I try to assign data in the chart template to variable - i.e :

let day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]'

is giving an error. Thanks for your help!!

2

let day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]' <-- single quote on end not required

3

Thank you. How do I get the data from function node into the charts template node? Lets say this is the current payload in the function: msg.payload = {'day':paper_dc, 'total':paper_ch, 'time': time}. It needs to be formatted differently as an array? How do I reference it in the template; is it same as in a function (let day = msg.payload)?

4

let day = msg.payload.day etc, or all together let {day, total, time} = msg.payload

Not sure what you are looking for as an Array but Object.entries({"day":"0.38","total":"1.75","time":"2022-11-27T19:42:22.657Z"})
gives

[["day","0.38"],["total","1.75"],["time","2022-11-27T19:42:22.657Z"]]
5

So "let day = msg.payload.day" declaration is in the chart template ? If so, I tried it - inside the script section, outside - the chart doesn't render.

I am simply trying to plot the two variables (day & total) along time x axis on a line echart. Not sure what payload format should be in the output function (json vs array) and any declaration to reference the variables inside the template seems to break it.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divProfit" style="width:1245px; height:260px;"></div>



<script type="text/javascript">
    var dom = document.getElementById("divProfit");
    var myChart =null
    myChart = echarts.init(dom);
    option = null;

   //    const day = '[["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]'



option = {
    
  grid: {
    top:    30,
    bottom: 70,
    left:   '2.5%',
    right:  '2%'
  },

    xAxis : [
        {
            type: 'time',
            boundaryGap:false,
            axisLabel: {
                formatter: (function(value){
                    return moment(value).format('M/D');
                })
            }
        }
    ],

    yAxis : [
        {
            type : 'value',
            splitLine: {lineStyle: {color:'#434651'}},
        }
    ],
    
    dataZoom: [
      {
         type: 'slider',
         backgroundColor: "rgba(0, 0, 0, 0.05)",
         fillerColor: "rgba(0, 0, 0, 0.15)",
         moveHandleStyle: {
         color: "rgba(0, 0, 0, 0)"
         },
         handleStyle: {
          color: "rgba(7, 159, 112, 0.7)"
         },
         borderColor: "rgba(7, 159, 112, 0.5)",
         showDetail: false,
         handleIcon: "pin",
         start: 0,
         end: 100
      }
    ],

    series : [
        {
            name:'Total',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color: '#079F70', opacity: 0.3}
            },
            areaStyle: {color: '#079F70', opacity: 0.3},

            data: [["2018-08-16T10:04:01.339Z",2],[ "2018-08-17T10:14:13.914Z",2.5],[ "2018-08-18T10:40:03.147Z",3],[ "2018-08-19T11:50:14.335Z",3.5]]
        },
        {
            name:'Day',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color:'#079F70', opacity: 0.9}
            },            
            areaStyle: {color: '#079F70', opacity: 0.9},         
 //           data: data
              data: [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]
           
        }
    ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>
6

I moved data into variables but I cannot figure out how to get the data into the echart template via msg.payload. I understand that I need to incorporate scope function somehow

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
     // ...
    }
  });
})(scope);
</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divProfit" style="width:1245px; height:260px;"></div>


<script type="text/javascript">
    var dom = document.getElementById("divProfit");
    var myChart =null
    myChart = echarts.init(dom);
    option = null;

   var day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]
   var total = [["2018-08-16T10:04:01.339Z",2],[ "2018-08-17T10:14:13.914Z",2.5],[ "2018-08-18T10:40:03.147Z",3],[ "2018-08-19T11:50:14.335Z",3.5]]

//   var title = {{msg.payload}}

option = {
    
  grid: {
    top:    30,
    bottom: 70,
    left:   '2.5%',
    right:  '2%'
  },
title: {
    text: {{msg.payload}}
  },
    xAxis : [
        {
            type: 'time',
            boundaryGap:false,
            axisLabel: {
                formatter: (function(value){
                    return moment(value).format('M/D');
                })
            }
        }
    ],

    yAxis : [
        {
            type : 'value',
            splitLine: {lineStyle: {color:'#434651'}},
        }
    ],
    
    dataZoom: [
      {
         type: 'slider',
         backgroundColor: "rgba(0, 0, 0, 0.05)",
         fillerColor: "rgba(0, 0, 0, 0.15)",
         moveHandleStyle: {
         color: "rgba(0, 0, 0, 0)"
         },
         handleStyle: {
          color: "rgba(7, 159, 112, 0.7)"
         },
         borderColor: "rgba(7, 159, 112, 0.5)",
         showDetail: false,
         handleIcon: "pin",
         start: 0,
         end: 100
      }
    ],

    series : [
        {
            name:'Total',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color: '#079F70', opacity: 0.3}
            },
            areaStyle: {color: '#079F70', opacity: 0.3},

            data :total
        },
        {
            name:'Day',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color:'#079F70', opacity: 0.9}
            },            
            areaStyle: {color: '#079F70', opacity: 0.9},         
           
            data: day

        }
    ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>
7

I do not get a chart but the following does get data from msg.payload into the data property of the series

[{"id":"bb07d5d892b7af94","type":"ui_template","z":"7fdabd9.f693544","group":"1a8c624515376944","name":"","order":1,"width":0,"height":0,"format":"<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js\"></script>\n\n<body>\n    <!-- prepare a DOM container with width and height -->\n    <div id=\"divProfit\" style=\"width:1245px; height:260px;\"></div>\n\n\n<script>\n(function(scope) {\n    const dom = document.getElementById(\"divProfit\");\n    let myChart = null\n    let title = ''\n\n    myChart = echarts.init(dom);\n    let option = null;\n\n   let day = []//[[\"2018-08-16T10:04:01.339Z\",1],[ \"2018-08-17T10:14:13.914Z\",-1],[ \"2018-08-18T10:40:03.147Z\",2.5],[ \"2018-08-19T11:50:14.335Z\",1.5]]\n   let total = []//[[\"2018-08-16T10:04:01.339Z\",2],[ \"2018-08-17T10:14:13.914Z\",2.5],[ \"2018-08-18T10:40:03.147Z\",3],[ \"2018-08-19T11:50:14.335Z\",3.5]]\n\n\n    scope.$watch('msg', function(msg) {\n        if (msg) {\n            // Do something when msg arrives\n            day = msg.payload.day\n            total = msg.payload.total\n            title = msg.topic\n            option.series[0].data = day\n            option.series[1].data = total\n            option.title.text = title\n\n            msg.day = option\n            // ...\n            scope.send(msg)\n        }\n    })\n\n//   var title = {{msg.payload}}\n\noption = {\n    \n  grid: {\n    top:    30,\n    bottom: 70,\n    left:   '2.5%',\n    right:  '2%'\n  },\ntitle: {\n    text: title\n  },\n    xAxis : [\n        {\n            type: 'time',\n            boundaryGap:false,\n            axisLabel: {\n                formatter: (function(value){\n                    return moment(value).format('M/D');\n                })\n            }\n        }\n    ],\n\n    yAxis : [\n        {\n            type : 'value',\n            splitLine: {lineStyle: {color:'#434651'}},\n        }\n    ],\n    \n    dataZoom: [\n      {\n         type: 'slider',\n         backgroundColor: \"rgba(0, 0, 0, 0.05)\",\n         fillerColor: \"rgba(0, 0, 0, 0.15)\",\n         moveHandleStyle: {\n         color: \"rgba(0, 0, 0, 0)\"\n         },\n         handleStyle: {\n          color: \"rgba(7, 159, 112, 0.7)\"\n         },\n         borderColor: \"rgba(7, 159, 112, 0.5)\",\n         showDetail: false,\n         handleIcon: \"pin\",\n         start: 0,\n         end: 100\n      }\n    ],\n\n    series : [\n        {\n            name:'Total',\n            type:'line',\n            smooth: true,\n            lineStyle: {\n                 normal: {color: '#079F70', opacity: 0.3}\n            },\n            areaStyle: {color: '#079F70', opacity: 0.3},\n\n            data :total\n        },\n        {\n            name:'Day',\n            type:'line',\n            smooth: true,\n            lineStyle: {\n                 normal: {color:'#079F70', opacity: 0.9}\n            },            \n            areaStyle: {color: '#079F70', opacity: 0.9},         \n           \n            data: day\n\n        }\n    ]\n};\n    if (option && typeof option === \"object\") \n    { \n        myChart.setOption(option, true); \n    }\n})(scope)\n\n</script>    \n\n</body>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":1000,"y":1000,"wires":[["631ca95e78c33cf4"]]},{"id":"0b7a1c03b5859ccc","type":"inject","z":"7fdabd9.f693544","name":"","props":[{"p":"payload.day","v":"[[\"2018-08-16T10:04:01.339Z\",1],[\"2018-08-17T10:14:13.914Z\",-1],[\"2018-08-18T10:40:03.147Z\",2.5],[\"2018-08-19T11:50:14.335Z\",1.5]]","vt":"json"},{"p":"payload.total","v":"[[\"2018-08-16T10:04:01.339Z\",2],[ \"2018-08-17T10:14:13.914Z\",2.5],[ \"2018-08-18T10:40:03.147Z\",3],[ \"2018-08-19T11:50:14.335Z\",3.5]]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A Chart","x":780,"y":1000,"wires":[["bb07d5d892b7af94"]]},{"id":"631ca95e78c33cf4","type":"debug","z":"7fdabd9.f693544","name":"debug 21","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1240,"y":1000,"wires":[]},{"id":"1a8c624515376944","type":"ui_group","name":"Right","tab":"7e13e6107768d821","order":3,"disp":true,"width":12,"collapse":false,"className":""},{"id":"7e13e6107768d821","type":"ui_tab","name":"CRYPTO","icon":"dashboard","order":7,"disabled":false,"hidden":false}]
8

Hi, thanks. The chart renders but it's coming blank. If I uncomment one of the data variables, I see data plotted.

9

Try

    scope.$watch('msg', function(msg) {
        if (msg) {
            // Do something when msg arrives
            day = msg.payload.day
            total = msg.payload.total
            title = msg.topic
            option.series[0].data = total
            option.series[1].data = day
            option.title.text = title

            myChart.setOption(option, true)

        }
    })

It seems the chart needs updating. There may be another way but I do not have the chart instructions

10

It's working - thank you. Got unexpectedly stuck on trying to replicate sending the two msg payloads msg.payload.day msg.payload.total from a function (rather than inject node).

11

I got it working msgChart.payload = {"day":[[time,paper_dc]],"total":[[time,roi]]} thanks!

To make this useful l I now need to be able to save these two data points every 24 hours and plot the saved history alongside the daily live value. I read several posts on this but haven't been able to implement. Any help would be greatly appreciated.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divProfit" style="width:1245px; height:260px;"></div>


<script>
(function(scope) {
    const dom = document.getElementById("divProfit");
    let myChart = null
    let title = ''

    myChart = echarts.init(dom);
    let option = null;

   let day = []
   let tot = []


      scope.$watch('msg', function(msg) {
        if (msg) {
            // Do something when msg arrives
            day = msg.payload.day
            total = msg.payload.total
            title = msg.topic
            option.series[0].data = total
            option.series[1].data = day
            option.title.text = title

            myChart.setOption(option, true)

        }
    })

//   var title = {{msg.payload}}

option = {
    
  grid: {
    top:    30,
    bottom: 70,
    left:   '2.5%',
    right:  '2%'
  },
title: {
    text: // title
  },
    xAxis : [
        {
            type: 'time',
            boundaryGap:false,
            axisLabel: {
                formatter: (function(value){
                    return moment(value).format('M/D');
                })
            }
        }
    ],

    yAxis : [
        {
            type : 'value',
            splitLine: {lineStyle: {color:'#434651'}},
        }
    ],
    
    dataZoom: [
      {
         type: 'slider',
         backgroundColor: "rgba(0, 0, 0, 0.05)",
         fillerColor: "rgba(0, 0, 0, 0.15)",
         moveHandleStyle: {
         color: "rgba(0, 0, 0, 0)"
         },
         handleStyle: {
          color: "rgba(7, 159, 112, 0.7)"
         },
         borderColor: "rgba(7, 159, 112, 0.5)",
         showDetail: false,
         handleIcon: "pin",
         start: 0,
         end: 100
      }
    ],

    series : [
        {
            name:'Total',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color: '#079F70', opacity: 0.3}
            },
            areaStyle: {color: '#079F70', opacity: 0.3},

            data :total
        },
        {
            name:'Day',
            type:'line',
            smooth: true,
            lineStyle: {
                 normal: {color:'#079F70', opacity: 0.9}
            },            
            areaStyle: {color: '#079F70', opacity: 0.9},         
           
            data: day

        }
    ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }
})(scope)

</script>    

</body>
12

How often are you publishing this data, and how many data points do you wish to save every 24hrs? And when does the 24 hour period end?

13

I am polling every minute to update "today's value", but once the day is over ( say midnight) I want to save the data point - in other words, there is going to be two types of data charted - today's (that is getting updated), and historic (that's saved once every 24 hours).

14

Hi, could you help me to do the same with the bar chart. I followed the line chart approach but was only able to get the title. Can't figure out how to send payload data to xAxis and Series. Thanks.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divBar2" style="width: 400px;height:320px;"></div>

<script type="text/javascript">
    var dom = document.getElementById("divBar2");
    var myChart =null;
    myChart = echarts.init(dom);
    option = null;

    scope.$watch('msg', function(msg) {
        if (msg) {
            // Do something when msg arrives
            title = msg.topic
            option.title.text = title
            myChart.setOption(option, true)
        }
    })

option = {
    
title: {
    text: title
  },
  
  grid: {
    top:    30,
    bottom: 30,
    left:   '6%',
    right:  '4%'
  },
  
  xAxis: {
    data: ['1', '1.5', '2', '2.5', '3']
  },
  yAxis: {
   splitLine: {lineStyle: {color:'#434651'}}     
  },
  series: [
    {
      type: 'bar',
      data:  [2, 3, -1, 1.5, -0.5],
      itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'},
    }
      
    }
  ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>
15 
option.xAxis.data = xAxisData
option.series[0].data = seriesData
16

what does the msg payload look like?

17

According to the eCharts documentation the option should look something like'

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

If we use the data array in one off your early posts
[["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]

then

let day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]]

let seriesData = []
let xAxisData = []
day.forEach(element => {xAxisData = [...xAxisData, element[0]]
                        seriesData = [...seriesData, element[1]]
                       }
           ) 

msg.payload = [seriesData, xAxisData]

//msg.payload[0] should be an Array
[1,-1,2.5,1.5]

// and msg.payload[1] should also be an Array
["2018-08-16T10:04:01.339Z","2018-08-17T10:14:13.914Z","2018-08-18T10:40:03.147Z","2018-08-19T11:50:14.335Z"]

//then
option.series[0].data = msg.payload[0]
option.xAxis.data = msg.payload[1]
18

Doing something wrong:

My xAxis category data is [1, 1.5, 2, 2.5]
My corresponding yAxis/Series data "profit" is [2, -1, 3, -2]

TEMPLATE:
In your example why is "profit" defined with specific values?

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<body>
    <!-- prepare a DOM container with width and height -->
    <div id="divBar2" style="width: 400px;height:320px;"></div>

<script type="text/javascript">
    var dom = document.getElementById("divBar2");
    var myChart =null;
    myChart = echarts.init(dom);
    option = null;

    let profit = [[2,"1"],[ -1, "1.5"],[ 3, "2"],[  -2,"2.5"]]
    
    profit.forEach(element => {xAxisData = [...xAxisData, element[0]]
                        seriesData = [...seriesData, element[1]]
                       }
           ) 

    let seriesData = []
    let xAxisData = []
    
    msg.payload = [seriesData, xAxisData]

    scope.$watch('msg', function(msg) {
        if (msg) {
            // Do something when msg arrives
            title = msg.topic
            option.title.text = title
            option.series[0].data = msg.payload[0]
            option.xAxis.data = msg.payload[1]
            myChart.setOption(option, true)
        }
    })

option = {
    
title: {
    text: title
  },
  
  grid: {
    top:    30,
    bottom: 30,
    left:   '6%',
    right:  '4%'
  },
  
  xAxis: {
    type: 'category'
    data: xAxisData 
  },

  yAxis: {
  type: 'value'      
   splitLine: {lineStyle: {color:'#434651'}}     
  },
  
  series: [
    {
      type: 'bar',
      data: seriesData 
      itemStyle: {normal: {color: 'rgba(7, 159, 112, 0.7)'},
    }
      
    }
  ]
};
    if (option && typeof option === "object") 
    { 
        myChart.setOption(option, true); 
    }    
</script>
</body>

FUNCTION

msg.payload = [[2,"1"],[ -1, "1.5"],[ 3, "2"],[  -2,"2.5"]]
return msg;
19

should be

    let profit = [[2,"1"],[ -1, "1.5"],[ 3, "2"],[  -2,"2.5"]]

    let seriesData = []
    let xAxisData = []

    profit.forEach(element => {xAxisData = [...xAxisData, element[1]]
                               seriesData = [...seriesData, element[0]]
                              }
                  ) 
    
    msg.payload = [seriesData, xAxisData]

TEMPLATE:
In your example why is "profit" defined with specific values?

No idea what this refers to, I have never mentioned 'profit' before.

20

I changed "day" to "profit"; you have: let day = [["2018-08-16T10:04:01.339Z",1],[ "2018-08-17T10:14:13.914Z",-1],[ "2018-08-18T10:40:03.147Z",2.5],[ "2018-08-19T11:50:14.335Z",1.5]] I don't understand why specific values are being set within the template.