1.はじめに

　GoogleChartsには綺麗で沢山のグラフがあります。それをメモ帳とパワーシェルを使って簡単に操作する方法をご紹介します。ここでは４種類のグラフですが、参考サイトからデータ部分をコピー＆ペーストすれば、約８割のgoogleChartをメモ帳で快適に操作することができます。参考サイト
　また、グラフ作成の課題であるデータ入力方法ですが、今回は、直接データ張付、ファイル入力、マウスコピーを使う方法で結構実用的と思います。ご参考になれば幸いです。

2.事前準備

　それでは【マウス右ボタン⇒[新規作成]⇒テキストドキュメント】押下して新規ファイルを作成し、[新しいテキストドキュメント.txt] をダブルクリックしメモ帳を起動ください。
　次に下記の[コピーList1]をメモ帳にコピー＆ペーストして貼り付けます。
そして、メモ帳の左上[ファイル]⇒[名前を付けて保存]⇒ファイル名[ wPshGraf111.bat ]を入力し⇒文字コード[ANSI]に設定して[保存]を押下した後、メモ帳を終了します。
★注：文字コード欄が[ANSI]設定であることを確認してください。
　あとは、[ wPshGraf111.bat ] をダブルクリックすると、下図の窓が開きます。

3.操作方法

（１）グラフ表示方法

　表示窓内の次の行をダブルクリックすると、今回のグラフが逐次表示されます。但し、ローソクグラフについては、データ参照サイトが開くのでデータの部分をマウスコピーした後、小窓の[OK]ボタンを押下ください。
１）&&& zType="LineChart"; ★[WC]折れ線グラフ
２）&&& zType="Gauge"; ★[WC]Gメータグラフ
３）&&& zType="GeoChart"; ★[WC]日本人口図グラフ
４）&&& zType="CandlestickChart"; zfl="7203_トヨタ"; ★[WC]ローソクグラフ

（２）グラフデータの編集・再表示

　マウス右ボタン[編集]を押下すると、[ wPshGraf111.bat ]でメモ帳が開くので、グラフデータの部分を編集し、[ファイル]⇒[上書き保存]　します。
　表示窓への反映は、右ボタン[再表示]で反映されます。なお、仮のデータ編集としてグラフ表示する場合は、表示窓を直接編集しダブルクリックするとグラフ表示します。(注：編集データは保存されません)

（３）プログラム説明・・・・List1 以降に記載します。

3.今回のグラフ４件

★[WC]折れ線グラフ（文字列/Fileからデータ取得の例)

★[WC]Gメータグラフ（ボタンをグラフに付加する例）

★[WC]日本人口グラフの一部（マウスコピーして張付けデータ編集の例)

★[WC]ローソクグラフ（マウスコピーして直接データ利用の例)

[コピーList1]

@echo off &rem if not "%~0"=="%~dp0.\%~nx0" (start /min cmd /c,"%~dp0.\%~nx0" %* &exit) &rem ★DOS窓mini化
powershell -ExecutionPolicy RemoteSigned "$fln=(echo %0); $aa=(Cat $fln -Raw); $fdt=$aa.substring($aa.indexof('##'+'STT:')); Iex($fdt+'##>');"
exit; pause&exit;
##
##Ver1.091 2024/1004 #####################################
##
##STT:●●batファイルで[GoogleChartを８割操作] 
##
using namespace System.Windows.Forms; Add-Type -AssemblyName System.Windows.Forms,System.Drawing; ##★GUI
function dbg($cc){ [MessageBox]::Show($cc) }; function dbc($zcc){ Write-Host $zcc; };  ##★DBG
function ssView($bb){ $tBox.Text=$bb.substring( $bb.indexof("`n<"+"##" )); $tBox.SelectionStart=0; $mMain.Text="[1.071]"+$fln; }; ##★表示
##★メイン窓／編集窓の生成   ##★窓寸法(WW,HH)  ##★文字種類/寸法  ##★背景色
$mMain =New-Object Form -Pro @{ Size="1280,620"; }; $tBox =New-Object TextBox -Pro @{ Font="BIZ UDゴシック,13"; BackColor="#C0E0C0";
     Dock="Fill"; Multiline=$True; AcceptsReturn=$True; ScrollBars=[ScrollBars]::Vertical;  }; $mMain.Controls.Add($tBox);
##★右釦メニュ ##★編集 ##★再表示 ##★ｸﾘｯﾌﾟ処理
$tBox.ContextMenuStrip =$conMenu =New-object ContextMenuStrip -Pro @{ Font="BIZ UDゴシック,12"; }; 
function ssSetRbtMenu( $zcha ){ $aa=$conMenu.Items.Add( ($zcc =New-Object ToolStripMenuItem) ); $zcc.Text=$zcha; return $zcc; };
  (ssSetRbtMenu "編集(メモ帳)").add_Click({ notepad.exe $fln });   (ssSetRbtMenu "再表示").add_Click({ ssView( Cat $fln -Raw ) });
  (ssSetRbtMenu "取得(ｸﾘｯﾌﾟ)" ).add_Click({ $tBox.Copy()  }); (ssSetRbtMenu "貼り付").add_Click({ $tBox.Paste() });
##★マウス[WC]操作 
$tBox.Add_DoubleClick({ $ln=((($tBox.Text).substring(0,$tBox.SelectionStart)).split("`n")).count-1; $zcc=($tBox.Lines[$ln]-split"##")[0];
  if( $zcc.startsWith("&") ){ for( $ii=1; $ii -lt 200; $ii++ ){ $cc=$tBox.Lines[$ln+$ii]; if($cc -eq $null){ break; };
      if( $cc.startsWith(";") ){ $zcc+="`n"+($cc.substring(1)).trim(); }else{ if( $cc.startsWith("#") ){ continue;}; break; }; }; }; ##dbc $zcc;
  if( $zcc.startsWith("&&& ")){ $zcc=$zcc.substring(3); $tBox.SelectionStart+=4; Iex($zcc); return;}; 
  if( $zcc.startsWith("&& " )){ $zcc=($zcc.substring(2)).replace('"','\"'); Start -NoN powershell -Arg "$zcc"; return;};
}); 
##★googleグラフの処理 [ ssGraf zType zOption zData zColum zPrg zBody]
##
function global:ssGraf($zType,$zOption,$zData,$zColum,$zAddProg,$zAddBody){ $szfile="$home\Desktop\gChart01.html";
  $zcc0='<html><head><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript"> google.charts.load("current", {packages:["@@Package"]}); 
      google.charts.setOnLoadCallback(drawChart); var chart; var options; var data; 
      function drawChart(){ chart = new google.visualization.'+$zType+'(document.getElementById("chart_values"));
      options='+$zOption+'; ';
   if( $zData.startsWith("[") ){ $zcc0+='data =new google.visualization.DataView( google.visualization.arrayToDataTable( '+$zData+' ) );' }
   else{ $zcc0+='data =new google.visualization.DataTable(); '+$zData+'; ' };
   $zcc0+=$zColum+';chart.draw(data, options); };'
   $zcc0+=$zAddProg+';</script></head><body><div id="chart_values" ></div>'+$zAddBody+'</body></html>'   ; $zcc1='corechart';
   foreach($cc in 'AnnotationChart','TreeMap','Timeline','Table','VegaChart','GeoChart','Gauge','Sankey','Calendar','WordTree','TreeMap'){ 
      if($cc -eq $zType){ $zcc1=$cc; break; }; };  $zcc0=$zcc0.replace('@@Package',$zcc1);
   SC $szfile $zcc0; & $szfile;  ##★Web.html起動
}; ssView($fdt); $mMain.ShowDialog();


<##Ver1.00--[GoogleChartsの操作]--------------------------------------------------------
##  [WC]行をダブルクリック起動、マウス右釦:編集/ｸﾘｯﾌﾟ処理

##★GoogleChartsグラフギャラリ＆関連サイト----------------------------------------------
&& Start 'https://developers.google.com/chart/interactive/docs/gallery?hl=ja'  ##★[WC] googleサイト
&& Start 'https://ryupapa008.blogspot.com/2024/09/google_23.html'  ##★[WC] 関連サイト


##★折れ線グラフ（文字列/Fileからデータ取得の例)
##
&&&  $zType="LineChart";##★[WC]折れ線グラフ
;  ##★グラフデータ取得（ファイルから取得時は、$zcc=(Cat FileMame.txt -Raw) に変更）
;  $zcc="  0, 10, 23, 17, 18,  9, 11, 27, 33, 40, 32, 35, 30, 45, 31, 24, 29, 33, 36, 37, 39, 29, 40,
;         40, 42, 47, 44, 48, 52, 54, 42, 55, 56, 57, 60, 50, 52, 51, 49, 53, 55, 60, 61, 59, 62, 65,
;  ";
;  $zcc=($zcc.replace(" ","").replace("`n","").replace("`r","")).split(","); ##★不要文字削除
;  $zdt0="['X(ii)','データ'],`n"; $ii=0; ##★データ列の指定
;  foreach($cc in $zcc.split(",") ){ if( $cc -eq "" ){ continue; }; $zdt0+="[$ii,$cc],`n"; $ii++; }; dbc $zdt0;
;  ##★オプション、データ指定⇒グラフ表示
;  $zOption="{title: '折れ線グラフ', titleTextStyle:{color:'blue', fontSize:22}, 
;       width:900, height:500, fontSize:16, backgroundColor:'#f8fcef',
;       chartArea:{left:120, top:80, right:60, bottom:80}, legend:'none',
;       hAxis:{title:'Ｘ軸データ'},
;       vAxis:{title:'Ｙ軸データ'},
;  }";
;  $zData="[ $zdt0 ]"; ssGraf $zType $zOption $zData;


