【Google Charts】（Chat GPTで解決）表を%表示にする

当サイトでは記事内に広告を掲載しています。

Table of Contents

Google ChartsはWordPressにプラグインなしでグラフや図を描くことができる

Google ChartsはWordPressにプラグインなしでインタラクティブなグラフや図を描くことができます。

誰でも無償で会員登録なしに利用できるのも魅力の一つです。

例えば今回の例の表の場合、タイトル行をクリックすると降順・昇順を切り替えることができます。

以下の書籍はGoogle ChartのHTMLファイルのサンプルをインターネットからダウンロードできるのでおすすめです。

同様の書籍は、現時点で筆者の知る限りありません。

ソースコード改修のためのプロンプト

今回はGoogle Chartsで作成した以下の表を%表示にする方法をChatGPTに聞いてみます。

ChatGPTを使えるようになり、特にコードの編集において、素人でもかなり効率化できるようになったと感じています。

上の表のソースコードを用いて以下のようなプロンプトを作成しました。

特段、大きなコツがあるようなプロンプトではないですが、以下のようなプロンプトでもこちらが満足する回答結果が返ってきました。

プロンプトのサンプルを表示する

以下の表を%表記になるようにコードを書き換えてください。
<!-- Ajax API の読み込み（Googleが提供しているライブラリまでのパス） -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- チャート実装 -->
<script type="text/javascript">
  // Google Visualization APIと“corechart”パッケージの読み込み
    google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawChart);

