Javascript 带有chart.js和PHP的动态折线图_Javascript_Php_Mysql_Chart.js_Dynamic Programming

Javascript 带有chart.js和PHP的动态折线图

javascript php mysql chart.js

Javascript 带有chart.js和PHP的动态折线图,javascript,php,mysql,chart.js,dynamic-programming,Javascript,Php,Mysql,Chart.js,Dynamic Programming,我正试图用chart.js折线图显示MySQL数据库中的数据。我通过PHP访问数据库中的数据，收到一个包含数百个字符串的数组，如下所示我收到的数据集的格式如下： [ {"0":"MARKER01","timestamp":"1607943600","VALUE1":"3.02","VALUE2":"3.03","VALUE3&

我正试图用

chart.js

折线图显示MySQL数据库中的数据。我通过PHP访问数据库中的数据，收到一个包含数百个字符串的数组，如下所示

我收到的数据集的格式如下：

[
{"0":"MARKER01","timestamp":"1607943600","VALUE1":"3.02","VALUE2":"3.03","VALUE3":"3.16"},
{"0":"MARKER01","timestamp":"1607932800","VALUE1":"3.72","VALUE2":"2.93","VALUE3":"3.00"},
{"0":"MARKER01","timestamp":"1607882400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
{"0":"MARKER01","timestamp":"1607864400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
{"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
{"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
{"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
{"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
{"0":"MARKER07","timestamp":"1607882400","VALUE1":"2.74","VALUE2":"4.26","VALUE3":"4.26"},
{"0":"MARKER07","timestamp":"1607884400","VALUE1":"2.75","VALUE2":"4.26","VALUE3":"4.26"},
{"0":"MARKER00","timestamp":"1607882400","VALUE1":"5.64","VALUE2":"2.09","VALUE3":"1.30"},
{"0":"MARKER00","timestamp":"1607884400","VALUE1":"5.65","VALUE2":"2.09","VALUE3":"1.30"}
]

使用javascript，我需要输入以下格式，以便能够绘制每个标记值组合的图表：

{
data: {
    m1v1: { 
        [timestamp: 1607932800, value: 1.17],
        ...
    },
    m1v2: {
        [timestamp: 1607932800, value: 3.43],
        ...
    },
    m1v2: {
        [timestamp: 1607932800, value: 2.72],
        ...
    },
    m2v1...and so on
    
}

当然，我当前的代码只显示一个标记，因为到目前为止还没有动态的标记。以下是我迄今为止管理的代码：

$.getJSON("http://localhost/chart.php",function(data){ 

    //get the line chart canvas
    var ctx = $("#Chart");

    //line chart data
    var time = [];
    var value1 = [];
    var value2 = [];
    var value3 = [];

    for (var i = 0; i < data.length; i++) {
        var date = new Date( data[i].timestamp *1000);
        time.push(date.toLocaleString());
        value1.push(data[i].VALUE1);
        value2.push(data[i].VALUE2);
        value3.push(data[i].VALUE3);
    }

    var chartData = {
        labels: time,
        datasets: [
            {
                label: 'Value1',
                backgroundColor: 'blue',
                borderColor: 'blue',
                hoverBackgroundColor: '#CCCCCC',
                hoverBorderColor: '#666666',
                fill: false,
                lineTension: 0,
                radius: 0,
                data: value1
            },
            {
                label: 'Value2',
                backgroundColor: 'green',
                borderColor: 'green',
                hoverBackgroundColor: '#CCCCCC',
                hoverBorderColor: '#666666',
                fill: false,
                lineTension: 0,
                radius: 0,
                data: value2
            },
            {
                label: 'Value2',
                backgroundColor: 'red',
                borderColor: 'red',
                hoverBackgroundColor: '#CCCCCC',
                hoverBorderColor: '#666666',
                fill: false,
                lineTension: 0,
                radius: 0,
                data: value3
            },
        ]
    };

    //options
    var options = {
        responsive: true,
        title: {
            display: true,
            position: "top",
            text: "Chart",
            fontSize: 18,
            fontColor: "#111"
    },
    legend: {
        display: true,
        position: "top",
        labels: {
            fontColor: "#333",
            fontSize: 16
            }
        },
        scales: {
            yAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Value [ ]'
            },
            ticks: {
                beginAtZero: true   
            }
            }]
        }
    };

    //create Chart class object
    var chart = new Chart(ctx, {
        type: "line",
        data: chartData,
        options: options
    });
});

我的SQL数据库结构：我的“常规”表：

我的“价值”表：

我的PHP用于获取数据：

 <?php

$resultArray = array();

// 1. Search in general table for query
$info="WITH ranked_data AS ( SELECT m.*, ROW_NUMBER() OVER (PARTITION BY markerId ORDER BY id DESC) AS rn FROM data AS m ) SELECT id, markerId, lon, lat FROM ranked_data WHERE rn = 1;";
$sql=($info);

// Check if there are results
if ($result = mysqli_query($con, $sql))
    {
        // Loop through rows in the result set
        if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) 
    
            {      
                // Add active row into our temp array
                $tempArray = $row;
                
                $markerId = array_values($tempArray); //saves the value of the table fields 
               
                $sid=$markerId[1]; //saves sensor id value
          
                $tableName=$sid.'_values'; //varaible table name messdata for every iteration
            
                // 2. Next search in value table for query
                $info2="SELECT timestamp, VALUE1, VALUE2, VALUE3 FROM $tableName order by id  desc limit 400";
                $sql2=($info2);

                // Check if there are results
                if ($result2 = mysqli_query($con, $sql2))
                    {
                        // Loop through rows in the result set
                        while($row2 = $result2->fetch_object())
                            {
                                // Add active row into our temp array
                                $tempArray2 = $row2;
                                
                                // Add all temp arrays to result table
                                $midArray = (object) array_merge((array)$sid, (array) $tempArray2);
                                array_push($resultArray, $midArray);


                            }    
                    }
            }   
    }
}      

// Echo out final result array
echo json_encode($resultArray);

使用您的代码：

将值添加到数组时，请尝试使用parseInt：

for (var i = 0; i < data.length; i++) {
    var date = new Date( data[i].timestamp *1000);
    time.push(date.toLocaleString());
    value1.push(parseInt(data[i].a));
    value2.push(parseInt(data[i].b));
    console.log(parseInt(data[i].b));
    
}

使用您的完整代码

var数据=[
{“时间戳”：“1607943100”，“a”：“1.5”，“b”：“2.81”，“c”：“7.81”}，
{“时间戳”：“1607943200”，“a”：“2.7”，“b”：“8.10”，“c”：“3.10”}，
{“时间戳”：“1607943300”，“a”：“1.3”，“b”：“1.77”，“c”：“4.77”}，
{“时间戳”：“1607943400”，“a”：“5.2”，“b”：“4.71”，“c”：“2.71”}，
{“时间戳”：“1607943500”，“a”：“9.4”，“b”：“4.43”，“c”：“7.43”}，
{“时间戳”：“1607943600”，“a”：“6.5”，“b”：“3.26”，“c”：“9.26”}，
];
//获取折线图画布
var ctx=$（“我的图表”）；
//折线图数据
var时间=[]；
var值1=[]；
var值2=[]；
var值3=[]；
对于（变量i=0；i

在我看来，javascript中的多级数组更痛苦，因为您必须执行数组对象组合或拥有固定的多维数据集：

看

因此，为什么PHP甚至SQL更容易构建数据集。然而，我选择了忍耐，你看：

 var jsondata = [
 {"0":"MARKER01","timestamp":"1607943600","VALUE1":"3.02","VALUE2":"3.03","VALUE3":"3.16"},
 {"0":"MARKER01","timestamp":"1607932800","VALUE1":"3.72","VALUE2":"2.93","VALUE3":"3.00"},
 {"0":"MARKER01","timestamp":"1607882400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
 {"0":"MARKER01","timestamp":"1607864400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
 {"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
 {"0":"MARKER07","timestamp":"1607882400","VALUE1":"2.74","VALUE2":"4.26","VALUE3":"4.26"},
 {"0":"MARKER07","timestamp":"1607884400","VALUE1":"2.75","VALUE2":"4.26","VALUE3":"4.26"},
 {"0":"MARKER00","timestamp":"1607882400","VALUE1":"5.64","VALUE2":"2.09","VALUE3":"1.30"},
 {"0":"MARKER00","timestamp":"1607884400","VALUE1":"5.65","VALUE2":"2.09","VALUE3":"1.30"},
 ];

// default obj for testing
var obj = [{
    id : 1, 
    label: 'MARKER01', 
    stamp: '',
    data: [],
}];

for (var i = 0; i < jsondata.length; i++) 
{
    var row = Object.values(jsondata[i]);
    var marker = row[0];  
    var index = add(obj, marker);
    obj[index].stamp = new Date( row[1] *1000);
    for (var j = 2; j < row.length; j++) {
       obj[index].data.push(row[j]);
    }
   
}

console.log(obj);

/**
 * add function thanks to: https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition
 */
function add(arr, name) {
  var { length } = arr;
  var id = length + 1;
  var index = arr.findIndex(x => x.label === name);
  if (index === -1) {
    arr.push({ id, label: name, stamp: '', data: []})
    index = arr.findIndex(x => x.label === name);
  } 
  console.log(index);
  return index;
}

// You can test with console.log(add(obj, 'test'));

设置日期和时间的格式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

<script>
var s1 = {
  label: 's1',
  borderColor: 'blue',
  data: [
    { x: 1606943100000, y: 1.5 },
    { x: 1607943200000, y: 2.7 },
    { x: 1608943300000, y: 1.3 },
    { x: 1609943400000, y: 5.2 },
    { x: 1610943500000, y: 9.4 },
    { x: 1611943600000, y: 6.5 },
  ]
};

var s2 = {
  label: 's2',
  borderColor: 'red',
  data: [
    { x: 1604953100000, y: 4.5 },
    { x: 1607963200000, y: 2.7 },
    { x: 1608973300000, y: 3.3 },
    { x: 1613983400000, y: 4.2 },
    { x: 1620993500000, y: 7.4 },
    { x: 1632043600000, y: 6.5 },
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unitStepSize: 500,
          unit: 'hour', // check displayFormat to match
          displayFormats: {
            hour: 'hA', 
            day: 'YYYY-MM-DD',
            month: 'YYYY-MM'
          }
        }
      }]
    }
  }
});
</script>


变量s1={
标签：“s1”，
边框颜色：“蓝色”，
数据：[
{x:1606943100000，y:1.5}，
{x:1607943200000，y:2.7}，
{x:1608943300000，y:1.3}，
{x:1609943400000，y:5.2}，
{x:1610943500000，y:9.4}，
{x:1611943600000，y:6.5}，
]
};
变量s2={
标签：“s2”，
边框颜色：“红色”，
数据：[
{x:1604953100000，y:4.5}，
{x:1607963200000，y:2.7}，
{x:1608973300000，y:3.3}，
{x:1613983400000，y:4.2}，
{x:1620993500000，y:7.4}，
{x:163243600000，y:6.5}，
]
};
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
键入：“行”，
数据：{数据集：[s1，s2]}，
选项：{
比例：{
xAxes：[{
键入：“时间”，
时间：{
单位步长：500，
单位：'小时'，//检查显示格式是否匹配
显示格式：{
小时:"哈",，
日期：“YYYY-MM-DD”，
月份：“YYYY-MM”
}
}
}]
}
}
});