##★Ｇメータグラフ（釦をグラフに付加する例）
##
&&&   $zType="Gauge"; ##★[WC]Ｇメータ
;  $zOption="{  width:680,  height:340,
;    min:0, max:280, yellowFrom:200, yellowTo:250, redFrom:250, redTo:280, minorTicks:5,
;  }";  
;  $zData="data.addColumn('number', 'Engine'); data.addColumn('number', 'Torpedo');
;          data.addRows(2); data.setCell(0, 0, 120); data.setCell(0, 1, 80);
;  ";
;  $zAddProg="
;    function changeSpeed(dd){ data.setValue(0,0,data.getValue(0,0) + dd*25);
;      data.setValue(0,1,data.getValue(0,1) +dd*20); chart.draw(data,options); };
;    function ssWebView(dd){
;      switch(dd){
;      case 11: window.open( 'https://www.yahoo.co.jp' ); return;
;      case 12: window.open( 'https://www.msn.com/ja-jp' ); return;
;      };
;    };
;  ";
;  $zAddBody="
;     <input type='button' value='[加速]' onclick='changeSpeed(1)' />
;     <input type='button' value='[減速]' onclick='changeSpeed(-1)'/>
;     <input type='button' value='yahoo'  onclick='ssWebView(11)'/>
;     <input type='button' value='MSN'    onclick='ssWebView(12)'/>
;  ";
;  ssGraf $zType $zOption $zData "" $zAddProg $zAddBody;
 

##★マップグラフ(日本の人口：マウスコピーの例)
&& Start 'https://seijiyama.jp/lgov/lgov-ranking/r02/' ##★[WC]データ利用サイト
##
&&&  $zType="GeoChart"; ##★[WC]日本人口図
;    $zcc="         
;順位	都道府県	総人口	平均年齢	人口増減率
;1	東京都	14047594	45.25	3.93867
;2	神奈川県	9237337	46.48	1.21764
;3	大阪府	8837685	47.1	-0.02018
;4	愛知県	7542415	45.65	0.79228
;5	埼玉県	7344765	46.84	1.07659
;6	千葉県	6284480	47.14	0.99337
;7	兵庫県	5465002	47.95	-1.26108
;8	北海道	5224614	49.78	-2.91949
;9	福岡県	5135214	46.69	0.65976
;"
##★不要文字削除⇒データ整列
;  $zcc=$zcc.replace("県","").replace("府","").replace("都",""); $zdat="";
;  foreach( $cc in $zcc.split("`n") ){ if( $cc.startsWith("順位") -or ($cc.length -le 10 )){ continue;};
;    $zcm=$cc.split("`t");  $zdat+=( "[`'" +$zcm[1] +"`'," +$zcm[2] +"],`n" );
;  }; $zdat= " ['都道府県', '人口']`n, $zdat"; dbc $zdat;
;  ##★グラフ表示
;  $zOption="{ title:'日本地図',  titleTextStyle:{color:'blue', fontSize:22}, 
;     width:800, height:600, fontSize:16,　backgroundColor: '#ebf7fe', region:'JP', resolution:'provinces'
;  }";
;  $zData="[ $zdat ]"; ssGraf $zType $zOption $zData;



