Highcharts使用数据库数据

时间:2017-07-30 15:24:42

标签: javascript mongodb highcharts

我正在使用HighCharts显示来自MongoDB的数据。大多数时候,我正在返回简单数据,我可以将它显示在图表中,没有任何问题。在这个特殊情况下,我返回的是更复杂的数据,我无法填充它,所以我显然遗漏了一些东西。

基本上,我在数据库中查询一系列日期。在我的程序中,我每15分钟拍摄一次像工作中的员工一样的快照,所以每天有96个条目。这是我要返回的数据的快照:

 [{date: "2017-06-15T03:00:00.000Z",…}, {date: "2017-06-16T03:00:00.000Z", result: [,…]},…]
0
:
{date: "2017-06-15T03:00:00.000Z",…}
1
:
{date: "2017-06-16T03:00:00.000Z", result: [,…]}
date
:
"2017-06-16T03:00:00.000Z"
result
:
[,…]
0
:
{capture: "2017-06-16T00:00:00.000-03:00", sector: 5, cjs: ["FO", "TU", "HI", "ZV", "MI"], sitting: 5,…}
1
:
{capture: "2017-06-16T00:15:00.000-03:00", sector: 5, cjs: ["TU", "HI", "MI", "FO", "ZV"], sitting: 5,…}
2
:
{capture: "2017-06-16T00:30:00.000-03:00", sector: 5, cjs: ["MI", "FO", "ZV", "HI", "TU"], sitting: 5,…}
3
:
{capture: "2017-06-16T00:45:00.000-03:00", sector: 5, cjs: ["FO", "ZV", "HI", "TU", "MI"], sitting: 5,…}
4
:
{capture: "2017-06-16T01:00:00.000-03:00", sector: 5, cjs: ["FO", "ZV", "HI", "TU", "MI"], sitting: 5,…}
5
:
{capture: "2017-06-16T01:15:00.000-03:00", sector: 5, cjs: ["MI", "FO", "ZV", "HI", "TU"], sitting: 5,…}
6
:
{capture: "2017-06-16T01:30:00.000-03:00", sector: 5, cjs: ["MI", "FO", "ZV", "HI", "TU"], sitting: 5,…}
7
:
{capture: "2017-06-16T01:45:00.000-03:00", sector: 5, cjs: ["MI", "FO", "ZV", "HI", "TU"], sitting: 5,…}

如您所见,数据返回日期和一个名为result的数组。在这个数组中是我想要在图表中访问的数据。我希望我的X轴列出捕获时间(每15分钟增量)和Y轴列出每15分钟增量的扇区数。

我的HighCharts代码是:

function loadData() {
                                    var url = 'http://maccdx170131:4567/api/v1/sat/sectorutilization' + "?sdate=" + $('#sdate').val();
                                    url = url + "&edate=" + $('#edate').val();
                                    var date = new Array();

$.getJSON(url, function(data) {



                                            for (i = 0; i < data.length; i++) {



                                                date.push ([new Date(data[i].result.capture).getTime(), data[i].result.sector]);
                                            }


                                            // draw chart
                                            $('#sc_bar').highcharts({
                                                chart: {
                                                    type: "column"
                                                },
                                                tooltip: {
                                                    pointFormat: "Staff: {point.y:,.0f} people"
                                                },
                                                credits: {
                                                    enabled: false
                                                },
                                                title: {
                                                    text: "Sector Utilization"
                                                },
                                                xAxis: {
                                                    type: 'datetime',
                                                    labels: {
                                                        format: '{value:%Y-%m-%d}',
                                                        rotation: 45
                                                    },
                                                    title: {
                                                        text: "Date"
                                                    }
                                                },
                                                yAxis: {
                                                    title: {
                                                        text: "Sector Count"
                                                    }

                                                },
                                                series: [{
                                                    name: 'Sector Utilization',


                                                    data : date
                                                }]
                                            });
                                        });
                                    }

我知道Highcharts的当前脚本不正确,但我似乎无法弄明白。

任何想法都会受到赞赏!!

0 个答案:

没有答案