2015-02-11 4 views
2

Так что я пробовал ZingCharts, в общем, мне нравится тонна. Но теперь я пытаюсь создать живой канал, и documentation не так уж и ясен. Я пытаюсь использовать HTTP для обновления диаграммы с новыми значениями. Кажется, что мне нужна страница, которая отправляет данные диаграммы с обновленными значениями, и это то, что я делаю. Эта диаграмма корректно отображается, когда я проходил мимо JSON прямо в браузере, но не как живой канал, теперь только текст правильно вытягивает из/metrics_feed и отображает контур диаграммы, но он серый. JSON Я посылаю через HTTP является:Zingcharts live feed not rendering chart

{ 
    "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 я полагаю.

ответ

3

Я нахожусь в команде поддержки ZingChart, и я рад помочь вам разобраться в этом. Вам нужно настроить большинство настроек и объектов диаграммы на своей странице, поэтому в объекте myChart. Это означает, что crosshair-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, который мы используем для the chart under the HTTP section of our feeds article:

<?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'); ?>" 
    } 
] 

Этот сценарий также возвращает временную метку, которая получает впрыскивается в пустой массив значений в нашей шкале-х объектов. Вы можете увидеть образец ответа here.

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

+1

Все в порядке, это большая помощь. Сценарий хорош, но, по крайней мере, для меня вернул пример фактического документа json, который был бы наиболее полезным! Это здорово. – clifgray

+0

Что-то вроде этого нужно переходить к примерам в документах zingchart. Я получил через 5 минут с этим ответом то, что я не мог сделать за 2 часа, пытаясь сократить примеры из: http://www.zingchart.com/docs/features/feeds/ – Aaron