pages/examples/withplatform/basiccharts.html

<!DOCTYPE html>
<html>

<head>
  <title>Basic Charts</title>

  <!-- styles are only used for styling header and auth elements, where possible -->
  <link rel="stylesheet" type="text/css" href="../styles.css" />

  <!-- boilerplate headers are injected with head.js, grab them from the live example header, or include a link to head.js -->
  <script src="../boilerplate/head.js"></script>

  <!-- boilerplate auth code is injected with auth.js, check it out for auth setup -->
  <script src="../boilerplate/auth.js"></script>
</head>

<body style="font-family: 'Segoe UI', sans-serif">
  <div id="chart1" style="width: 100%; height: 600px; margin-top: 40px"></div>
  <div id="chart2" style="width: 50%; height: 400px; float: left"></div>
  <div id="chart3" style="width: 50%; height: 400px; float: right"></div>
  <div id="chart4" style="width: 100%; height: 600px; margin-top: 40px; float: left"></div>
  <script>
    window.onload = async function () {
      var kustoTrender = new KustoTrender();

      initAuth("Basic Charts");

      const cluster = new ADX.ADXTrenderClient(
        "https://help.kusto.windows.net/",
        authContext.getTsiToken,
        "Trender"
      );

      const start = new Date("2017-04-01");
      const end = new Date("2017-05-01");
      const bucketSize = "1h";

      const result = await cluster.getAggregates(
        ["41804674-3ca7-47fd-9b09-501af4a14a78","bea27065-87f7-471a-a0a2-1d60ab3fdb17","0607cdea-9dd3-4c39-b076-96d020442bca","3b7715ef-3da1-47f8-ac1c-874bcefccbaf","d9b365ae-49ac-4a4e-9cb5-e9675c0f59b0"],
        start,
        end,
        bucketSize
      );

      var lineChart = new kustoTrender.ux.LineChart(
        document.getElementById("chart1")
      );

      lineChart.render(result, {
        theme: "light",
        grid: true,
        tooltip: true,
      });

      var barChart = new kustoTrender.ux.BarChart(
        document.getElementById("chart2")
      );
      barChart.render(result, {
        theme: "dark",
        grid: true,
        tooltip: true,
        legend: "compact",
      });

      var pieChart = new kustoTrender.ux.PieChart(
        document.getElementById("chart3")
      );
      pieChart.render(result, {
        theme: "light",
        grid: true,
        tooltip: true,
        legend: "compact",
      });

      var heatmap = new kustoTrender.ux.Heatmap(
        document.getElementById("chart4")
      );
      heatmap.render(result, { theme: 'dark' }, [
        {
          searchSpan: {
            from: start.toISOString(),
            to: end.toISOString(),
            bucketSize : bucketSize,
            measureTypes: ['avg']
          },
        },
      ]);
    };
  </script>
</body>

</html>