BLE通信でデータを二つ送ることが描写できずに困っています。

前提・実現したいこと

このサイトを参考にBLE通信した一つのアナログピンで読み取ったデータをble通信でブラウザで見ることはできました。
しかし、2つのピンでよみとった値を個別に見ることができずに困っています。

発生している問題・エラーメッセージ

一つのピンで読み取った値は読めるがあと一つのピンの値が読めない。

該当のソースコード

下のソースはURLにあるBLE nano に書き込むソースの送信部分です
アナログピンには
0〜1.0の小数値で入るので、1024倍して0〜1024の整数値に変換するそうです。
buf[0]には下位8bitを入力し、buf[1]には上位8bitを入力しているそうです。

js
1//======================================================================
2//onTimeout
3//======================================================================
4void m_status_check_handle(void)
5{   
6  uint8_t buf[2];
7 
8  //Read Analog port
9  float s1 = ANALOG1;
10  float s2 = ANALOG2;
11  uint16_t value = s1/s2 * 1024;
12 
13  buf[0] = (value >> 8);
14  buf[1] = value;
15 
16  //Send out
17  ble.updateCharacteristicValue(rxCharacteristic.getValueAttribute().getHandle(), buf, 2);
18}

このソースを私はこのように書き換えました。
16ビットのvalue1にはアナログ1のデータ、16ビットのvalue2にはアナログ３のデータをいれ、
それらを二等分ずつして、合計4つの配列に入れて8ビットずつおくっているつもりです。
（ただble.updateCharacteristicValue(rxCharacteristic.getValueAttribute().getHandle(), buf, ４);の最後の引数を4にすればよいのかというのが疑問ですが）

js
1//======================================================================
2//onTimeout
3//======================================================================
4void m_status_check_handle(void)
5{   
6    uint8_t buf1[4];// 前半の16ビット(buf[0],buf[1])にanalong1,後半16ビットにanalog3  
7
8    //Read Analog port
9    float s1 = ANALOG1;
10    float s2 = ANALOG2;
11    float s3 = ANALOG3;
12    uint16_t value1 = s1/s2 * 512;//s2=が常に0.5,　s1=0.0~1.0なはず
13    uint16_t value2 = s3/s2 * 512;
14    
15    //16bitのvalue１を右に8個シフトさせる。
16    //buf[1]にはvalue1の上位８bit,[0]には下位8bit
17    buf1[0] = (value1 >> 8 ); 
18    buf1[1] = value1;
19
20    //16bitのvalue2を右に8個シフトさせる。
21    //buf[1]にはvalue2の上位８bit,[0]には下位8bit
22    buf1[2] = (value2 >> 8 ); 
23    buf1[3] = value2;
24    
25    //Send out
26   //最後の引数は配列の数だけおくるということなのかな？）
27    ble.updateCharacteristicValue(rxCharacteristic.getValueAttribute().getHandle(), buf1, 4);   
28}

これを2番目の参考URLにある.htmlでグラフ化しようとしています。

下が正常に動く元のソースです。html

ちなみに上で自分で書いたソースでもこのhtmlならanalogin1のデータで動くことを確認しました

js
1//--------------------------------------------------
2//Read後の処理：得られたデータの表示など行う
3//--------------------------------------------------
4ble.onRead = function (data, uuid){
5  //フォーマットに従って値を取得
6  value = data.getInt16(0);//2Byteの場合のフォーマット
7
8  //コンソールに値を表示
9  console.log(value);
10
11  //HTMLに値を表示
12  document.getElementById('data_text').innerHTML = value;
13
14  document.getElementById('uuid_name').innerHTML = uuid;
15  document.getElementById('status').innerHTML = "read data"
16
17  //グラフへ反映
18  ble_data.append(new Date().getTime(), value);
19}
20
21

下は自分が書いた受け取りソースです。html
このhtmlプログラムにした瞬間グラフがプロットされず、値を表示されなくなります。

js
1//--------------------------------------------------
2//Read後の処理：得られたデータの表示など行う
3//--------------------------------------------------
4ble.onRead = function (data, uuid){
5  //フォーマットに従って値を取得
6  //value = data.getInt16(0);//2Byteの場合のフォーマット
7  uint16_t = buf[2];
8  buf[0] = data;
9  buf[1] = data >> 16;
10  value1 = buf[0].getInt16(0);
11  value2 = buf[1].getInt16(0);
12  //コンソールに値を表示
13  console.log(value1);
14  //HTMLに値を表示
15
16  document.getElementById('data_text').innerHTML = value1;
17  document.getElementById('uuid_name').innerHTML = uuid;
18  document.getElementById('status').innerHTML = "read data"
19  //グラフ反映
20  ble_data.append(new Date().getTime(), value1);
21  //ble_data.append(new Date().getTime(), value2);
22}
23

試したこと

何も書き換えてないhtmlでanalog1のデータが取れていることは確認できたので、自分で改良したhtmlに問題があると思われます。
value1,value2の値どちらも表示されません。
htmlで受け取る32ビットのdataの上位16ビットにanalog1,下位16ビットにanalog2が入ってるはずなのですが...

htmlはメモ帳で書き換えています。それ自体には問題がないことを確認しました。

なぜかわからないのですがこのようにすると

js
1ble.onRead = function (data, uuid){
2  //フォーマットに従って値を取得
3  //value = data.getInt16(0);//2Byteの場合のフォーマット
4  uint16_t buf[2];
5  buf[0] = data;
6  buf[1] = data >> 16;
7  value = buf[0].getInt16(0);
8  value2 = buf[1].getInt16(0);
9  //コンソールに値を表示
10  console.log(value);
11  //HTMLに値を表示
12
13  document.getElementById('data_text').innerHTML = value;
14  document.getElementById('uuid_name').innerHTML = uuid;
15  document.getElementById('status').innerHTML = "read data"
16  //グラフ反映
17  ble_data.append(new Date().getTime(), value);
18  //ble_data.append(new Date().getTime(), value2);
19}