您可能需要将数字转换为整数而不是字符串。整数周围不会有双引号。我相信data[I].VALUE1.parseInt（）是您需要做的。谢谢您的建议！我明白你的意思。我创建了一个与

数据类似的树。slice

，但无法（根据您的想法）为每个新标记动态地对其进行切片或解析。。。您知道如何在一个标记后停止，然后重新开始下一个标记吗？只需传递一个小的json数据字符串，并使用console.log进行故障排除。F12通常在大多数浏览器中打开调试器。您甚至可以在调试器控制台中键入命令来检查输出。我将在一个小时左右的时间内查看，看看我能为您做些什么。我更新了您的问题，数据格式的示例输出正确吗？谢谢您的输入！我要将字符串添加到int转换！但我仍然有一个不同的标记问题。。。我希望有一个带有MARKER01的数据集在图表中显示VALUE1、VALUE2、VALUE3的行；1个带有MARKER03的数据集，在图表中显示值1M VALUE2、VALUE3的行；依此类推，无论每个标记的字符串数量是多少，都可以动态地对所有标记执行此操作。你也有什么想法来解决这个问题吗？有点被你的要求搞糊涂了，你能模拟一个例子吗，即图表和数据集是什么样子的？另外，你能定义一下什么标记吗

var obj = [];

