[Google] Line Chart / Column Chart (선그래프/막대그래프) 챠트 > 기술자료

<%

dim send_date, total, success

dim arrDate(7), arrTotal(7), arrSuccess(7)

SQL = "SELECT top 8 left(gubun,6) as send_date, total, success FROM view_im_dmail_info where ms_end = 'y' and mb_no = '"& session("ss_mb_no") &"' order by edate desc "

'response.write sql

set rs = conn.execute(sql)

If Rs.BOF or Rs.EOF Then 

Else 

  i = 0

  Do until rs.EOF

arrDate(i) = mid(rs(0),5,2) &"-"& right(rs(0),2)

    arrTotal(i) = rs(1)

    arrSuccess(i) = rs(2)

  rs.movenext 

  i = i + 1

  loop 

end if

rs.close

 

  if arrTotal(0) > 0 or arrTotal(0) < 0 then 

  else

    arrTotal(0) = 0 

  end if

  if arrTotal(1) > 0 or arrTotal(1) < 0 then 

  else

    arrTotal(1) = 0 

  end if

  if arrTotal(2) > 0 or arrTotal(2) < 0 then 

  else

    arrTotal(2) = 0 

  end if

  if arrTotal(3) > 0 or arrTotal(3) < 0 then 

  else

    arrTotal(3) = 0 

  end if

  if arrTotal(4) > 0 or arrTotal(4) < 0 then 

  else

    arrTotal(4) = 0 

  end if

  if arrTotal(5) > 0 or arrTotal(5) < 0 then 

  else

    arrTotal(5) = 0 

  end if

  if arrTotal(6) > 0 or arrTotal(6) < 0 then 

  else

    arrTotal(6) = 0 

  end if

  if arrTotal(7) > 0 or arrTotal(7) < 0 then 

  else

    arrTotal(7) = 0 

  end if

  

  if arrSuccess(0) > 0 or arrSuccess(0) < 0 then 

  else

    arrSuccess(0) = 0 

  end if

  if arrSuccess(1) > 0 or arrSuccess(1) < 0 then 

  else

    arrSuccess(1) = 0 

  end if

  if arrSuccess(2) > 0 or arrSuccess(2) < 0 then 

  else

    arrSuccess(2) = 0 

  end if

  if arrSuccess(3) > 0 or arrSuccess(3) < 0 then 

  else

    arrSuccess(3) = 0 

  end if

  if arrSuccess(4) > 0 or arrSuccess(3) < 0 then 

  else

    arrSuccess(4) = 0 

  end if

  if arrSuccess(5) > 0 or arrSuccess(5) < 0 then 

  else

    arrSuccess(5) = 0 

  end if

  if arrSuccess(6) > 0 or arrSuccess(6) < 0 then 

  else

    arrSuccess(6) = 0 

  end if

  if arrSuccess(7) > 0 or arrSuccess(7) < 0 then 

  else

    arrSuccess(7) = 0 

  end if

'response.write "arrDate0 = "&arrDate(0) &"<br />"

'response.write "arrDate0 = "&arrDate(1) &"<br />"

'response.write "arrDate0 = "&arrDate(2) &"<br />"

'response.write "arrTotal0 = "&arrTotal(0) &"<br />"

'response.write "arrTotal1 = "&arrTotal(1) &"<br />"

'response.write "arrTotal2 = "&arrTotal(2) &"<br />"

'response.write "arrSuccess0 = "&arrSuccess(0) &"<br />"

'response.write "arrSuccess1 = "&arrSuccess(1) &"<br />"

'response.write "arrSuccess2 = "&arrSuccess(2) &"<br />"

 

%>

<script type="text/javascript">

  google.load("visualization", "1", {packages:["corechart"]});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([

      ['발송회차', '전체', '성공'],

      ['<%=arrDate(7) %>', <%=arrTotal(7) %>, <%=arrSuccess(7) %>],

      ['<%=arrDate(6) %>', <%=arrTotal(6) %>, <%=arrSuccess(6) %>],

      ['<%=arrDate(5) %>', <%=arrTotal(5) %>, <%=arrSuccess(5) %>],

      ['<%=arrDate(4) %>', <%=arrTotal(4) %>, <%=arrSuccess(4) %>],

      ['<%=arrDate(3) %>', <%=arrTotal(3) %>, <%=arrSuccess(3) %>],

      ['<%=arrDate(2) %>', <%=arrTotal(2) %>, <%=arrSuccess(2) %>],

      ['<%=arrDate(1) %>', <%=arrTotal(1) %>, <%=arrSuccess(1) %>],

      ['<%=arrDate(0) %>', <%=arrTotal(0) %>, <%=arrSuccess(0) %>]

    ]);

 

    var options = {

      title: '초대장 발송',

      hAxis: {title: '발송 날짜', titleTextStyle: {color: 'red'}}

    };

 

    // 막대그래프

    //var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_ColumnChart'));

    // 선그래프

    var chart = new google.visualization.LineChart(document.getElementById('chart_div_ColumnChart'));

    chart.draw(data, options);

  }

</script>

<table border="1"><tr><td><div id="chart_div_ColumnChart" style="width: 742px; height: 400px;"></div></td></tr></table>


참고자료
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart