Heatmap js min value 0

I am trying to plot the heatmap using 'heatmap js' library . For some value of inputs if the min value is 0 and max value is 1 then whole heatmap will be red instead of plotting actual values. It works fine if the max value is other than 1 (ex. min: 0, max 2 or min:0 , max: 3) but only for this case the heatmap fails to map the data.

var data = null;



/* this set of data works fine though */
values = [{
    "uid": "1",
    "x": 100,
    "y": 200,
    "value": 0
  },
  {
    "uid": "2",
    "x": 100,
    "y": 220,
    "value": 0
  },
  {
    "uid": "22",
    "x": 100,
    "y": 240,
    "value": 0
  },
  {
    "uid": "30",
    "x": 100,
    "y": 260,
    "value": 0
  },
  {
    "uid": "39",
    "x": 100,
    "y": 280,
    "value": 0
  },
  {
    "uid": "70",
    "x": 100,
    "y": 300,
    "value": 1
  },
  {
    "uid": "75",
    "x": 120,
    "y": 200,
    "value": 0
  },
  {
    "uid": "84",
    "x": 140,
    "y": 200,
    "value": 1
  },
  {
    "uid": "85",
    "x": 160,
    "y": 200,
    "value": 1
  },
  {
    "uid": "104",
    "x": 180,
    "y": 200,
    "value": 0
  },
  {
    "uid": "105",
    "x": 200,
    "y": 200,
    "value": 0
  }
];


var heatmap = h337.create({
  container: $("#testcanvas").get(0)
});
data = {
  max: 1,
  min: 0,
  data: values
}
heatmap.setData(data);

heatmap.repaint();

#testcanvas {
  width: 600px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>

Solution

If I understand correctly your problem then I guess Script understand 0 = false and 1 = true so you need to pass 0 as "0" and 1 as "1"

var data = null;



/* this set of data works fine though */
values = [{
    "uid": "1",
    "x": 100,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "2",
    "x": 100,
    "y": 220,
    "value": "0"
  },
  {
    "uid": "22",
    "x": 100,
    "y": 240,
    "value": "0"
  },
  {
    "uid": "30",
    "x": 100,
    "y": 260,
    "value": "0"
  },
  {
    "uid": "39",
    "x": 100,
    "y": 280,
    "value": "0"
  },
  {
    "uid": "70",
    "x": 100,
    "y": 300,
    "value": "1"
  },
  {
    "uid": "75",
    "x": 120,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "84",
    "x": 140,
    "y": 200,
    "value": "1"
  },
  {
    "uid": "85",
    "x": 160,
    "y": 200,
    "value": "1"
  },
  {
    "uid": "104",
    "x": 180,
    "y": 200,
    "value": "0"
  },
  {
    "uid": "105",
    "x": 200,
    "y": 200,
    "value": "0"
  }
];


var heatmap = h337.create({
  container: $("#testcanvas").get(0)
});
data = {
  max: "1",
  min: "0",
  data: values
}
heatmap.setData(data);

heatmap.repaint();

#testcanvas {
  width: 600px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>