function drawChart(){
	// ==================== データ指定 ====================
	var rawData = [
['	Company	','	NOBLのSDYとの重複	','	SDYのNOBLとの重複	'],
['	    EXXON MOBIL CORP	',	0.018	,	0.021	],
['	    CHEVRON CORP	',	0.017	,	0.023	],
['	    ABBVIE INC	',	0.017	,	0.026	],
['	    INTL BUSINESS MACHINES CORP	',	0.017	,	0.028	],
['	    3M CO	',	0.015	,	0.03	],
['	    COCA-COLA CO/THE	',	0.015	,	0.015	],
['	    MEDTRONIC PLC	',	0.015	,	0.015	],
['	    KIMBERLY-CLARK CORP	',	0.015	,	0.016	],
['	    CONSOLIDATED EDISON INC	',	0.015	,	0.018	],
['	    T ROWE PRICE GROUP INC	',	0.014	,	0.018	],
['	    AFLAC INC	',	0.017	,	0.014	],
['	    JOHNSON & JOHNSON	',	0.014	,	0.014	],
['	    TARGET CORP	',	0.013	,	0.015	],
['	    GENERAL DYNAMICS CORP	',	0.017	,	0.013	],
['	    PEPSICO INC	',	0.015	,	0.013	],
['	    CLOROX COMPANY	',	0.014	,	0.013	],
['	    EMERSON ELECTRIC CO	',	0.017	,	0.013	],
['	    PROCTER & GAMBLE CO/THE	',	0.016	,	0.013	],
['	    REALTY INCOME CORP	',	0.013	,	0.022	],
['	    SYSCO CORP	',	0.014	,	0.013	],
['	    CINCINNATI FINANCIAL CORP	',	0.016	,	0.013	],
['	    COLGATE-PALMOLIVE CO	',	0.015	,	0.013	],
['	    AUTOMATIC DATA PROCESSING	',	0.017	,	0.013	],
['	    ARCHER-DANIELS-MIDLAND CO	',	0.015	,	0.012	],
['	    CATERPILLAR INC	',	0.017	,	0.012	],
['	    WALGREENS BOOTS ALLIANCE INC	',	0.012	,	0.012	],
['	    AIR PRODUCTS & CHEMICALS INC	',	0.015	,	0.012	],
['	    ATMOS ENERGY CORP	',	0.014	,	0.012	],
['	    AMCOR PLC	',	0.015	,	0.011	],
['	    NEXTERA ENERGY GROUP	',	0.013	,	0.011	],
['	    CARDINAL HEALTH INC	',	0.015	,	0.011	],
['	    ESSEX PROPERTY TRUST INC	',	0.014	,	0.01	],
['	    GENUINE PARTS CO	',	0.015	,	0.01	],
['	    CHUBB LIMITED	',	0.017	,	0.01	],
['	    JM SMUCKER CO/THE	',	0.013	,	0.01	],
['	    ILLINOIS TOOL WORKS	',	0.015	,	0.01	],
['	    STANLEY BLACK & DECKER	',	0.014	,	0.01	],
['	    MCDONALD’S CORP	',	0.015	,	0.01	],
['	    LOWE’S COS INC	',	0.015	,	0.01	],
['	    ABBOTT LABORATORIES	',	0.014	,	0.009	],
['	    HORMEL FOODS CORP	',	0.015	,	0.009	],
['	    MCCORMICK & CO-NON VTG SHRS	',	0.014	,	0.008	],
['	    WAL-MART STORES INC	',	0.017	,	0.008	],
['	    C.H. ROBINSON WORLDWIDE INC	',	0.014	,	0.008	],
['	    PPG INDUSTRIES INC	',	0.015	,	0.008	],
['	    BECTON DICKINSON AND CO	',	0.015	,	0.007	],
['	    PENTAIR PLC	',	0.016	,	0.007	],
['	    DOVER CORP	',	0.015	,	0.007	],
['	    SMITH (A.O.) CORP	',	0.014	,	0.006	],
['	    NUCOR CORP	',	0.015	,	0.006	],
['	    EXPEDITORS INTL WASH INC	',	0.015	,	0.006	],
['	    BROWN-FORMAN CORP-CLASS B	',	0.014	,	0.006	],
['	    ECOLAB INC	',	0.015	,	0.005	],
['	    CHURCH & DWIGHT CO INC	',	0.015	,	0.005	],
['	    FRANKLIN RESOURCES INC	',	0.014	,	0.005	],
['	    FEDERAL REALTY OP LP	',	0.014	,	0.005	],
['	    NORDSON CORP	',	0.015	,	0.005	],
['	    CINTAS CORP	',	0.016	,	0.005	],
['	    SHERWIN-WILLIAMS CO/THE	',	0.016	,	0.005	],
['	    WW GRAINGER INC	',	0.015	,	0.005	],
['	    S&P GLOBAL, INC.	',	0.014	,	0.004	],
['	    BROWN & BROWN INC	',	0.016	,	0.004	],
['	    ROPER TECHNOLOGIES, INC.	',	0.016	,	0.003	],
['	    ALBEMARLE CORP	',	0.013	,	0.003	],
['	    WEST PHARMACEUTICAL SERVICES	',	0.016	,	0.001	],
	];

    // 各列の合計を計算
    var sums = ['Total', 0, 0];
    for(var i = 1; i < rawData.length; i++) { // ヘッダー行をスキップするためにインデックス1から開始
        for(var j = 1; j < rawData[i].length; j++) {
            if(typeof rawData[i][j] === "number") {
                sums[j] += rawData[i][j];
            }
        }
    }

    // 合計行をデータに追加
    rawData.push(sums);

	var data = google.visualization.arrayToDataTable(rawData);

	// ================= オプションの指定 =================
        var options = {
		height: 700,
        　　　　frozenColumns: 1,
                showRowNumber:true
	};    
	// =================== グラフの描画 ===================
	var chart = new google.visualization.Table(document.getElementById('table'));
	chart.draw(data, options);
}

</script>



<div id="table"></div>

ChatGPTの回答

オリジナルのソースコードは一部省略されている部分がありますが、以下がChatGPTからの回答です。

ChatGPT

以下のコードでは、元の数値をパーセンテージ表示に変換するために、元の数値を100倍して、パーセンテージ記号 '%' を追加します。データの変換はdrawChart関数内で行われます。

変更部分を以下に示します：

rawData の数値部分をパーセンテージ表示に変換。
合計も同様にパーセンテージ表示に変換。

