Прямая трансляция Zingcharts не отображает диаграмму

Поэтому я пробовал ZingCharts, который мне в целом очень нравится. Но теперь я пытаюсь создать прямую трансляцию, и документация — это еще не все. ясно. Я пытаюсь использовать HTTP для обновления диаграммы новыми значениями. Кажется, мне нужна страница, которая отправляет данные диаграммы с обновленными значениями, и это то, что я делаю. Эта диаграмма отображается правильно, когда я пропускаю JSON непосредственно в браузере, но не в виде прямой трансляции, теперь она только выделенный текст правильно извлекается из /metrics_feed и отображает контур диаграммы, но она полностью серая. . JSON, который я отправляю по HTTP:

{
  "crosshair-x": {},
  "legend": {},
  "plot": {
    "valueBox": {
      "placement": "top",
      "type": "max, min",
      "visible": false
    }
  },
  "scaleX": {
    "label": {
      "text": "Metric count"
    }
  },
  "scaleY": {
    "label": {
      "text": "Metric value"
    }
  },
  "series": [
    {
      "text": "data point",
      "values": [
        -4.69283003950355,
        -4.692830039503548,
        -4.6928300395035505
      ]
    }
  ],
  "title": {
    "text": "metrics over time"
  },
  "tooltip": {},
  "type": "line"
}

И я планирую обновлять эти значения каждую секунду или около того. Вот мой боковой код HTML:

<head>

...

<script type="text/javascript">
var myChart = {"refresh":{
    "type":"feed",
    "transport":"http",
    "url":"/metrics_feed",
    "interval":1000
    }
};
    window.onload=function(){
        zingchart.render({
            id:"myChartDiv",
            data:myChart,
            height:600,
            width:"100%"
        });
    };

</script>
</head>

<body>
    <div id="myChartDiv"></div>
</body>

И все это работает, когда я копирую туда прямой JSON вместо того, чтобы отправлять его по HTTP, так что я кое-что упустил в документации Zingcharts, я полагаю.


javascript json charts visualization zingchart
person clifgray    schedule 11.02.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я состою в группе поддержки ZingChart и буду рад помочь вам разобраться. Вы захотите настроить большинство параметров и объектов диаграммы на своей странице, поэтому в объекте myChart. Это означает, что перекрестие-x, легенда, сюжет и т. д. должны быть статичными на странице и не передаваться через HTTP. В объекте JSON создайте объекты пустой серии в массиве серий для каждой серии, которую вы будете передавать на диаграмму. Итак, если у вас будет только одна серия:

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
    {
        "values": []
    }
    ]
}

И если вы будете передавать 2 значения серии:

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
    {
        "values": []
    },
    {
        "values": []
    }
    ]
}

Объект «обновить» также должен быть помещен в объект myData на верхнем уровне:

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"refresh":{
    "type":"feed",
    "transport":"http",
    "url":"/metrics_feed",
    "interval":1000
},
"series": [
    {
        "values": []
    },
    {
        "values": []
    }
    ]
}

В зависимости от того, сколько объектов ряда вы хотите добавить в свою диаграмму, настройте свой скрипт для передачи значений в следующем формате:

[ { "plot0" : 27, "plot1" : 34 } ]

Вот скрипт feeds.php, который мы используем для диаграмма в разделе HTTP нашей статьи о фидах:

<?php
$min = isset($_GET['min'])?intval($_GET['min']):0;
$max = isset($_GET['max'])?intval($_GET['max']):50;
$plots = isset($_GET['plots'])?intval($_GET['plots']):1;
?>
[
    {
        <?php
        for ($plot=0;$plot<$plots;$plot++) {
        ?>
        "plot<?php echo $plot; ?>" : <?php echo rand($min, $max); ?>,
        <?php
        }
        ?>
        "scale-x" : "<?php echo date('H:i:s'); ?>"
    }
]

Этот скрипт также возвращает метку времени, которая вводится в пустой массив значений в нашем объекте scale-x. Пример ответа можно посмотреть здесь.

Я прошу прощения, если наши документы не прояснили это, я скоро обновлю их с дополнительными разъяснениями. В любом случае, я надеюсь, что это поможет вам! Дайте мне знать, если вам нужна дополнительная помощь.

person Stalfos    schedule 11.02.2015
comment
Хорошо, фантастика, это большая помощь. Сценарий хороший, но, по крайней мере, для меня пример фактического возвращаемого документа json был бы наиболее полезным! Это здорово, хотя. - person clifgray; 11.02.2015
comment
Что-то подобное нужно включить в примеры в документации zingchart. Я сделал за 5 минут с этим ответом то, что я не смог сделать за 2 часа, пытаясь сократить примеры из: zingchart.com/docs/features/feeds - person Aaron; 11.06.2015