Question

Я должен построить много кривых, используя данные из базы данных.Структура базы данных выглядит следующим образом:

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

С тестом (строка) в качестве имени серии (в условных обозначениях) и диаметра и передачей в качестве значений X и Y.я пробовал много решений, но ничего;Я думаю, что понимаю, что мне нужно разделить результат для теста (строки), но я не знаю как.Вы можете мне помочь?

<?php
//connection
$connect = mysqli_connect("server","user","pw","DB");
//query
$result = mysqli_query($connect, "SELECT DISTINCT test, diameter, pass FROM 
tablex;");

// json C
$rows = array();
$table = array();
$array['cols'][] = array('label' => 'test', 'type' => 'strimg');
$array['cols'][] = array('label' => 'diameter', 'type' => 'number');
$array['cols'][] = array('label' => 'pass', 'type' => 'number');

// json R
while($row = mysqli_fetch_array($result))
{
 $provino = array ($row["test"]);
 $sub_array =  array('f' =>$row["test"]);
 $diameter = array ($row["diameter"]);
 $sub_array[] =  array('v' => $row["diameter"]);
 $pass = array ($row["pass"]);
 $sub_array[] =  array('v' => $row["pass"]);

 $rows []=  array('c' => $sub_array);
}
$array['rows'] = $rows;
$jsonTable = json_encode($array);
?>


<html>
 <head>
  <script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
 var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

 var Options = {

    title: 'CG',
    legend: 'bottom',
    width: 1000,
    height: 1000    
      };


var chart = new 
google.visualization.LineChart(document.getElementById('line_chart'));

chart.draw(data, Options);
}
</script>
<style>
</style>
</style>
</head>  
<body>
<div class="page-wrapper">
<br />
<div id="line_chart" style="width: 100%; height: 500px"></div>
</div>
</body>
</html>

WhiteHat · Answer 1 · 31 января 2019

формат данных для линейного графика Google,
требует, чтобы ось x была первым столбцом в таблице данных.
каждый дополнительный столбец считается серией.

чтобы иметь серию для каждого теста (строку),
таблица данных должна быть в следующем формате.

diameter  |  AAAAAAAAA  |  BBBBBBBBB  |  CCCCCCCCC
--------  |  ---------  |  ---------  |  ---------
20        |  12         |             |           
10        |  19         |             |           
7         |  72         |             |           
21        |             |  15         |           
12        |             |  52         |           
3         |             |  65         |           
19        |             |             |  44       
11        |             |             |  22        
5         |             |             |  36

это может быть трудно встроить в ваш запрос / php,
особенно если есть еще много серий для теста (строка).

как таковой, вы можете оставить php один,
и использовать класс Google DataView,
, чтобы преобразовать данные в нужный вам формат.

// create data view
var view = new google.visualization.DataView(data);

класс DataView позволяет вам предоставлять свои собственные столбцы, используя метод -> setColumns(array)

передать массив нужных вам столбцов.
мы можемпередайте индекс столбца, чтобы использовать существующий столбец.
, например 1 для столбца 'diameter'.

// init view columns, use diameter as x-axis
var viewColumns = [1];

или мы можем передать объект {} для использования в качестве вычисляемого столбца.
объект должен иметь обычные свойства столбца,
такие label & type.

также может иметь функцию calc, которая запускается для каждой строки в таблице данных.
она получает таблицу данных и индекс строки в качестве аргументов.
функция должна возвращать значениедля этого столбца.

// build view column for each test series
data.getDistinctValues(0).forEach(function (test, index) {
  // add y-axis column for test
  viewColumns.push({
    calc: function (dt, row) {
      // return value for test (string)
      if (dt.getValue(row, 0) === test) {
        return dt.getValue(row, 2);
      }

      // return null if row does not equal test (string)
      return null;
    },
    label: test,
    type: 'number'
  });
});