function drawChart(){
    // ==================== データ指定 ====================
    // ... rawData unchanged ...

    // 各列の合計を計算
    var sums = ['Total', 0, 0];
    for(var i = 1; i < rawData.length; i++) {
        for(var j = 1; j < rawData[i].length; j++) {
            if(typeof rawData[i][j] === "number") {
                sums[j] += rawData[i][j];
                rawData[i][j] = (rawData[i][j] * 100).toFixed(2) + '%';  // Convert to percentage
            }
        }
    }

    // 合計行の数値もパーセンテージ表示に変換
    for (var j = 1; j < sums.length; j++) {
        if (typeof sums[j] === "number") {
            sums[j] = (sums[j] * 100).toFixed(2) + '%';
        }
    }

    // 合計行をデータに追加
    rawData.push(sums);

    var data = google.visualization.arrayToDataTable(rawData);

    // ... remaining code unchanged ...
}

ChatGPT

この変更を行うことで、表の数値がパーセンテージ表示に変わります。

ソースコードの修正結果

AIの回答に従い、コードを改変した結果が以下になります。

赤のマーカー部分はBefore&Afterを示すために便宜上変えています。

改変後ソースコードを表示する

<!-- Ajax API の読み込み（Googleが提供しているライブラリまでのパス） -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<!-- チャート実装 -->
<script type="text/javascript">
  // Google Visualization APIと“corechart”パッケージの読み込み
    google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawChart);

