グラフの最近のブログ記事

php グーグルAPI グラフの色

| コメント(0)

colors:['deepskyblue', 'orangered', 'orange'],
                          legend:{

入れる場所はここ。

グラフが三つなので、三種類色を指定してあります。

$prefSeisanpper[] = '['."'".$row["month"]."'".','.$row['seisanpy'].','.$row['seisanp'].',100]';//生産計画対比率

こんな感じで配列に入れる。三つのデータグラフなのです。先頭の月はx軸ラベル、一番最後の100は100%を意味する(達成値)ライン用

array_unshift($prefSeisanpper, "['','年次計画対比','修正計画対比','達成率100%']");
$histSeisanpper = join(',', $prefSeisanpper);

これでグラフに表示するデータ、ラベル、汎用が完成。

グラフ表示コードのこの部分。

function drawChart() {
          var data = google.visualization.arrayToDataTable([<?php echo $histSeisanpper;?>]);

これで生産の達成ラインが100%で、計画対比率がグラフ化されます。

php グーグルAPIで簡単グラフ

| コメント(0)

ネットに繋がってなくても「jsapi.js」これを手に入れればグラフが表示されるはず。

普通の折れ線グラフ

<td style=width:650px;>
<script type="text/javascript" src="/db_management/js/jsapi.js"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = google.visualization.arrayToDataTable([<?php echo $histClaim;?>]);
          var chart = new google.visualization.LineChart(document.getElementById('graph_Claim'));
          var options = { title: "<?php echo $Year;?>年度--<?php echo $prefName;?>--苦情",
                          legend:{
                              position:'top'
                          },
                          pointSize: 6,
                          hAxis: {
                              title: "月",
                              titleTextStyle: {
                              fontSize: 12
                              },
                              slantedText:false
                          },
                          vAxis: {
                              title: "件数",
                              titleTextStyle: {
                              fontSize: 12
                                 },
                          },
 
                        }
          chart.draw(data, options);
      }
</script>
    <div id="graph_Claim" style="width:650px; height: 300px;"></div>
</td>

棒グラフ二つに折れ線1本

<td style=width:650px;>
<script type="text/javascript" src="/db_management/js/jsapi.js"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = google.visualization.arrayToDataTable([<?php echo $histSeisanpper;?>]);
          var chart = new google.visualization.ComboChart(document.getElementById('graph_Seisanpper'));
          var options = { title: "<?php echo $Year;?>年度--<?php echo $prefName;?>--生産達成率",
                          legend:{
                              position:'top'
                          },
                          pointSize: 6,
                          hAxis: {
                              title: "月",
                              titleTextStyle: {
                              fontSize: 12
                              },
                              slantedText:false
                          },
                          vAxis: {
                              title: "率",
                              titleTextStyle: {
                              fontSize: 12
                                 },
                          },
                          seriesType: "bars",
                          series: {2: {type: "line"}}
                          };
          chart.draw(data, options);
      }
</script>
    <div id="graph_Seisanpper" style="width:650px; height: 300px;"></div>
</td>