, чтобы построить столбец для каждого уникального теста (строка),
используйте метод таблицы данных -> getDistinctValues(columnIndex)
, который вернет массив уникальных значений дляданный столбец.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'test', type: 'string'},
      {label: 'diameter', type: 'number'},
      {label: 'pass', type: 'number'}
    ],
    rows: [
      {c:[{v: 'AAAAAAAAA'}, {v: 20}, {v: 12}]},
      {c:[{v: 'AAAAAAAAA'}, {v: 10}, {v: 19}]},
      {c:[{v: 'AAAAAAAAA'}, {v: 7}, {v: 72}]},
      {c:[{v: 'BBBBBBBBB'}, {v: 21}, {v: 15}]},
      {c:[{v: 'BBBBBBBBB'}, {v: 12}, {v: 52}]},
      {c:[{v: 'BBBBBBBBB'}, {v: 3}, {v: 65}]},
      {c:[{v: 'CCCCCCCCC'}, {v: 19}, {v: 44}]},
      {c:[{v: 'CCCCCCCCC'}, {v: 11}, {v: 22}]},
      {c:[{v: 'CCCCCCCCC'}, {v: 5}, {v: 36}]},
    ]
  });

  var options = {
    title: 'CG',
    legend: 'bottom',
    width: 1000,
    height: 1000
  };

  // create data view
  var view = new google.visualization.DataView(data);

  // init view columns, use diameter as x-axis
  var viewColumns = [1];

  // build view column for each test series
  data.getDistinctValues(0).forEach(function (test, index) {
    // add y-axis column for test
    viewColumns.push({
      calc: function (dt, row) {
        // return value for test (string)
        if (dt.getValue(row, 0) === test) {
          return dt.getValue(row, 2);
        }
        
        // return null if row does not equal test (string)
        return null;
      },
      label: test,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(view, options);  // use view to draw chart
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"></div>

РЕДАКТИРОВАТЬ

числа в вашем json заключены в кавычки ("v":"100"),
, что хорошо, однако представление данных думает, что вы пытаетесь вернуть строку вместо числа.

Простое решение - разобрать строку в число в вычисляемом столбце ...

viewColumns.push({
  calc: function (dt, row) {
    // return value for test (string)
    if (dt.getValue(row, 0) === test) {
      return parseFloat(dt.getValue(row, 2));  // <-- use parseFloat here
    }

    // return null if row does not equal test (string)
    return null;
  },
  label: test,
  type: 'number'
});

см. Следующий обновленный фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({"cols":[{"label":"test","type":"string"},{"label":"diameter","type":"number"},{"label":"pass","type":"number"}],"rows":[{"c":[{"v":"AAAA_s4i_C6_P1"},{"v":"19"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"9.5"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"4.75"},{"v":"99.6086"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"2"},{"v":"98.6021"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.85"},{"v":"95.2807"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.425"},{"v":"86.994"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.25"},{"v":"73.5178"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.125"},{"v":"46.265"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.075"},{"v":"35.9522"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0645"},{"v":"33.6174"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0465"},{"v":"28.815"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0336"},{"v":"24.0125"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0241"},{"v":"20.4106"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0154"},{"v":"18.0093"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0109"},{"v":"16.8087"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0078"},{"v":"14.4075"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0064"},{"v":"12.0062"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0046"},{"v":"9.605"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0033"},{"v":"8.4044"}]},{"c":[{"v":"AAAA_S4i_C6_P1"},{"v":"0.0014"},{"v":"2.4012"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"19"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"9.5"},{"v":"98.4907"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"4.75"},{"v":"97.0266"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"2"},{"v":"95.3437"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.85"},{"v":"91.5629"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.425"},{"v":"86.7029"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.25"},{"v":"64.6961"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.125"},{"v":"28.5647"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.075"},{"v":"18.9485"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0691"},{"v":"16.7525"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0495"},{"v":"13.1627"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0352"},{"v":"11.9661"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0251"},{"v":"9.5728"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0159"},{"v":"8.3762"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0113"},{"v":"7.1796"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.008"},{"v":"5.983"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0066"},{"v":"4.7864"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0047"},{"v":"3.5898"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0033"},{"v":"2.3932"}]},{"c":[{"v":"AAAA_S4i_C6_P2"},{"v":"0.0014"},{"v":"1.1966"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"19"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"9.5"},{"v":"98.5831"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"4.75"},{"v":"98.1927"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"2"},{"v":"96.8337"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.85"},{"v":"92.1854"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.425"},{"v":"81.1248"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.25"},{"v":"59.9439"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.125"},{"v":"25.6355"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.075"},{"v":"17.7442"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0691"},{"v":"15.6747"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0495"},{"v":"12.3158"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0352"},{"v":"11.1962"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.025"},{"v":"10.0766"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0159"},{"v":"8.957"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0113"},{"v":"7.8374"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.008"},{"v":"5.5981"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0066"},{"v":"4.4785"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0047"},{"v":"3.3589"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0033"},{"v":"2.2392"}]},{"c":[{"v":"AAAA_S4i_C6_P3"},{"v":"0.0014"},{"v":"1.1196"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"19"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"9.5"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"4.75"},{"v":"99.2199"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"2"},{"v":"97.2222"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.85"},{"v":"92.0749"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.425"},{"v":"78.3537"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.25"},{"v":"57.07"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.125"},{"v":"25.5148"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.075"},{"v":"18.4487"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0684"},{"v":"17.302"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0491"},{"v":"14.0579"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.035"},{"v":"11.8952"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0249"},{"v":"10.8138"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0159"},{"v":"8.651"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0113"},{"v":"7.5696"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.008"},{"v":"5.4069"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0066"},{"v":"4.3255"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0047"},{"v":"3.2441"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0033"},{"v":"2.1628"}]},{"c":[{"v":"AAAA_S4i_C6_P4"},{"v":"0.0014"},{"v":"1.0814"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"19"},{"v":"100"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"9.5"},{"v":"99.8031"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"4.75"},{"v":"98.9393"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"2"},{"v":"97.0088"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.85"},{"v":"91.9256"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.425"},{"v":"84.381"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.25"},{"v":"61.3373"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.125"},{"v":"29.0731"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.075"},{"v":"20.2975"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0684"},{"v":"18.633"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0495"},{"v":"12.8102"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0352"},{"v":"11.6456"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0251"},{"v":"9.3165"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0159"},{"v":"8.1519"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0113"},{"v":"6.9874"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.008"},{"v":"5.8228"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0066"},{"v":"4.6582"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0047"},{"v":"3.4937"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0033"},{"v":"2.3291"}]},{"c":[{"v":"AAAA_S4i_C6_Pris"},{"v":"0.0014"},{"v":"1.1646"}]}]});

  var options = {
    title: 'CG',
    legend: 'bottom',
    width: 1000,
    height: 1000
  };

  // create data view
  var view = new google.visualization.DataView(data);

  // init view columns, use diameter as x-axis
  var viewColumns = [1];

  // build view column for each test series
  data.getDistinctValues(0).forEach(function (test, index) {
    // add y-axis column for test
    viewColumns.push({
      calc: function (dt, row) {
        // return value for test (string)
        if (dt.getValue(row, 0) === test) {
          return parseFloat(dt.getValue(row, 2));
        }
        
        // return null if row does not equal test (string)
        return null;
      },
      label: test,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(view, options);  // use view to draw chart
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"></div>

Как разделить ряды в php, чтобы создать таблицу json для гугл-чартов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как разделить ряды в php, чтобы создать таблицу json для гугл-чартов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы