JSON за jqPlot

Бих искал да използвам jqPlot, използвайки данни от страната на сървъра, идващи в JSON, както е описано в този пример: http://www.jqplot.com/tests/data-renderers.php

Моят код е почти същият като примера:

function myGraph(jsonurl) {

  var ajaxDataRenderer = function(url, plot, options) {
    var ret = null;
    $.ajax({
      // have to use synchronous here, else the function
      // will return before the data is fetched
      async: false,
      url: url,
      dataType:"json",
      success: function(data) {
        ret=data;
        console.warn(data);
      }
    });
    return ret;
  };



var plot1 = $.jqplot('chartdiv', jsonurl, {
      title: 'myTitle',
      dataRenderer: ajaxDataRenderer,
      dataRendererOptions: {  unusedOptionalUrl: jsonurl    },
      series: [{
          label: 'myLabel',
          neighborThreshold: -1
      }],
      axes: {
          xaxis: {
              renderer: $.jqplot.DateAxisRenderer,
            //  min:'August 1, 2010 16:00:00',
              tickInterval: '2 months',
              tickOptions:{formatString:'%Y-%m-%d.%H:%M:%S'}
          },
          yaxis: {
              tickOptions:{formatString:'$%.2f'}
          }
      },
  });

От страната на сървъра използвам PHP (и Yii). Уеб страницата връща масив, който е кодиран в JSON с помощта на CJSON::encode($resultArray); (тази функция на Yii, преминала през функцията за кодиране на PHP JSON). Резултатите от PHP скрипта изглеждат така:

{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}

Заявката на Ajax от страна на клиента разреши нещо подобно (изход от console.info();)

Object { 2011-04-25 14:46:40=2,  2011-04-26 14:46:40=3, ...}

Вероятно jqPlot очаква следния формат:

[[["2011-04-25 14:46:40":0],["2011-04-26 14:46:40",3],["2011-04-27 14:46:40",0]]]

През цялото време получавам error uncaught exception: [object Object] Какво не е наред? Има ли начин да конвертирате обекта за в типичната форма на масив?

Благодаря ти


person The Bndr    schedule 14.07.2011    source източник


Отговори (4)


Имам нещо такова. Имах 2 масива за стойности, етикети. Трябва да конструирате низ както по-долу от масиви.

        $size = count($labels);

        for ($i = 0; $i < $size; $i++) {
            $result = $result . "['" . $labels[$i] . "'," . $values[$i] . "]";
            if($i != $size -1 ){
                $result = $result . ",";
            }
        }

ИЛИ ако нямате 2 масива и имате само този низ {"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14 :46:40":5} можете да замените { с [ , } с ] и , с ],[ . Мръсно, но бързо решение.

След горния код може да се наложи да добавите '[' и ']' от двете страни и да върнете стойност.

person Pit Digger    schedule 14.07.2011
comment
Мисля, че изграждането на низ от страна на PHP, който изглежда като JS масив, е по-скоро заобиколно решение. Но това е единственият начин, който работи. Между другото, трябва да анализирам низа от страна на клиента с eval. Което означава: resultArray=eval(data) - person The Bndr; 15.07.2011
comment
Това е много глупаво за начинаещ, но jqPlot очаква своите данни във формат [[val1, val2, val3]]. Благодаря за подсказката тук. - person kontur; 23.04.2012

Не анализирайте резултата от страна на клиента, jquery ще се справи много по-добре. Всъщност масивът, от който се нуждаете за jqplot, всъщност е валиден json. Всичко, което трябва да направите, е да подготвите вашите данни и да създадете подходящата структура на масив в PHP:

$pairs = array(1=>2, 3=>5, 4=>7, 5=>12, 7=>23); // simple example

$result = array();

foreach ($pairs as $label => $value) {
    $result[] = array($label,$value); // make a "small" array for each pair
}

echo json_encode(array($result)); // wrap the result into another array; multiple plot data go like "array($result, $result2, ...)"

Резултатът изглежда така:

[[[1,2],[3,5],[4,7],[5,12],[7,23]]] 

и е точно това, от което се нуждаете.

person dee38    schedule 26.02.2012

От http://www.jqplot.com/tests/date-axes.php

Забележете, въпреки че jqPlot ще анализира почти всяка четима от човека дата, най-безопасно е да използвате javascript времеви печати, когато е възможно. Освен това е най-добре да посочите дата и час, а не само дата. Това се дължи на непоследователното обработване на браузъра на местното време спрямо UTC с голи дати.

И примерни данни от сайта:

var line1=[['2008-09-30 4:00PM',4], ['2008-10-30 4:00PM',6.5], ['2008-11-30 4:00PM',5.7], ['2008-12-30 4:00PM',9], ['2009-01-30 4:00PM',8.2]];

Така че имате нужда от масив, пълен с масиви от 2 елемента. Първи низ с дата (използвайте клеймо за време, ако можете) и X стойност. Опитах се да намеря входен формат за парсване на дата и час или нещо подобно, но без резултат.

Вие генерирахте

{"2011-04-25 14:46:40":2,"2011-04-26 14:46:40":3,"2011-04-27 14:46:40":5}

който е обект с 3 полета. Името на първото поле е „2011-04-25 14:46:40“ и стойността му е зададена на 2. Трябва да генерирате масив по този начин:

[["2011-04-25 14:46:40", 0],["2011-04-26 14:46:40", 3],["2011-04-27 14:46:40", 0]]

JSFiddle с вашите данни изглежда работи - така че не се нуждаете от времеви отпечатъци;) http://jsfiddle.net/zpygcvps/1/

person Jacob Sobus    schedule 22.10.2014

синусоидална крива с PHP json_encode функция

страна на сървъра

<?php

    $y = array();

    $index = 0 ;
    for($x = 0 ; $x< 13 ; $x += 0.5) {
        $y[$index] =  sin($x);
        $index++ ;
    }

    $series = array();
    $series[0] = $y ;
    $data = json_encode($series);
    echo $data;

?>

клиентска страна

<script type="text/javascript">
        $(document).ready(function(){

            var ajaxDataRenderer = function(url, plot, options) {
            var ret = null;
            $.ajax({
              async: false,
              url: url,
              dataType:"json",
              success: function(data) {
                ret = data;
              }
            });
            return ret;
          };

        // The url for our json data
        var jsonurl = "/test/chart/jqplot-data.php";

        var plot2 = $.jqplot('chartdiv', jsonurl,{
            title: "AJAX JSON Data Renderer",
            dataRenderer: ajaxDataRenderer,
            dataRendererOptions: {
              unusedOptionalUrl: jsonurl
            }
          });

        });
    </script>
person rjha94    schedule 27.08.2012