google / google-visualization-issues

288 stars 35 forks source link

Joining by type and ID #3007

Closed averkief closed 7 months ago

averkief commented 7 months ago

Good afternoon. How can I combine the same types and IDs into one line? For example for, :

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'President', 'John Adams', new Date(1808, 2, 4), new Date(1811, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1804, 2, 4), new Date(1809, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>
averkief commented 7 months ago

Done by me. I have introduced new Configuration options : groupByRowNameLabel timeline.groupByRowNameLabel Type: boolean Default: false

I changed the file https://www.gstatic.com/charts/51/js/jsapi_compiled_timeline_module.js Rewrote part of the code gvjs_i4.prototype.$g = function () {};

`gvjs_i4.prototype.$g = function () { var a = this.gb.WH.index, b = this.Z.Sj(this.gb.vL.index).min, c = this.Z.Sj(a).max; a = this.m.fa("hAxis.minValue", b); var d = this.m.fa("hAxis.maxValue", c); a = Math.min(b, a); c = Math.max(c, d); d = this.Z.ca(); var e = {}; b = [];

bb = []; for ( var f = new Set(), g = gvjs_K(this.m, "timeline.groupByRowLabel", !0), gg = gvjs_K(this.m, "timeline.groupByRowNameLabel", 0), // по умолчнию false h = gvjs_K(this.m, gvjs_nx, !0), k = gvjs_ry(this.m, gvjs_px), l = 0; l < d; l++ ) { var m = l; var n = this.Z; var p = this.gb, q = n.getValue(m, p.qw.index), r = null === p.tt ? "" : n.getValue(m, p.tt.index), t = n.getValue(m, p.vL.index), u = n.getValue(m, p.WH.index), v = "", w = null; if (null == t || null == u) throw Error("Missing value in row " + m + "."); p.tt && p.tt.Nf.style && (v = n.getValue(m, p.tt.Nf.style)); p.tt && p.tt.Nf.tooltip && ((p = p.tt.Nf.tooltip), (n = n.getStringValue(m, p)), null != n && (w = { Nh: !(!this.Z.getProperty(m, p, gvjs_av) && !this.Z.Bd(p, gvjs_av)), content: n, })); if (t > u) throw Error( "Invalid data at row #" + m + ": start(" + t + ") > end(" + u + ")." );

            // Part source code, chenge switch added check qq groupByRowNameLabel
            // g && gvjs_Ze(e, q)
            //   ? (n = gvjs_Sy(e, q))
            //   : ((n = {
            //       name: q,
            //       label: null,
            //       vJ: [],
            //       Mb: [],
            //       rect: new gvjs_5(0, 0, 0, 0),
            //     }),
            //     gvjs_Ze(e, q) || gvjs_Ry(e, q, n),
            //     b.push(n));
            //END Part source code

            if ( g && !gg && gvjs_Ze(e, q)) {   
              (n = gvjs_Sy(e, q))
            } else if ( g && gg && gvjs_Ze(e, q) ) {   
              ((n = {
                name: q,
                label: null,
                vJ: [],
                Mb: [],
                rect: new gvjs_5(0, 0, 0, 0),
              }),
              gvjs_Ze(e, q) || gvjs_Ry(e, q, n),
              bb.push(n));
            } else { 
              ((n = {
                      name: q,
                      label: null,
                      vJ: [],
                      Mb: [],
                      rect: new gvjs_5(0, 0, 0, 0),
                    }),
                    gvjs_Ze(e, q) || gvjs_Ry(e, q, n),
                    b.push(n));
            };

            m = {
              name: r,
              uya: q,
              G7: null,
              RN: null,
              rect: new gvjs_5(0, 0, 0, 0),
              Pt: { start: t, end: u },
              row: m,
              oga: v,
              tooltip: w,
              $f: h,
              Dp: k,
            };
            n.Mb.push(m);
            m = !m.name || this.s8 ? n.name : m.name;
            f.add(m);
            null != this.aE && this.aE.Au(m);
          }

if ( bb != '' ) { bb.forEach(function(bbLine) { let bbSystemName = bbLine.name; let bbProccesName = bbLine.Mb[0].name; let bbProcces = bbLine.Mb[0];

  let bbFlag = true; // флаг на добавление

  b.forEach(function(bLine) {
    if ( bbSystemName == bLine.name && bbProccesName == bLine.Mb[0].name ) {
      bLine.Mb.push(bbProcces);
      bbFlag = false;
    };
  });

  if ( bbFlag ) { // Если флаг true добавляем каждый индекс bb полностью в b
    b.push(bbLine); // добавляет в основой массив
  };
});

};

gvjs_1pa(b); d = gvjs_2pa(this, b); e = 0; 0 < b.length && ((e = b[b.length - 1].rect), (e = e.top + e.height)); f = Math.min(e, this.eb.height - 50); f === this.eb.height - 50 && (this.WS = this.jwa()); this.axis = new gvjs_1S( this.eb.width - this.WS - d, a, c, d, d, this.WS, gvjs_J(this.m, "hAxis.format") ); gvjs_3pa(this, b, d); gvjs_K(this.m, "timeline.showBarLabels", !0) && gvjs_4pa(this, b, d); this.axis.xp = f; a = gvjs_J(this.m, gvjs_qx, gvjs_xu) === gvjs_xu; c = gvjs_K(this.m, "timeline.displayDuration", !0); f = this.m.cb("timeline.tooltipDateFormat"); return { size: this.eb, background: { rect: new gvjs_5(0, 0, this.eb.width, this.eb.height), brush: gvjs_qy(this.m, gvjs_ht), rka: gvjs_K(this.m, gvjs_Vs, !0), }, yF: b, rect: new gvjs_5(0, 0, this.eb.width, e), xsa: d, nY: this.axis.PC, cna: a, $ma: c, nya: f, }; };`

averkief commented 7 months ago

Part of the code is here: https://docs.google.com/document/d/1h8jLV-oEkwUrEjwJpR0RFj5cKpfFug1I4fIW5YEWKVI/edit?usp=sharing