Как построить график при отсутствующих данных?

Question

[M-I-B]

Упрощенно данные из таблицы (MySQL) структурированы так: [принадлежность, x, y]
Есть набор данных, где "принадлежность" - 1 : красная линия, 2 - синяя линия:
[1,0,1],[1,1,2],[1,2,2],[1,3,7],[1,6,3],[1,7,4],[1,8,1]
[2,0,2],[2,1,4],[2,2,4],[2,3,2],[2,4,2],[2,5,5],[2,6,6],[2,7,5],[2,8,7]

Особенность: для красной линии нет сведений о координатах в позициях х4 и х5 - [1,4,???], [1,5,???]

Все мои попытки разобраться с Google Charts привели к тому, что отсутствующие данные он воспринимает как null и, соответственно, линию не прорисовывает.


Задача: из этих данных получить примерно график такого вида:


т.е. с "отсутствующими данными". Ведь делает же он это, например, в точке х=1,5 ...

Подскажите, как можно это реализовать.
Если можно, то хотя бы с минимальным примером кода ...

Comments

[M-I-B]

MrColdCoffee, Спасибо за быстрый ответ.
Да, такое решение мне приходило, но тогда он обрывает график в точке 3 и возобновляет в 6.
Т.е. получается как на 1-ой картинке.

[MrColdCoffee]

M-I-B, вот мне тоже так показалось и я удалил комментарий)

[M-I-B]

MrColdCoffee,
Для "опытов" я использую пример от самого гугла:

<script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
  
      var data = new google.visualization.arrayToDataTable([
        ["Year", "Sales", "Expenses"],
        ["2004", 1000, 400],
        ["2005", 1170, null],
        ["2006", 660, 1120],
        ["2007", 1030, 540],
      ]);

      var options = {
        title: "Company Performance",
        //curveType: "function",
        legend: { position: "bottom" },
      };

      var chart = new google.visualization.LineChart(
        document.getElementById("report")
      );

      chart.draw(data, options);
    }
  </script>

Вот такой результат в итоге выходит:

MrColdCoffee, Может есть способ описать каждую из линий, а не так, как это предлагает сделать гугл:

["Year", "red", "blue"],
["1", 2, 4],
["2", 2, 4],
["3", 7, 2],
["4", null,2],
["5", null, 5],
["6", 3, 6],
["7", 4, 5]

Answer 1

[twobomb]

function restoreArr(arr){  
  if(arr.length > 0 && arr[0] == null)
       	throw "Не найдено первое число";
        
	for(let i = 0; i < arr.length-1;i++){
  	if(arr[i+1] == null){
    	let cnt = 1;
      let nextNum = null;
    	for(let j = i+1;j < arr.length;j++)
      	if(arr[j] == null)
        	cnt++
        else{
        	nextNum = arr[j];
        	break;
        }
       if(nextNum == null)
       	throw "Не найдено следующие число";        
      
      let step = (nextNum - arr[i])/cnt;
    	for(let j = i+1,c = arr[i]+step;j < arr.length;j++,c+=step)
       if(arr[j] == null)
       	arr[j] = c;
        else
        break;
    }
  }
  return arr;
}

P.S. Восстанавливает только промежуточные значения, если нет начального или конечного, думаю сам сможешь сделать. Нужно просто найти первое число и тупо вставить

Comments

[M-I-B]

Это шедеврально!
Большое спасибо!

[twobomb]

M-I-B, Ну я бы использовал решение 0xD34F, оно штатное и не нужно замарачиваться. Правда единственная разница, при interpolateNulls нельзя посмотреть промежуточные значения (при наведении на точки).

Answer 2

[0xD34F]

Добавить в options interpolateNulls: true.