for (var i = 0; i < jsondata.length; i++) 
{
    var row = Object.values(jsondata[i]);
    var marker = row[0];  
    var index = add(obj, marker);
    
    for (var j = 6; j < row.length; j++) {
        const dateObject = new Date(row[1]*1000);
        var date = dateObject.toLocaleString();
        obj[index].data.push({time: date, value1: row[2], value2: row[3], value3: row[4]}); 
    }
}

console.log(obj);


[![Excel example for chart][3]][3]

I believe, it makes more sense to only display 1 marker with its values at once to keep it clearer. And I hope it is also less complicated code.

The markers (or datasets) that were made with the [answer on 2020/12/29][4] should be able to be chosen with the help of something like a dropdown. But it still needs to be implemented into the chart.js code by a dynamic solution because there will be markers added in the future.
So basically (in my undertanding) there has to be something like a loop to split the JSON data fetch with PHP into the markers (done with answer mentioned above) and something like another loop to add all the data of the markers (split from the PHP) to the chart.js datasets for displaying them as lines. Is this correct? Or is there a more comfortable way to do it?

Regarding the data, there are 3 values (value 1, value 2, value 3) for every timestamp and the next timestamp (approx. every hour) has the next 3 values and so on... The values should be displayed as the come from the database (no average or other calculation in this place).
For this use is it better to split the `PHP` into 3 "datasets" with 1 timestamp each (like: `timestamp1, value1 | timestamp1, value2 | timestamp1, value3`) or just display all values with 1 timestamp (like I did before: `timestamp1, value1, value2, value3`)? Or does something completely else suit better?

  [1]: https://i.stack.imgur.com/kVZkS.png
  [2]: https://www.chartjs.org/samples/latest/
  [3]: https://i.stack.imgur.com/1YYCX.png
  [4]: https://stackoverflow.com/a/65486900/14861343

