[PHP] 구글 차트 사용 및 mysql DB 연동, mysql 배열 출력

기록 형식으로 작성하는거라 단순 구글차트 기능만 있지않습니다.

보고 이해가 안되실수도 있을테고.. 응용해서 쓰실수있으신분이 가져가시면 될듯하네요

그대로 복사해서 갖다 쓰시면 당연히 에러나실겁니다 정말 꼭 알고싶고 정 이해안되는 부분이 있으시면 댓글남겨주시면 제가 아는선에서 최대한 말씀드리겠습니다

 

아래와 같은 화면으로 구성되있고 년도별, 월별, 일별 검색이 가능한 창으로 개발한 소스입니다

 

기본값이 일별이라 일별 기준으로 포스팅 합니다

HTML 부분

<div id="columnchart_material" style="width:100%; height: 500px;"></div>

SCRIPT 부분

<script>
  google.charts.load("current", {packages:['corechart']});    
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
      //사용자 선택한 배열
      var selectDataArray = Array();

      var chartwidth = $('#chartparent').width();

      //견적, 메일, 문자
      var chart_array = Array();
      var cm_arr = document.getElementsByName("chart_mode[]");
      var send_cnt = 0;
      var ymd_mode = $(":input:radio[name=ymd_mode]:checked").val();

      for(i=0;i<cm_arr.length;i++) {
          if (cm_arr[i].checked == true){
              chart_array[send_cnt] = cm_arr[i].value;
              send_cnt++;
          }   		   
      }

      //console.log("drawChart 선택 : " + chart_array, ymd_mode);

      var s_date = $("#s_date").val();
      var e_date = $("#e_date").val();

      $("#chartText").html(ymd_mode);	

      $("input[name='selectDataArray[]']").each(function(){
          selectDataArray.push(parseInt($(this).val()));		    
      });

      //사용자 목록
      selectDataArray = Array.from(new Set(selectDataArray));

      $(".secondChart").hide();

      $.ajax({
          type: "POST",
          url : "ajax/ajax.main.php",
          data	:{ "chart_array" : chart_array , "ymd_mode" : ymd_mode, "s_date" : s_date, "e_date" : e_date, "s_year" : s_year, "s_month" : s_month, "e_year" : e_year, "e_month" : e_month, "selectDataArray" : selectDataArray},
          //dataType: 'JSON',					
          success	: function (res) {

              console.log(res);

              if($.trim(res) == "ERR"){

                  alert("견적,메일,문자 중에 하나 이상은 선택되어야 합니다.");


                  var data = google.visualization.arrayToDataTable([["\uc6d4\ubcc4","\uacac\uc801\uac74\uc218","\uba54\uc77c\uac74\uc218","\ubb38\uc790\uac74\uc218"],[0,0,0,0]]);

                  $('input:checkbox[name="chart_mode[]"]').each(function() {
                        this.checked = true; //checked 처리
                        drawChart()
                        /*if(this.checked){
                              alert(this.value); 
                        }*/
                   });


              }else{
                  var arrResult = res.split("||");
                  res = $.trim(arrResult[1]);
                  var data = google.visualization.arrayToDataTable(JSON.parse(res));										

                  var view = new google.visualization.DataView(data);

                  if(chart_array.length == 3){
                      view.setColumns([0,
                      1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2,
                     { calc: "stringify",
                      sourceColumn: 2,
                      type: "string",
                      role: "annotation" },
                      3,
                     { calc: "stringify",
                      sourceColumn: 3,
                      type: "string",
                      role: "annotation" }
                    ]);
                  }else if(chart_array.length == 2){
                      view.setColumns([0,
                      1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2,
                     { calc: "stringify",
                      sourceColumn: 2,
                      type: "string",
                      role: "annotation" }                        
                    ]);
                  }else if(chart_array.length == 1){
                      view.setColumns([0,
                      1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" }                        
                    ]);
                  } 


              }

              var options = {
                  width: chartwidth,
                  /*
                  title: "Density of Precious Metals, in g/cm^3",			        
                  bar: {groupWidth: "95%"},
                  legend: { position: "none" },
                  */
              };


              var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
              chart.draw(view, options);

              // 컬럼 선택시 alert 창 띄우는거
              // selectHandler() function.
              /*
              google.visualization.events.addListener(chart, 'select', selectHandler);

              function selectHandler() {
                var selection = chart.getSelection();
                var message = '';
                for (var i = 0; i < selection.length; i++) {
                  var item = selection[i];
                  if (item.row != null && item.column != null) {
                    var str = view.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                  } else if (item.row != null) {
                    var str = view.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                  } else if (item.column != null) {
                    var str = view.getFormattedValue(0, item.column);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                  }
                }
                if (message == '') {
                  message = 'nothing';
                }
                alert('You selected ' + message);
              }
              */

          },
          error	: function (res) {
              alert(res.responseText);
          },
      });		

  }

