Using AnyChart with React based on a jQuery example

Question

I searched and found many examples of how to use AnyChart with React.

However, none of the examples implemented in React contain the idea of using ajax. That's why I need help converting the jQuery ajax request into ReactJS.

Should I use fetch? And then what is the final format of the file?

Thanks.

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-map.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
</head>
<body>
  <header style="position: absolute; z-index: 1">
    Reservation of seats in <br /> the
    <a
      href="https://www.anychart.com/de/products/anymap/gallery/Seat_Maps/Chamber_theater.php"
      target="_blank"
      title="Chamber theater example of the AnyChart Chart Gallery"
      >Chamber theatre
    </a>
  </header>
  
  <div id="container" style="height: 90vh" />

  <script>
  anychart.onDocumentReady(function () {
    var stage = acgraph.create("container");
    // get svg file
    $.ajax({
      type: "GET",
      url: "https://cdn.anychart.com/svg-data/seat-map/theater.svg",
      // The data that have been used for this sample can be taken from the CDN
      // load SVG image using jQuery ajax
      success: function (svgData) {
        // Data for creating a SeatMap
        var chart = anychart.seatMap([
          { id: "1", value: "Row - 1" },
          { id: "2", value: "Row - 1" },
          { id: "3", value: "Row - 1" },
          { id: "4", value: "Row - 2" },
          { id: "5", value: "Row - 2" },
          { id: "6", value: "Row - 2" },
          { id: "7", value: "Row - 3" },
          { id: "8", value: "Row - 3" },
          { id: "9", value: "Row - 3" },
          { id: "10", value: "Row - 4" },
          { id: "11", value: "Row - 4" },
          { id: "12", value: "Row - 4" },
        ]);

        // set svg data
        chart.geoData(svgData);

        // create chart legend
        chart
          .legend()
          .enabled(true)
          // items source mode categories
          .itemsSourceMode("categories")
          .position("right")
          .itemsLayout("vertical");

        var series = chart.getSeries(0);

        // Set color scale.
        series.colorScale(
          anychart.scales.ordinalColor([
            { equal: "Row - 4", color: "#109BC7" },
            { equal: "Row - 3", color: "#109BC7" },
            { equal: "Row - 2", color: "#109BC7" },
            { equal: "Row - 1", color: "#d38d5f" },
          ])
        );

        // set container id for the chart
        chart.container(stage);
        // initiate chart drawing
        chart.draw();
      },
    });
  });
  </script>
</body>
</html>

Does this answer your question? Adding script tag to React/JSX — Cuong Vu
– Cuong Vu, Commented May 10, 2023 at 19:24
There was an answer which is now deleted of AnyChart Support pointing to a thin react wrapper not in ReactJS spirit. Instead of deleting the answer it should have been updated. — cachius
– cachius, Commented Jun 1, 2023 at 16:14

Cade Weiskopf · Accepted Answer · 2023-05-26 14:28:15Z

0

Use fetch and wrap it in an async function, then you can do

const asyncFetch = async () => {
  const response = await fetch(`http://some-get-url`, {method: "GET"}); 
  const data = await response.json(); // or const textData = await response.text();
}

answered May 26, 2023 at 14:28

Cade Weiskopf

912 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using AnyChart with React based on a jQuery example

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related