for (var i = 0; i < data.length; i++) {
    var date = new Date( data[i].timestamp *1000);
    time.push(date.toLocaleString());
    value1.push(parseInt(data[i].a));
    value2.push(parseInt(data[i].b));
    console.log(parseInt(data[i].b));
    
}

var jsonString = '[{"x":1.5}, {"x":2.7}]';

var obj  = JSON.parse(jsonString);
console.log('obj:'); console.log(obj);
// outputs obj array: [{x: 1.5} {x: 2.7}]

var dataset1 = $.map(obj, function(val, i){
    console.log('x: ' + val.x);
    return val.x;
});
console.log('dataset1 :'); console.log(dataset1);
//ouputs new array with just values: (2) [1.5, 2.7]

var data = [
{"timestamp":"1607943100","a":"1.5", "b":"2.81", "c":"7.81"},
{"timestamp":"1607943200","a":"2.7", "b":"8.10", "c":"3.10"},
{"timestamp":"1607943300","a":"1.3", "b":"1.77", "c":"4.77"},
{"timestamp":"1607943400","a":"5.2", "b":"4.71", "c":"2.71"},
{"timestamp":"1607943500","a":"9.4", "b":"4.43", "c":"7.43"},
{"timestamp":"1607943600","a":"6.5", "b":"3.26", "c":"9.26"},
];

//get the line chart canvas
var ctx = $("#myChart");

//line chart data
var time = [];
var value1 = [];
var value2 = [];
var value3 = [];

for (var i = 0; i < data.length; i++) {
    var date = new Date( data[i].timestamp *1000);
    time.push(date.toLocaleString());
    value1.push(parseInt(data[i].a));
    value2.push(parseInt(data[i].b));
    value3.push(parseInt(data[i].c));
    
    // some debugging
    console.log(parseInt(data[i].b));
}

var chartData = {
    labels: time,
    datasets: [
        {
            label: 'Value1',
            backgroundColor: 'blue',
            borderColor: 'blue',
            hoverBackgroundColor: '#CCCCCC',
            hoverBorderColor: '#666666',
            fill: false,
            lineTension: 0,
            radius: 0,
            data: value1
        },
        {
            label: 'Value2',
            backgroundColor: 'green',
            borderColor: 'green',
            hoverBackgroundColor: '#CCCCCC',
            hoverBorderColor: '#666666',
            fill: false,
            lineTension: 0,
            radius: 0,
            data: value2
        },
        {
            label: 'Value3',
            backgroundColor: 'red',
            borderColor: 'red',
            hoverBackgroundColor: '#CCCCCC',
            hoverBorderColor: '#666666',
            fill: false,
            lineTension: 0,
            radius: 0,
            data: value3
        },
    ]
};

//options
var options = {
    responsive: true,
    title: {
        display: true,
        position: "top",
        text: "Chart",
        fontSize: 18,
        fontColor: "#111"
},
legend: {
    display: true,
    position: "top",
    labels: {
        fontColor: "#333",
        fontSize: 16
        }
    },
    scales: {
        yAxes: [{
        scaleLabel: {
            display: true,
            labelString: 'Value [ ]'
        },
        ticks: {
            beginAtZero: true   
        }
        }]
    }
};

