So I got this from a design tool we have at our service. This div class is suppose to be added on pages where we want to generate a Gauge chart with given information.

<div class="gauge" id="g0" data-settings='
  {
    "value": 9,
    "min": 0,
    "max": 100,
    "units": "%",
    "limits": [
      {"from": 0, "to": 30, "color": "green", "label": "Low attrition"},
      {"from": 31, "to": 70, "color": "gray", "label": "Moderate attrition"},
      {"from": 71, "to": 100, "color": "red", "label": "High attrition"}
    ]
  }'
></div>

So what I need to learn is how I modify the values passed into data-settings here to make the Gauge chart more dynamic. I'm gonna get some data by parsing a JSON which I get from the backend.

var Data = JSON.parse("{{data_attrition|escapejs}}");

And this I want to pass into some of the variables in data-settings, for example change "value" from 9 to whatever I get from the backend.