function drawChart(){
	// ==================== データ指定 ====================
	var rawData = [
['	Company	','	NOBLのSDYとの重複	','	SDYのNOBLとの重複	'],
['	    EXXON MOBIL CORP	',	0.018	,	0.021	],
['	    CHEVRON CORP	',	0.017	,	0.023	],
['	    ABBVIE INC	',	0.017	,	0.026	],
['	    INTL BUSINESS MACHINES CORP	',	0.017	,	0.028	],
['	    3M CO	',	0.015	,	0.03	],
['	    COCA-COLA CO/THE	',	0.015	,	0.015	],
['	    MEDTRONIC PLC	',	0.015	,	0.015	],
['	    KIMBERLY-CLARK CORP	',	0.015	,	0.016	],
['	    CONSOLIDATED EDISON INC	',	0.015	,	0.018	],
['	    T ROWE PRICE GROUP INC	',	0.014	,	0.018	],
['	    AFLAC INC	',	0.017	,	0.014	],
['	    JOHNSON & JOHNSON	',	0.014	,	0.014	],
['	    TARGET CORP	',	0.013	,	0.015	],
['	    GENERAL DYNAMICS CORP	',	0.017	,	0.013	],
['	    PEPSICO INC	',	0.015	,	0.013	],
['	    CLOROX COMPANY	',	0.014	,	0.013	],
['	    EMERSON ELECTRIC CO	',	0.017	,	0.013	],
['	    PROCTER & GAMBLE CO/THE	',	0.016	,	0.013	],
['	    REALTY INCOME CORP	',	0.013	,	0.022	],
['	    SYSCO CORP	',	0.014	,	0.013	],
['	    CINCINNATI FINANCIAL CORP	',	0.016	,	0.013	],
['	    COLGATE-PALMOLIVE CO	',	0.015	,	0.013	],
['	    AUTOMATIC DATA PROCESSING	',	0.017	,	0.013	],
['	    ARCHER-DANIELS-MIDLAND CO	',	0.015	,	0.012	],
['	    CATERPILLAR INC	',	0.017	,	0.012	],
['	    WALGREENS BOOTS ALLIANCE INC	',	0.012	,	0.012	],
['	    AIR PRODUCTS & CHEMICALS INC	',	0.015	,	0.012	],
['	    ATMOS ENERGY CORP	',	0.014	,	0.012	],
['	    AMCOR PLC	',	0.015	,	0.011	],
['	    NEXTERA ENERGY GROUP	',	0.013	,	0.011	],
['	    CARDINAL HEALTH INC	',	0.015	,	0.011	],
['	    ESSEX PROPERTY TRUST INC	',	0.014	,	0.01	],
['	    GENUINE PARTS CO	',	0.015	,	0.01	],
['	    CHUBB LIMITED	',	0.017	,	0.01	],
['	    JM SMUCKER CO/THE	',	0.013	,	0.01	],
['	    ILLINOIS TOOL WORKS	',	0.015	,	0.01	],
['	    STANLEY BLACK & DECKER	',	0.014	,	0.01	],
['	    MCDONALD’S CORP	',	0.015	,	0.01	],
['	    LOWE’S COS INC	',	0.015	,	0.01	],
['	    ABBOTT LABORATORIES	',	0.014	,	0.009	],
['	    HORMEL FOODS CORP	',	0.015	,	0.009	],
['	    MCCORMICK & CO-NON VTG SHRS	',	0.014	,	0.008	],
['	    WAL-MART STORES INC	',	0.017	,	0.008	],
['	    C.H. ROBINSON WORLDWIDE INC	',	0.014	,	0.008	],
['	    PPG INDUSTRIES INC	',	0.015	,	0.008	],
['	    BECTON DICKINSON AND CO	',	0.015	,	0.007	],
['	    PENTAIR PLC	',	0.016	,	0.007	],
['	    DOVER CORP	',	0.015	,	0.007	],
['	    SMITH (A.O.) CORP	',	0.014	,	0.006	],
['	    NUCOR CORP	',	0.015	,	0.006	],
['	    EXPEDITORS INTL WASH INC	',	0.015	,	0.006	],
['	    BROWN-FORMAN CORP-CLASS B	',	0.014	,	0.006	],
['	    ECOLAB INC	',	0.015	,	0.005	],
['	    CHURCH & DWIGHT CO INC	',	0.015	,	0.005	],
['	    FRANKLIN RESOURCES INC	',	0.014	,	0.005	],
['	    FEDERAL REALTY OP LP	',	0.014	,	0.005	],
['	    NORDSON CORP	',	0.015	,	0.005	],
['	    CINTAS CORP	',	0.016	,	0.005	],
['	    SHERWIN-WILLIAMS CO/THE	',	0.016	,	0.005	],
['	    WW GRAINGER INC	',	0.015	,	0.005	],
['	    S&P GLOBAL, INC.	',	0.014	,	0.004	],
['	    BROWN & BROWN INC	',	0.016	,	0.004	],
['	    ROPER TECHNOLOGIES, INC.	',	0.016	,	0.003	],
['	    ALBEMARLE CORP	',	0.013	,	0.003	],
['	    WEST PHARMACEUTICAL SERVICES	',	0.016	,	0.001	],
	];

    // 各列の合計を計算
    var sums = ['Total', 0, 0];
    for(var i = 1; i < rawData.length; i++) {
        for(var j = 1; j < rawData[i].length; j++) {
            if(typeof rawData[i][j] === "number") {
                sums[j] += rawData[i][j];
                rawData[i][j] = (rawData[i][j] * 100).toFixed(2) + '%';  // Convert to percentage
            }
        }
    }

    // 合計行の数値もパーセンテージ表示に変換
    for (var j = 1; j < sums.length; j++) {
        if (typeof sums[j] === "number") {
            sums[j] = (sums[j] * 100).toFixed(2) + '%';
        }
    }

    // 合計行をデータに追加
    rawData.push(sums);

    var data = google.visualization.arrayToDataTable(rawData);

	// ================= オプションの指定 =================
        var options = {
		height: 700,
        　　　　frozenColumns: 1,
                showRowNumber:true
	};    
	// =================== グラフの描画 ===================
	var chart = new google.visualization.Table(document.getElementById('table2'));
	chart.draw(data, options);
}

</script>



<div id="table2"></div>

表を%表示にすることができました。

ChatGPTは素人でも効率的にコード編集することをサポートする有用なツールになり得ると感じました。