Google charts с видоискателем

20 марта 2022, 16:10

Подскажите, как построить с помощью Google charts график из видоискателем по времени типа http://nvd3.org/examples/lineWithFocus.html или https://finance.i.ua/ (график курса валют) Хотелось также иметь возможность быстрого переключения (выбора диапазона в нижней части графика) - данные за 1мес, 3мес, 1год

Подскажите, где это можно прочитать или посмотреть?

Может быть ещё есть какие-нибудь бесплатные библиотеки для таких решений?

Answer 1

Скорее всего, вас заинтересует Google Annotation Chart. Это семейство timeline charts, яркий представитель Annotated Timeline.

Примечательно, что я бы не стал искать на слово "видоискатель", а ограничился бы "timeline chart zoom". Как сказано в комментариях, у d3 такой тип диаграмм называется "brush".

Примечательным является и то, что к каждой серии данных (поставляются в колонках относительно дат) можно передать аннотации с заголовком и примечанием.

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

Живой пример

<html> 
  <head> 
<script 
  type="text/javascript" 
  src="https://www.gstatic.com/charts/loader.js" 
></script> 
<script type="text/javascript"> 
  google.charts.load('current', { packages: ['annotationchart'] }); 
  google.charts.setOnLoadCallback(drawChart); 
 
  function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Kepler-22b mission'); 
    data.addColumn('string', 'Kepler title'); 
    data.addColumn('string', 'Kepler text'); 
    data.addColumn('number', 'Gliese 163 mission'); 
    data.addColumn('string', 'Gliese title'); 
    data.addColumn('string', 'Gliese text'); 
    data.addRows([ 
      [ 
        new Date(2314, 2, 15), 
        12400, 
        undefined, 
        undefined, 
        10645, 
        undefined, 
        undefined 
      ], 
      [ 
        new Date(2314, 2, 16), 
        24045, 
        'Lalibertines', 
        'First encounter', 
        12374, 
        undefined, 
        undefined 
      ], 
      [ 
        new Date(2314, 2, 17), 
        35022, 
        'Lalibertines', 
        'They are very tall', 
        15766, 
        'Gallantors', 
        'First Encounter' 
      ], 
      [ 
        new Date(2314, 2, 18), 
        12284, 
        'Lalibertines', 
        'Attack on our crew!', 
        34334, 
        'Gallantors', 
        'Statement of shared principles' 
      ], 
      [ 
        new Date(2314, 2, 19), 
        8476, 
        'Lalibertines', 
        'Heavy casualties', 
        66467, 
        'Gallantors', 
        'Mysteries revealed' 
      ], 
      [ 
        new Date(2314, 2, 20), 
        0, 
        'Lalibertines', 
        'All crew lost', 
        79463, 
        'Gallantors', 
        'Omniscience achieved' 
      ] 
    ]); 
 
    var chart = new google.visualization.AnnotationChart( 
      document.getElementById('chart_div') 
    ); 
 
    var options = { 
      displayAnnotations: true 
    }; 
 
    chart.draw(data, options); 
  } 
</script> 
  </head> 
 
  <body> 
<div id="chart_div" style="width: 630px; height: 183px;"></div> 
  </body> 
</html>