##★ローソクグラフ
##
!Webデータ箇所; 'https://www.kabudragon.com/s?t=7203' ##★[WC]株価リスト
##
&&& $zType="CandlestickChart"; $zfl="7203_トヨタ";    ##★[WC]ローソク
;   Start ('https://www.kabudragon.com/s?t='+$zfl.substring(0,4)); dbg "株価を[日付]下からマウスコピー"
;   $zcc=(Get-ClipBoard); $zcm=$zcc.replace(",","").split("`n");   ##★不要文字削除
;   $zMa1=5; $zMa2=25; $zSMa1=$zSMa2=0; 
;   $nn=$zcm.length; $zcc0=""; $kcm=New-Object String[](500); ##dbc $zcm; ##★高値2,終値4,始値1,安値3
;   for( $ii=$nn-1; $ii -ge 0; $ii--){ $cc=$zcm[$ii]; if($cc.startsWith("20") ){;}else{ continue; }; $ccm=$cc.split("`t"); 
;     $dt0=$ccm[0].replace("2024/",""); $dt1=$ccm[2]; $jj++; $kcm[$jj]=$dt2=$ccm[4]; $dt3=$ccm[1]; $dt4=$ccm[3];
;     ##★Ma5演算
;     if($jj -lt $zMa1 ){ $zSMa1+=$dt2; $dt5=[int]($zSMa1/($jj+1)) }else{ $zSMa1+=($dt2-$kcm[$jj-$zMa1]); $dt5=[int]($zSMa1/$zMa1); };
;     if($jj -lt $zMa2 ){ $zSMa2+=$dt2; $dt6=[int]($zSMa2/($jj+1)) }else{ $zSMa2+=($dt2-$kcm[$jj-$zMa2]); $dt6=[int]($zSMa2/$zMa2); };
;     $zcc0+=("['$dt0',$dt1,$dt2,$dt3,$dt4],`n");
;   }; $dda=$dt2-$kcm[$jj-1];  $dt55=$dt2-$dt5; $dt66=$dt2-$dt6; dbc $zcc0;
;  ##★
;  $zOption="{title:' $zfl [ $dt0 ]株価 $dt2 ($dda) [価-Ma5($dt5)]=$dt55  [価-Ma25($dt6)]=$dt66 ',
;      titleTextStyle:{fontSize:20, color:'black'}, 
;      width:1280, height:620, fontSize:12, chartArea:{left:20, top:30, right:70, bottom:40},legend:'none',
;    series:{ 
;       0:{targetAxisIndex:1,}, 
;     }
;  }"; $zData="[ $zcc0 ], true "; ssGraf $zType $zOption $zData;

＜プログラム説明＞
(1) 1行目 [@echo off ....]から３行目：　パワーシェル文をbatファイル自身から起動する方法で、[##STT:]行以下を切り出してIex()でパワーシェルを起動します。
(2) [using ....]行から [}; ssView($fdt); ....]行目：　パワーシェル文で窓表示画面をコントロールする処理です。
(3) [<##Ver ...]行以下：　パワーシェルではコメント行としての扱いですが、このアプリでは、窓表示データ領域として使います。
(4) 窓データ領域に今回のグラフデータを記述し、メモ帳で編集します。
(5) [&&]行をダブルクリックすると、継続する文字列でサブシェルとして独立に起動します。
(6) [&&&]行をダブルクリックすると、上記(2)記載のプログラム一部として継続処理します。
(7) [;]行は、[&]行に結合した後、上記(5)又は上記(6)の処理をします。
(8) [function global:ssGraf( ..... ]行からの13行で、今回のGoogleChartsグラフ表示の HTMLファイルを生成してグラフ表示します。
以上