//create Chart class object
var chart = new Chart(ctx, {
    type: "line",
    data: chartData,
    options: options
});

 var jsondata = [
 {"0":"MARKER01","timestamp":"1607943600","VALUE1":"3.02","VALUE2":"3.03","VALUE3":"3.16"},
 {"0":"MARKER01","timestamp":"1607932800","VALUE1":"3.72","VALUE2":"2.93","VALUE3":"3.00"},
 {"0":"MARKER01","timestamp":"1607882400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
 {"0":"MARKER01","timestamp":"1607864400","VALUE1":"3.10","VALUE2":"3.06","VALUE3":"2.98"},
 {"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.30","VALUE2":"2.41","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607943600","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
 {"0":"MARKER03","timestamp":"1607864400","VALUE1":"2.29","VALUE2":"2.37","VALUE3":"2.74"},
 {"0":"MARKER07","timestamp":"1607882400","VALUE1":"2.74","VALUE2":"4.26","VALUE3":"4.26"},
 {"0":"MARKER07","timestamp":"1607884400","VALUE1":"2.75","VALUE2":"4.26","VALUE3":"4.26"},
 {"0":"MARKER00","timestamp":"1607882400","VALUE1":"5.64","VALUE2":"2.09","VALUE3":"1.30"},
 {"0":"MARKER00","timestamp":"1607884400","VALUE1":"5.65","VALUE2":"2.09","VALUE3":"1.30"},
 ];

// default obj for testing
var obj = [{
    id : 1, 
    label: 'MARKER01', 
    stamp: '',
    data: [],
}];

for (var i = 0; i < jsondata.length; i++) 
{
    var row = Object.values(jsondata[i]);
    var marker = row[0];  
    var index = add(obj, marker);
    obj[index].stamp = new Date( row[1] *1000);
    for (var j = 2; j < row.length; j++) {
       obj[index].data.push(row[j]);
    }
   
}

console.log(obj);

/**
 * add function thanks to: https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition
 */
function add(arr, name) {
  var { length } = arr;
  var id = length + 1;
  var index = arr.findIndex(x => x.label === name);
  if (index === -1) {
    arr.push({ id, label: name, stamp: '', data: []})
    index = arr.findIndex(x => x.label === name);
  } 
  console.log(index);
  return index;
}

// You can test with console.log(add(obj, 'test'));

 Object { id: 1, label: "MARKER01", stamp: Sun Dec 13 2020 08:00:00 GMT-0500 (Eastern Standard Time), data: Array ["3.02", "3.03", "3.16", "3.72", "2.93", "3.00", "3.10", "3.06", "2.98", "3.10", "3.06", "2.98"] },
 Object { id: 2, label: "MARKER03", stamp: Sun Dec 13 2020 08:00:00 GMT-0500 (Eastern Standard Time), data: Array ["2.30", "2.41", "2.74", "2.30", "2.41", "2.74", "2.29", "2.37", "2.74", "2.29", "2.37", "2.74"] },
 Object { id: 3, label: "MARKER07", stamp: Sun Dec 13 2020 13:33:20 GMT-0500 (Eastern Standard Time), data: Array ["2.74", "4.26", "4.26", "2.75", "4.26", "4.26"] },
 Object { id: 4, label: "MARKER00", stamp: Sun Dec 13 2020 13:33:20 GMT-0500 (Eastern Standard Time), data: Array ["5.64", "2.09", "1.30", "5.65", "2.09", "1.30"] }
]```

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

<script>
var s1 = {
  label: 's1',
  borderColor: 'blue',
  data: [
    { x: 1606943100000, y: 1.5 },
    { x: 1607943200000, y: 2.7 },
    { x: 1608943300000, y: 1.3 },
    { x: 1609943400000, y: 5.2 },
    { x: 1610943500000, y: 9.4 },
    { x: 1611943600000, y: 6.5 },
  ]
};

var s2 = {
  label: 's2',
  borderColor: 'red',
  data: [
    { x: 1604953100000, y: 4.5 },
    { x: 1607963200000, y: 2.7 },
    { x: 1608973300000, y: 3.3 },
    { x: 1613983400000, y: 4.2 },
    { x: 1620993500000, y: 7.4 },
    { x: 1632043600000, y: 6.5 },
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unitStepSize: 500,
          unit: 'hour', // check displayFormat to match
          displayFormats: {
            hour: 'hA', 
            day: 'YYYY-MM-DD',
            month: 'YYYY-MM'
          }
        }
      }]
    }
  }
});
</script>