*Add an example for null Formatting

Azure · Jun 10, 2024 · f49a885 · f49a885
1 parent 557d27d
commit f49a885
Showing 1 changed file with 97 additions and 0 deletions.
diff --git a/pages/examples/noauth/nullFormatting.html b/pages/examples/noauth/nullFormatting.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Basic Charts</title>
+
+    <!-- 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>
+</head>
+
+<body style="font-family: 'Segoe UI', sans-serif;">
+    <div id="chart1" style="width: 100%; height: 600px;"></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: 500px; float: left;"></div>
+    <div id="chart5" style="width: 100%; height: 500px; float: left;"></div>
+
+    <script>
+        window.onload = function () {
+                // create fake data in the shape our charts expect
+                var data = [];
+                var from = new Date(Math.floor((new Date()).valueOf() / (1000*60 * 60)) * (1000*60 * 60));
+                var to;
+                for(var i = 0; i < 3; i++){
+                    var lines = {};
+                    data.push({[`Factory${i}`]: lines});
+                    for(var j = 0; j < 1; j++){
+                        var values = {};
+                        lines[`Station${j}`] = values;
+                        for(var k = 0; k < 180; k++){
+                            if (i !== 0) {
+                                var to = new Date(from.valueOf() + 1000*60*k);
+                                var val = Math.random();
+                                var val2 = Math.random();
+                                var val3 = Math.random();
+                                var val4 = Math.random();
+                                if (Math.random() < .3)
+                                    values[to.toISOString()] = {avg: val, x: val2, y: val3, r: val4};
+                            } 
+                            if (i === 0) {
+                                var to = new Date(from.valueOf() + 1000*60*k);
+                                var val = k % 10;
+                                var val2 = Math.random();
+                                var val3 = Math.random();
+                                var val4 = Math.random();
+                                if (Math.random() < .5)
+                                    values[to.toISOString()] = {avg: val, x: val2, y: val3, r: val4};
+                                else
+                                    values[to.toISOString()] = {avg: null, x: val2, y: val3, r: val4};
+                            }
+                            if(i === 1) {
+                                var to = new Date(from.valueOf() + 1000*60*k);
+                                var val = k % 10;
+                                var val2 = Math.random();
+                                var val3 = Math.random();
+                                var val4 = Math.random();
+                                if (Math.random() < .5)
+                                    values[to.toISOString()] = {avg: val, x: val2, y: val3, r: val4};
+                                else
+                                    values[to.toISOString()] = {avg: val, x: val2, y: null, r: val4};
+                            }
+                            if(i === 2) {
+                                var to = new Date(from.valueOf() + 1000*60*k);
+                                var val = k % 10;
+                                var val2 = Math.random();
+                                var val3 = Math.random();
+                                var val4 = Math.random();
+                                if (Math.random() < .5)
+                                    values[to.toISOString()] = {avg: val, x: val2, y: val3, r: val4};
+                                else
+                                    values[to.toISOString()] = {avg: val, x: val2, y: val3, r: null};
+                            }
+                        }
+                    }
+                }
+            console.log(JSON.stringify(data));    
+            var swimLaneOptions = {
+                1: { yAxisType: 'shared', label: 'Lane 1', onClick: () => alert("'Lane 1' label/axis clicked") },
+                2: { yAxisType: 'shared', label: 'Lane 2', onClick: () => alert("'Lane 2' label/axis clicked") },
+                3: { yAxisType: 'shared', label: 'Lane 3', onClick: () => alert("'Lane 3' label/axis clicked") }
+            };
+
+            // render the data in a chart
+            var kustoTrender = new KustoTrender();
+            var lineChart = new kustoTrender.ux.LineChart(document.getElementById('chart1'));
+            lineChart.render(data, { theme: 'light', swimLaneOptions });
+
+            var heatmap = new kustoTrender.ux.Heatmap(document.getElementById('chart4'));
+            heatmap.render(data, { theme: 'dark' }, data.map(d => { return { measureTypes: ['avg'], searchSpan: { from: from.toISOString(), to: to.toISOString(), bucketSize: '1m' } } }));
+
+            var scatterplot = new kustoTrender.ux.ScatterPlot(document.getElementById('chart5'));
+            scatterplot.render(data, { theme: 'light', legend: 'compact', tooltip: true, spMeasures: ['x', 'y', 'r'] })
+        };
+    </script>
+</body>
+
+</html>