2

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>
cachius
  • 1,743
  • 1
  • 8
  • 21
Khalid
  • 123
  • 1
  • 7
  • Does this answer your question? [Adding script tag to React/JSX](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) – Cuong Vu May 10 '23 at 19:24
  • There was an answer which is now deleted of [AnyChart Support](/users/3951036/anychart-support) pointing to a [thin react wrapper](https://github.com/Bepely/anychart_react/tree/ajax_request) not in ReactJS spirit. Instead of deleting the answer it should have been updated. – cachius Jun 01 '23 at 16:14

1 Answers1

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();
}
Cade Weiskopf
  • 81
  • 10