Crearea unei linii de timp cu un grafic de bare în Google Charts? (Programare, Javascript, Diagrame, Vizualizare Google)

mowwwalker a intrebat.

Aș dori să creez o linie de timp cu diagrame Google pentru a arăta durata, repetiția și suprapunerea evenimentelor. Fiecare rând ar trebui să fie un nou eveniment, iar coloanele ar trebui să fie intervale de timp.

M-am uitat peste Google Charts docs, totuși, și nu pare să fie posibil ceea ce vreau eu – să nu numai că lungimea unei bare orizontale să fie intervalată, dar să aibă mai multe bare intervalate în același rând (fără suprapunere).

Este posibil acest lucru cu Chrome sau cu o altă bibliotecă gratuită de diagrame?

modificare: Aș dori să produc un grafic similar cu cel de mai jos

2 răspunsuri
jmac

Am fost 100% încrezător că pot recrea acest lucru în Google Visualization, dar am eșuat puțin din cauza unui comportament ciudat pe care nu-l pot înțelege (linia roșie care marchează data). Dacă puteți rezolva această problemă, restul funcționează foarte bine și arată așa:

Iată codul:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Assignment');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Current Assignment');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Next Assignment');
  data.addRows([
    ['Uranus', new Date(1298246400000), {v:new Date(26092800000), f:'2/21-12/20'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Thomas Lamonthezie', new Date(1297036800000), {v:new Date(6393600000), f:'2/7-4/22'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Shuo Li', new Date(0), {v:new Date(0), f:'1/0-1/0'}, new Date(1303689600000), {v:new Date(2937600000), f:'4/25-5/29'}],
    ['Saturne', new Date(1298246400000), {v:new Date(4579200000), f:'2/21-4/15'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
    ['Roger Erwin', new Date(1301875200000), {v:new Date(1555200000), f:'4/4-4/22'}, new Date(259200000), {v:new Date(2160000000), f:'4/25-5/20'}],
    ['Rick Maverick', new Date(1302652800000), {v:new Date(2592000000), f:'4/13-5/13'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}],
  ]);

  //Define date ranges for the chart
  var dateMin = new Date(2010,11,1);
  var dateMax = new Date(2012,0,1);
  var dateToday = new Date(2012,3,15);


  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
         {width:600, height:400,
          isStacked: true,
          series: [{color: 'transparent'},{},{color: 'transparent'},{}],
          hAxis: {
            viewWindow: {
              max: dateMax,
              min: dateMin,
            },
            baseline: dateToday,
            baselineColor: 'red',
          },
         }
        );
}

Practic, se creează 4 serii:

  1. Serie fictivă (timp până la prima misiune)
  2. Durata primei sarcini
  3. Serie fictivă (timpul dintre prima și a doua misiune)
  4. Durata celei de-a doua sarcini

Apoi setați seriile 1 și 3 ca fiind invizibile.

Pentru date, trebuie să faceți niște calcule matematice cu privire la date (eu am făcut-o în Excel, îmi cer scuze), dar, în principiu, obțineți durata prin scăderea datei de început/ sfârșit pentru fiecare sarcină și setați seria fictivă ca fiind data de început a celei de-a doua sarcini minus timpul până la prima sarcină plus durata primei sarcini.

Am folosit {value: x, format: y} truc pentru a face ca mouseover-ul să funcționeze corect. Puteți automatiza acest lucru (din nou, am făcut chestiile legate de date în Excel, deoarece javascript-ul meu ar fi durat semnificativ mai mult).

Apoi, setările stabilesc data minimă, data maximă, transformă seriile pentru a fi în culorile corespunzătoare și setează linia de bază la roșu. Din nefericire, din motive care mă depășesc, linia de bază, indiferent de data setată, vrea să locuiască în partea stângă a graficului. Dacă puteți găsi o modalitate de a evita acest lucru, aveți graficul dumneavoastră.

Comentarii

  • Mă bucur că v-am putut ajuta. Are nevoie de unele reglaje fine, am pus o întrebare suplimentară aici în speranța că voi putea rezolva problema liniei de bază. –  > Por jmac.
Juan Solares

data de azi este în afara intervalului de schimbare pentru a schimba var dateToday = new Date(2011,7,1), o altă soluție este să creez o coloană suplimentară, care va fi data de azi și este setată la new Date(2011,6,1).

data.addColumn('string', 'Assignment');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Current Assignment');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Next Assignment');
data.addColumn('date', 'Date of Report');
data.addRows([
['Uranus', new Date(1298246400000), {v:new Date(26092800000), f:'2/21-12/20'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1) ],
['Thomas Lamonthezie', new Date(1297036800000), {v:new Date(6393600000), f:'2/7-4/22'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1) ],
['Shuo Li', new Date(0), {v:new Date(0), f:'1/0-1/0'}, new Date(1303689600000), {v:new Date(2937600000), f:'4/25-5/29'},new Date(2011,6,1)],
['Saturne', new Date(1298246400000), {v:new Date(4579200000), f:'2/21-4/15'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1)],
['Roger Erwin', new Date(1301875200000), {v:new Date(1555200000), f:'4/4-4/22'}, new Date(259200000), {v:new Date(2160000000), f:'4/25-5/20'},new Date(2011,6,1)],
['Rick Maverick', new Date(1302652800000), {v:new Date(2592000000), f:'4/13-5/13'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1)],
]);

modificați seria

series: [{color: 'transparent'},{},{color: 'transparent'},{}]

în

series: [{color: 'transparent'},{},{color: 'transparent'},{},{type: "line"}]

și folosesc Google Playground pentru a replica.

O întrebare: datele dvs. sunt timestamp?