グラフ | zip358.com

chart.jsでデモを試してみました。📈 #javascriptcode

2022.11.18

おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。

さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は３箇所ほど変更して使用しないといけないのかなって。

chart.jsでデモを試してみました。📈

そういう訳で、こちらのブログにソース・コードを貼り付けておきます。

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

業務で変更しないといけない最低限３箇所はこちらです～😆。

ラベル
データーセットの中のラベル
データーセットの中のデータ

上記の３箇所を売上のデータや何やらに使用することで活用できるかと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年11月18 06:00日

タグ

12, 19, 2, ３, 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, 一, 二, 今日, 使用, 動画, 場合, 変更, 夜, 実際, 朝, 業務, 編集, 訳,

常識を数字にすると、えっ日本。

2020.08.06

Logging

日本の人口分布をグラフ化すると、やっぱ東京に日本は一極集中になっている事が分かる。そうなの？そうなの？こんなにも東京とその近辺に県に人口が集中していることが分かるのです。

東京の人口が多いのは、9割のひとは知っている日本の常識だと思いますが、実はこんなにも偏って人口が東京に集中しているとは、正直な所知らなかった。

他の県よりもまぁ多いだろうとそういう考え方だったので、これは衝撃だ！、数字見て『えっ』って絶句してました。

日本の人口分布平成29年 pic.twitter.com/rfQzcUfYkw
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) August 5, 2020

これは東京に大地震きたら日本沈没するかもなと思います、そろそろ都市集中はまずいなと思います。567でどれぐらいこの人口を分散することが出来るのだろうか？

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年08月06 08:19日

タグ

567, ９, グラフ, こと, これ, どれぐらい, ひと, 一極, 事, 人口, 他, 分布, 分散, 大地震, 常識, 所, 数字, 日本, 東京, 正直, 沈没, 県, 絶句, 考え方, 衝撃, 近辺, 都市, 集中,

以前、高知県のダム貯水率のグラフ化してみた事があるのですがいつの間にかデータが取得できなくなっていたようです。なので取得できるようにPHPコードを変更しました。高知県のダム貯水率をJSON形式で吐き出してほしいなと思う人は少数ながらいると思います。そんな方は私がJSON形式で吐き出したデータを密かに使っていたりするのかな？因みにプログラム出来るよというひとは自身で貯水率のデータが転がっているURLを掲載しますので解析して頂ければ有り難いと思います。

https://suibo-kouho.suibou.bousai.pref.kochi.lg.jp/suibou/main.html?no=4&no2=0&fnm=openTable

高知県のダム貯水率をグラフ化してみた。

