【问题标题】:ServiceNow / GlideRecord - how to prepare data for chart after query the table?ServiceNow / GlideRecord - 查询表格后如何为图表准备数据?
【发布时间】:2020-09-07 16:29:50
【问题描述】:

我正在尝试在动态内容块中构建可视化以用于仪表板。 我使用 d3.js 作为图表库。它已经看起来像预期的那样,但我只使用硬编码数据,我想查询表以获取实时数据。

这是我到目前为止所做的:

<?xml version="1.0" encoding="utf-8" ?>  
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">  
<html>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .chart rect {
            fill: steelblue;
        }

        .chart text {
            fill: white;
            font: 10px sans-serif;
            text-anchor: start;
        }

        .centered-chart {
            text-align: center;
        }
    </style>
    <body>
        <div class="centered-chart">
            <h1>D3 Chart Test - Incidents (Priority) </h1>
            <svg class="chart"></svg>
        </div>
    </body>
    <script>

        var c = this;


        var data = [
        
        {"category": "1 - Critical", "value": 26}, 
        {"category": "2 - High", "value": 4}, 
        {"category": "3 - Moderate", "value": 8}, 
        {"category": "4 - Low", "value": 3},
        {"category": "5 - Planning", "value": 14}
        
        ];


        var width = 600,

        barHeight = 20;



        var chart = d3.select(".chart")

        .attr("width", width)

        .attr("height", barHeight * data.length);




        var x = d3.scaleLinear()

        .range([0, width])

        .domain([0, d3.max(data, function(d) { return d.value; })]);




        var bar = chart.selectAll("g")

        .data(data)

        .enter().append("g")

        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });




        bar.append("rect")

        .attr("width", function(d) { return x(d.value); })

        .attr("height", barHeight - 1);




        bar.append("text")

        .attr("x", 5)

        .attr("y", barHeight / 2)

        .attr("dy", ".35em")

        .text(function(d) { return d.category; });



        bar.append("text")

        .attr("x", function(d) { return x(d.value) - 15; })

        .attr("y", barHeight / 2)

        .attr("dy", ".35em")

        .text(function(d) { return d.value; });
    </script>
</html>
</j:jelly>

但如前所述,我只使用硬编码数据:(

所以,我做了一些这样的测试:

<script>
    var gr = new GlideRecord('incident');
        gr.addQuery('priority', '=', 1);
        gr.query(response);

    function response(result) {
        while(result.next()) {
            console.log(result.getValue('number')); 
        }
    }
</script>

只是想看看这个查询是否能完成它的工作,但我不太熟悉 SNow 脚本或 gliderecord 来理解或了解我如何在优先级组中获取这些事件或计算它们,我的意思是 如何准备数据,以便能够像硬编码数据一样在图表中使用它?

我知道,这是一个非常简单的场景,它只是让我了解基础知识并深入了解它,但我在这个早期阶段已经遇到了问题,我希望任何人都知道如何继续或可以给出我对这件事的逻辑有一些提示。

所以,我希望你们本周都有一个良好的开端,并且有人对我正在尝试做的事情有更好的了解,并且可以给我一些建议。

问候 丹尼斯

【问题讨论】:

    标签: d3.js bar-chart servicenow


    【解决方案1】:

    我对@9​​87654321@或GlideRecord不熟悉,希望能帮上忙。

    您的问题与 d3 没有特别相关,因为您知道如何将数据从一种格式获取到可视化中,但与如何将其从 GlideRecord 获取到所述格式更相关。

       var categories = {
          1: "1 - Critical",
          2: "2 - High",
          3: "3 - Moderate",
          4: "4 - Low"
          5: "5 - Planning"
        };
    
        var data = [];
        var gr = new GlideRecord('incident');
    
        // Object.entries returns sets of (key, value)
        Object.entries(categories).forEach(function(entry) {
          var priority = entry[0];
          var category = entry[1];
          gr.addQuery('priority', '=', priority);
    
          // getRowCount returns the number of matching rows
          data.push({ category: category, value: gr.getRowCount() });
        });
    

    编辑您询问如何获取所有类别。我不知道。在普通数据库中,您将有一个单独的表 prioritycategory 表。如果是这种情况,您可以执行以下操作:

        var categories = [];
        var gr = new GlideRecord('priority');
    
        gr.query();
        while(gr.next()) {
          categories[gr.priority] = gr.category; // or name/identifier or anything else really
        }
    

    这将创建一个对象,从数据库中获取所有优先级,并将它们放在那里。我不建议让所有事件都获得优先级,因为这可能会更昂贵。

    【讨论】:

    • 我认为你是对的。我知道在这种情况下我的图表需要一个类似于上面硬编码的数组,我认为“现在”我知道如何从 db 获取该数据。我的问题是,我真的不知道如何处理这些数据以形成一个像上面那样的数组。在您的示例中,我计算了关键的等等,但我将优先级放入该 var 但老实说,最好从 db 中读取它们,然后将它们放在一个数组中,就像上面提到的那样:)
    • 我已经在我的答案中添加了一些东西,但请记住我以前从未使用过它,我只是将我的数据库经验投射到 GlideRecord 上
    猜你喜欢
    • 2022-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-24
    相关资源
    最近更新 更多