2014-01-03 5 views
0

Im используя это сделать Highcharts столбцов jsfiddle я использовать это Gt JSON:Highcharts - анализирующие JSon серии

<?php 
    $query = mysql_query("SELECT 
           sales_raport_all.from_date, 
           sales_raport_all.to_date, 
           sales_raport_all.konto, 
           SUM(sales_raport_all.saldo_sprzedazy), 
           SUM(sales_raport_all.wartosc_kosztowa), 
           SUM(sales_raport_all.marza), 
           klienci_ax_all.sales_group, 
           klienci_ax_all.nazwa 
          FROM 
           sales_raport_all 
          INNER JOIN 
           klienci_ax_all 
          ON 
           sales_raport_all.konto=klienci_ax_all.konto_odbiorcy 
          WHERE 
           YEAR(from_date) = YEAR(CURDATE()) 
          GROUP BY 
           sales_raport_all.from_date, 
klienci_ax_all.sales_group 
          ORDER BY 
           sales_raport_all.from_date, 
klienci_ax_all.sales_group"); 

$raw = array(); 
$dates = array(); 
while ($r = mysql_fetch_array($query)) { 
$date = $r['from_date']; 
if (!in_array($date, $dates)) $dates[] = $date; 
$sales_group = $r['sales_group']; 
$raw[$sales_group][$date] = intval($r['SUM(sales_raport_all.saldo_sprzedazy)']); 
} 
$data = array(); 
$data[0] = array('name' => "Date", 'data' => $dates); 
foreach ($raw as $name => $d) { 
$new_data = array('name' => $name, 'data' => array()); 
foreach ($dates as $date) { 
    $new_data['data'][] = isset($d[$date]) ? $d[$date] : 0; 
} 
$data[] = $new_data; 
} 

print json_encode($data); 

в скрипку я использую

chart3Options.series[0] = json[1]; 
... 

есть простой способ определить все данные в json? эти данные переменной и если я объявляю 11 переменных и будет только 7, то графики не рисовать вывод JSON на одну дату:

[{"name":"Date","data":["2014-01-01"]},{"name":"IN","data":[2580]},{"name":"KD","data":[5030]},{"name":"\u0141S","data":[12628]},{"name":"NN","data":[400]},{"name":"SG","data":[12979]},{"name":"TD","data":[15096]}] 

// EDIT

я создать новый файл:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'column', 
        marginRight: 130, 
        marginBottom: 25 
       }, 
       title: { 
        text: 'test', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'test' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +': '+ this.y; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -10, 
        y: 100, 
        borderWidth: 0 
       }, 
       series: [] 
      } 

      $.getJSON("test2.php", function(json) { 
       options.xAxis.categories = json[0]['category']; 
       options.series[0] = {}; 
       options.series[0].name = json[0]['name']; 
       options.series[0].data = json[0]['data']; 
       chart = new Highcharts.Chart(options); 
      }); 
     }); 
     </script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    </head> 
    <body> 
     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html> 

и test2.php

