Question

52

How to use heatmap written in javascript in react js

rated 0 times [ 53] [ 1] / answers: 1 / hits: 5276 / 5 Years ago, fri, october 18, 2019, 12:00:00

I'm having a js file that draw heatmap based on the points given .I want the same work to be done with reactjs .How can i do this ?

heatmap.html :

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<title>Heatmap Test Code</title>

<script src='http://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js'></script>

</head>

<body>

  <div id='heatMap' style=height: 742px>

    <canvas width=1024 height=742 style=position:absolute; left: 0; top: 0></canvas>

  </div>

</body>

<script> 

  var heatmapInstance = h337.create({

    container: document.getElementById('heatMap')

  });



  var testData = {

        min: 0,

        max: 100,

        data: [{'x': 948, 'y': 71, 'value': 1}, {'x': 949, 'y': 70, 'value': 1}, {'x': 948, 'y': 69, 'value': 1}, {'x': 946, 'y': 67, 'value': 1},  {'x': 390, 'y': 39, 'value': 1}, {'x': 376, 'y': 39, 'value': 1}, {'x': 288, 'y': 16, 'value': 1}, {'x': 200, 'y': 12, 'value': 1}, {'x': 134, 'y': 12, 'value': 1}, {'x': 96, 'y': 12, 'value': 1}, {'x': 80, 'y': 12, 'value': 1}, {'x': 69, 'y': 15, 'value': 1}, {'x': 65, 'y': 17, 'value': 1}]



  };

  heatmapInstance.setData(testData);  

</script>

</html>

I tried the following in reactjs :

In index.html :

included the script in index.html (<script src=heatmap.min.js ></script>)

In heat.js :

export function heat(){ 

 //code to draw heatmap 

}

In app.js :

import {heat} from './heat';

class App extends Component {



 componentWillMount(){

  heat();

 }

When i run the code in reactjs ,it throws h337 is not defined error .What was the mistake i have done ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devinjadong

Add To Favorites

Follow

Total Points: 711

Total Questions: 117

Total Answers: 100

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

devinjadong questions

1 How to make an existing React app installable (PWA)?

Thu, Feb 17, 22, 00:00, 2 Years ago

1 clarity.js by Microsoft slowing overall page loads

Wed, Dec 8, 21, 00:00, 2 Years ago

1 How to use document.querySelector and require with node.js and SQLite3

Sun, Aug 29, 21, 00:00, 3 Years ago

1 Object(...) is not a function for Vuex Store

Tue, Oct 27, 20, 00:00, 4 Years ago

1 redirect in formik with yup react?

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 5 Years ago jamir · Accepted Answer

After npm install heatmap.js you can create a basic working heatmap using the following code:

App.js

import React, {useEffect} from react;

import ReactDOM from react-dom;

import h337 from heatmap.js;



import ./styles.css;



function App() {



  useEffect(() => {

    var heatmapInstance = h337.create({

      // only container is required, the rest will be defaults

      container: document.querySelector('.App')

    });

    // now generate some random data

    var points = [];

    var max = 0;

    var width = 840;

    var height = 400;

    var len = 200;



    while (len--) {

     var val = Math.floor(Math.random()*100);

     max = Math.max(max, val);

     var point = {

      x: Math.floor(Math.random()*width),

      y: Math.floor(Math.random()*height),

      value: val

     };

     points.push(point);

   }

   // heatmap data format

  var data = {

    max: max,

    data: points

  };

  // if you have a set of datapoints always use setData instead of addData

  // for data initialization

  heatmapInstance.setData(data);

 })







  return (

    <div className=App>

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>

  );

}



const rootElement = document.getElementById(root);

ReactDOM.render(<App />, rootElement);

Working Demo