</script>

---

그래프에 값 들어가는 배열 형식은 아래와 같습니다

[
	["\uc77c\ubcc4","\uacac\uc801\uac74\uc218","\uba54\uc77c\uac74\uc218","\ubb38\uc790\uac74\uc218"]
    ,["08\/04",13,7,13]
    ,["08\/05",10,8,10]
    ,["08\/06",2,3,1]
    ,["08\/07",6,1,4]
    ,["08\/08",null,null,null]
    ,["08\/09",null,null,null]
    ,["08\/10",7,2,5]
    ,["08\/11",null,null,null]
]

DB 에서 값을 loop 해서 뽑아올때도 위 배열처럼 나와야된단 말이지요

각자 테이블 짜는건 다를테니 쿼리문은 굳이 올리진 않겠습니다

여튼 저 방식대로 짜려고 제 나름대로 짱돌을 굴려서 배열 합치기 나누기 등등 이것저것 php 함수를 썻네요

사용된 php 배열 함수는 아래와 같습니다

 

array_merge
array_push
array_filter
array_unshift

 

	$query = " 쿼리 돌리고 ";
    
    	$dataPoints1 = array('일별'); // 일별이라는 배열 선언
    
	$result = mysqli_query($connect,$query);
	$row = mysqli_fetch_array($result);		
	
    	// $chart_array : 견적, 메일, 문자 중에 선택된것들만 가져와서, 일별 배열과 합쳐놓기
	$dataPoints1 = array_merge($dataPoints1, $chart_array);

	$i = 1;
	$last_data[] = array(); //빈 배열 하나 만들어줌

	while($row) {
    
        $yyyy = substr($row['YYYYMMDD'],0,4);
        $mm = substr($row['YYYYMMDD'],4,2);
        $dd = substr($row['YYYYMMDD'],6,2);

		$data = array($mm."/".$dd);	 // 그래프 밑 라벨에 들어갈 데이터 배열		
		
        // 견적, 메일, 문자 체크된대로 배열 합치기
		if( in_array( "견적건수" ,$dataPoints1 )){
			$row_arr = array($row['견적건수']);
			$data = array_merge($data, $row_arr);
		}

		if( in_array( "메일건수" ,$dataPoints1 )){
			$row_arr2 = array($row['메일건수']);
			$data = array_merge($data, $row_arr2);
		}

		if( in_array( "문자건수" ,$dataPoints1 )){
			$row_arr3 = array($row['문자건수']);
			$data = array_merge($data, $row_arr3);
		}

		array_push($last_data, $data); //최종배열에 라벨 데이터 밀어넣기
		
		$i++;
		$row = mysqli_fetch_array($result);		
	}

	$last_data = array_filter($last_data); // array 필터 적용

	array_unshift($last_data, $dataPoints1); // array 순서 뒤바꿔주기

	echo "||".json_encode($last_data, JSON_NUMERIC_CHECK); //json 으로 출력

 

참고로 구글차트 작업시에 데이터가 없으면 빨갛게 데이터형식이 맞지않다는 에러문구가 나오는데,

이걸 없애는 방법은 아래 스크립트를

google.visualization.events.addListener(chart, 'error', function (googleError) {
  google.visualization.errors.removeError(googleError.id);
  $('#columnchart_material').css("text-align","center").css("padding-top","10px");
  document.getElementById('columnchart_material').innerHTML = "데이터가 없습니다";
});

 

차트 스크립트 소스 중

chart.draw(view,options);

전에 넣어주시면 됩니다.

그럼 빨간 에러문구 대신에 "데이터가 없습니다" 문구를 볼수 있습니다.