<?php 
     $db_host  = '******'; 
     $db_user  = '******'; 
     $db_pass  = '******'; 
     $db_database  = '******'; 

     $link = mysql_connect($db_host,$db_user,$db_pass) or die('Nawiązanie połączenia z bazą danych nie było możliwe'); 

     mysql_select_db($db_database,$link); 
     mysql_query("SET names UTF8"); 

     $query = mysql_query("SELECT 
            sales_raport_all.from_date, 
            sales_raport_all.to_date, 
            sales_raport_all.konto, 
            SUM(sales_raport_all.saldo_sprzedazy), 
            SUM(sales_raport_all.wartosc_kosztowa), 
            SUM(sales_raport_all.marza), 
            klienci_ax_all.sales_group, 
            klienci_ax_all.nazwa 
           FROM 
            sales_raport_all 
           INNER JOIN 
            klienci_ax_all 
           ON 
            sales_raport_all.konto=klienci_ax_all.konto_odbiorcy 
           WHERE 
            YEAR(from_date) = YEAR(CURDATE()) 
           GROUP BY 
            sales_raport_all.from_date, 
    klienci_ax_all.sales_group 
           ORDER BY 
            sales_raport_all.from_date, 
    klienci_ax_all.sales_group"); 


$result = array(); 



while($r = mysql_fetch_array($query)) { 
    $grupa = $r['sales_group']; 
    $datetime = $r['from_date']; 
    $result['name'][] = $datetime; 
    $result['category'][] = $grupa; 
    $result['data'][] = intval($r['SUM(sales_raport_all.saldo_sprzedazy)']); 
} 

$json = array(); 
array_push($json,$result); 
print json_encode($json); 

?> 

JSON дать мне:

[{"name":["2014-01-01","2014-01-01","2014-01-01","2014-01-01","2014-01-01","2014-01-01"],"category":["IN","KD","\u0141S","NN","SG","TD"],"data":[2580,5030,12628,400,12979,15096]}] 

Series выглядит Greate но я не знаю, как изменить категорию, как в примере http://jsfiddle.net/rubJS/

+0

неправильный формат json – SPandya

+0

и какой формат? Я видел этот формат в одном примере :( –

+0

Формат должен быть массивом без кавычек – SPandya

ответ

1

Вы можете обрабатывать его в JavaScript. Другими словами, вместо определения переменной для каждой пары <x,y>, верните данные и дайте javascript построить серию. Например, с учетом вашего текущего вывода вы можете подготовить значения X и Y (в javascript) в отдельных массивах и написать функцию, которая будет приводить эти значения в ряд. Это может быть сделано, как это (с помощью JQuery в качестве примера):

function build_chart(x_values, y_values, options) 
{ 
    jQuery.each(x_values, function(item) { 
     options.xAxis.categories.push(x_values[item]); 
    }); 

    var series = { 
     data: [] 
    }; 

    jQuery.each(y_values, function(item) { 
     series.data.push(parseInt(y_values[item])); 
    }); 

    options.series.push(series); 
    chart = new Highcharts.Chart(options); 

    return chart; 

} 

Где переменная options определяет шаблон диаграммы без series элемента (который добавляют к вышеописанной функции)

EDIT

После редактирования в вопросе, вот jsFiddle, поддерживающий его. Обратите внимание, что данные в JSON представлены в виде массива массивов. Первый элемент в каждом массиве соответствует первой категории, второй элемент в каждом массиве соответствует второй категории и т. Д.

+0

, но сначала из {"name": "Date", "data": ["2014-01-01"]} является категорией - не серия. –

+0

Вы можете подготовить свои данные согласно категории, т.е.следуя вашему примеру: '[{" category ": {" name ":" Date "," data ": [" 2014-01-01 "]}," series ": [{" name ":" IN "," data ": [2580]}, {" name ":" KD "," data ": [5030]}, {" name ":" \ u0141S "," data ": [12628]}]}, {" category ": {" name ":" Date "," data ": [" 2014-01-02 "]}," series ": [{" name ":" IN "," data ": [1234]}]} ]; '. –

+0

Это то, что я ищу, но как добавить это в кодировку JSON? –

0

Помимо неправильного формата json (который был упомянут) вам нужно подталкивать свои даты как категории в high-chart или использовать дату и время тип оси, а затем проанализируйте свою дату на отметку времени.

+0

Я смотрю везде ... может ли кто-нибудь показать мне хороший пример, как правильно закодировать это? им новичок. –

+1

Я изменяю JSON на '[{" name ":" Data "," data ": [" 2014-01-01 "," 2014-01-01 "," 2014-01-01 "," 2014-01- 01" , "2014-01-01", "2014-01-01"]}, { "имя": "SG", "данные": [2580,5030,12628,400,12979,15096]}, { "название": "КД", "данные": [1660,3333,9582,732,9034,11189]}, { "имя": "В", "данные": [920,1697,3046, -332, 3945,3906]}] 'это правильно? я смотрю на этом примере [highcharts.com] (http://www.highcharts.com/demo/column-basic), но как реализовать эти данные? –

+0

Как вы разбираете этот json? Потому что в массиве данные с элементами типа «2014-01-01» не должны использоваться в объекте серии. –

Смежные вопросы