<?php
$html = file_get_contents("高知県のダム貯水率のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "永瀬ダム"=>"nagase",
    "鎌井谷ダム"=>"kamaidani",
    "鏡ダム"=>"kagami",
    "早明浦ダム"=>"sameura",
    "桐見ダム"=>"kirimi",
    "坂本ダム"=>"sakamoto",
    "大渡ダム"=>"oodo",
    "中筋川ダム"=>"nakasugawa",
    "以布利川ダム"=>"iburigawa"
);
for($i=1;$i<=9;$i++){
    $r[$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[3]")->item(0)->textContent] = preg_replace("/[\x{00a0}|?]/u","",$xpath->query("/html/body/form/div[2]/table/tbody/tr[$i]/td[7]")->item(0)->textContent);
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
//echo '{"nagase":"91.16","kamaidani":"77.57","kagami":"39.32","sameura":"100.00","kirimi":"46.09","sakamoto":"99.38","oodo":"98.70","nakasugawa":"77.90","iburigawa":"99.12"}';
print json_encode($obj);

https://zip358.com/tool/demo6/index.html

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月26 10:25日

タグ

0, 2, 4, amp, bousai, contents, convert, encoding, file, fnm, GET, html, https, jp, json, kochi, LG, lt, main, mb, no, openTable, php, pref, quot, suibo-kouho, suibou, url, グラフ, コード, ダム, データ, ひとは, プログラム, 事, 人, 取得, 変更, 少数, 形式, 掲載, 方, 私, 自身, 解析, 貯水, 高知県,

phpばっかり触っていた人がPython触ってみて！？

2019.11.02

Logging

phpばっかり触っていた人がPython触って
実際コードを書いてみて思ったことは、括弧（かっこ）が無いことで
コードが見ずらい、なれるまで時間がかかりそうです。
片っ端からサンプルコードを見ていてやっとなれてきたかなってところですね。
Functionなんかが入るとまだまだ怪奇です。
PythonのコードはPHPとは真逆で、感覚的にはnode.jsなんかと同じかなと。
web上での動作的な考え方もnode.jsに似てますね。
特にPythonは学術的なコードで計算式からグラフなどを表示するなどは
いろいろなライブラリーが存在していますし、ご存知かと思いますが
AI（人工知能：機械学習）には欠かせない言語の一つかなと思います。
ちなみに音声をグラフ化するのも簡単でした。下記のような感じで表示可能です。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年11月02 08:09日

タグ

AI, function, JS, node, php, Python, web, いろいろ, かっこ, グラフ, コード, こと, ご存知, サンプル, ところ, なんか, らい, ライブラリー, 一つ, 上, 下記, 人, 人工, 動作, 可能, 存在, 学習, 実際, 怪奇, 感じ, 括弧, 時間, 機械, 片っ端, 知能, 簡単, 考え方, 表示, 言語, 計算, 音声,

高知県のダム貯水率をグラフ化してみた。

2019.09.21

Logging

高知県のダム貯水率をグラフ化してみた。
親戚にダムに勤めている人がいるのがきっかけで貯水率って
HPで表示させているのかなという事で調べてみました。
結果、かなり古いデザインサイトが現れた。
何とも懐かしい気持ちになりました。
そこでこの表からグラフ化してみたいなとか思って
ゴニョゴニョ作ってみた。
ちなみにソースコードが変わると
抜き取り出来なくなります。
追記：やはり変更されていました2へ続く
ソースコードを貼っときます。
ajaxとPHPを使用してます、XPathで貯水率だけ抜き取ってます。
サンプルサイト
https://zip358.com/tool/demo6/index.html

<?php
$html = file_get_contents("高知県のダム情報のURL");
$html = mb_convert_encoding($html,"UTF-8","SJIS");
$dom = new DOMDocument();
$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
@$dom->loadHTML($html,LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$ary=array(
    "nagase",
    "kamaidani",
    "kagami",
    "sameura",
    "kirimi",
    "sakamoto",
    "oodo",
    "nakasugawa",
    "iburigawa"
);
for($i=3;$i<=11;$i++){
    foreach ($xpath->query("/html/body/form/div[2]/table/tr/td/table/tr[$i]/td[7]") as $node) {
        $r[] = preg_replace("/x{00a0}/u","",$node->textContent);
    }
}
foreach ($r as $key => $value) {
    $obj[$ary[$key]] = $value;
}
print json_encode($obj);

$(function(){
    dam();
    //setInterval(dam,9999)
});
function dam(){
    $.ajax({
        url　: './dam.php',
        dataType : 'json',
        success　: function(obj){
            $("#nagase").attr( "style","width:"+ parseInt(obj.nagase) +"%");
            $("#kamaidani").attr( "style","width:"+ parseInt(obj.kamaidani) +"%");
            $("#kagami").attr( "style","width:"+ parseInt(obj.kagami) +"%");
            $("#sameura").attr( "style","width:"+ parseInt(obj.sameura) +"%");
            $("#kirimi").attr( "style","width:"+ parseInt(obj.kirimi) +"%");
            $("#sakamoto").attr( "style","width:"+ parseInt(obj.sakamoto) +"%");
            $("#oodo").attr( "style","width:"+ parseInt(obj.oodo) +"%");
            $("#nakasugawa").attr( "style","width:"+ parseInt(obj.nakasugawa) +"%");
            $("#iburigawa").attr( "style","width:"+ parseInt(obj.iburigawa) +"%");
            $("#nagase").attr( "aria-valuenow",parseInt(obj.nagase));
            $("#kamaidani").attr( "aria-valuenow",parseInt(obj.kamaidani));
            $("#kagami").attr( "aria-valuenow",parseInt(obj.kagami));
            $("#sameura").attr( "aria-valuenow",parseInt(obj.sameura));
            $("#kirimi").attr( "aria-valuenow",parseInt(obj.kirimi));
            $("#sakamoto").attr( "aria-valuenow",parseInt(obj.sakamoto));
            $("#oodo").attr( "aria-valuenow",parseInt(obj.oodo));
            $("#nakasugawa").attr( "aria-valuenow",parseInt(obj.nakasugawa));
            $("#iburigawa").attr( "aria-valuenow",parseInt(obj.iburigawa));
            $("#nagase").text(obj.nagase + "%");
            $("#kamaidani").text(obj.kamaidani + "%");
            $("#kagami").text(obj.kagami + "%");
            $("#sameura").text(obj.sameura + "%");
            $("#kirimi").text(obj.kirimi + "%");
            $("#sakamoto").text(obj.sakamoto + "%");
            $("#oodo").text(obj.oodo + "%");
            $("#nakasugawa").text(obj.nakasugawa + "%");
            $("#iburigawa").text(obj.iburigawa + "%");
        },
        error: function(obj){
            alert("error");
        }
    });
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高知県のダム貯水率</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="./js/dam.js"></script>
    <style>
        body{
            background-color: #3e4654;
            color: aliceblue;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <main role="main" class="flex-shrink-0">
        <div class="container">
            <table class="table table-dark">
                <tr>
                    <td style="width:15%">
                        <p>永瀬ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress"  style="width:100%">
                            <div id="nagase" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鎌井谷ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kamaidani" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>鏡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kagami" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>早明浦ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sameura" class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>桐見ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="kirimi" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>坂本ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="sakamoto" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>大渡ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="oodo" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>中筋川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="nakasugawa" class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width:15%">
                        <p>以布利川ダム</p>
                    </td>
                    <td style="width:85%">
                        <div class="progress">
                            <div id="iburigawa" class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </main>
    <footer class="footer mt-auto py-3">
        <div class="container">
            <span class="text-muted">©zip358.com</span>
        </div>
    </footer>
</body>
</html>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年09月21 05:10日

タグ

2, 358, 6, 8, ajax, com, contents, convert, demo, encoding, file, GET, HP, html, https, index, lt, mb, php, SJIS, tool, url, UTF-, XPath, zip, かなり, きっかけ, グラフ, コード, ゴニョゴニョ, サイト, サンプル, ソース, そこ, ダム, デザイン, 事, 人, 何, 使用, 変更, 情報, 気持ち, 結果, 表, 表示, 親戚, 貯水, 追記, 高知県,

chart.jsでデモを試してみました。📈 #javascriptcode

常識を数字にすると、えっ日本。

高知県のダム貯水率グラフ化2

phpばっかり触っていた人がPython触ってみて！？

高知県のダム貯水率をグラフ化してみた。