로그인
회원가입
Top50
보관함
즐겨찾기
좋아요
최근목록
커뮤니티
건강/의학
문화/엔터
영상/사진
쇼핑/생활
경제/금융
IT/과학
스포츠
여행
음식/요리/맛집
유아/아동
교육/학습
어플/프로그램
유튜브
카페
블로그
자료/파일/문서공유
기타
비즈니스/사업
SNS
전체보기
전체개요
회사명 : 모아요넷
대표자 : 전현미
E-Mail :
[email protected]
Top50
보관함
즐겨찾기
좋아요
최근목록
커뮤니티
건강/의학
문화/엔터
영상/사진
쇼핑/생활
경제/금융
IT/과학
스포츠
여행
음식/요리/맛집
유아/아동
교육/학습
어플/프로그램
유튜브
카페
블로그
자료/파일/문서공유
기타
비즈니스/사업
SNS
전체보기
전체개요
회사명 : 모아요넷
대표자 : 전현미
E-Mail :
[email protected]
조회수:1,376
04 씨스톡 구글 API를 활용한 지수차트 그리기
0
https://www.moayo.net/p-moayo-21026
(짧은주소)
04 씨스톡 구글 API를 활용한 지수차트 그리기
1) 반도체 지수 데이터 입력
-SOX 필라델피아 반도체 지수(코드:^SOX) 2) 차트 API 선택 (Chart.js , 구글차트) -
https://www.chartjs.org
-
https://developers.google.com/chart/interactive/docs/gallery?hl=ko
3) 구글 차트 적용하기
-
http://cstock.co.kr/program.php?p_code=stockindex&p=read_sox
chart_read_sox.php (php 차트 넣는 소스)
<? $search_code="^SOX";//반도체지수(필라델피아 반도체 지수) if($search_code){//종목코드검색 $SEARCH.=" and p_title='$search_code'"; } if(!$search1)$search1=date("Y-m-d",strtotime("-1 year"));//1년전것 부터시작 if(!$search2)$search2=date("Y-m-d");//오늘날짜 까지 $SEARCH.=" and wdate>='$search1 00:00:00'"; $SEARCH.=" and wdate<='$search2 23:59:59'"; //차트호출 $sql=" select * from ".$table[program_id].$p_code." where 1 "; $sql.=" and p_title='$search_code'"; $sql.=" and wdate>='$search1 00:00:00'"; $sql.=" and wdate<='$search2 23:59:59'"; $sql.=" order by wdate desc"; $result=mysql_query($sql,$dbcon); while($row=mysql_fetch_array($result)){ $title_tail="";//타이틀 $data_tail="";//데이터 if($search3=="y"){//200일 평균선노출 $title_tail.=",'200평균'"; $data_tail.=",".round($row[p_int14],2); } //데이터 노출부분 $data1=",['".date("y.m.d",strtotime($row[wdate]))."',".round($row[p_int1],2)."{$data_tail}]".$data1; } ?> <script> function SEARCH(){//검색 var form=document.form; form.v.value="p"; form.focus_no.value=""; form.submit(); } </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = google.visualization.arrayToDataTable([ ['', '<?=$search4?>'<?=$title_tail?>]<?//타이틀들어가는자리?> <?=$data1?><?//데이터들어가는자리?> ]); var options = { chartArea:{width:'100%',height:'100%',top:50,bottom:50,left:50,right:20}, vAxis: {gridlines:{color:'#dddddd', count:5}}, legend: 'none', series: { lineWidth: 0 // 데이터 시리즈 선 숨김 }, crosshair: { color: '#ff0000', // 가이드 라인 색상 설정 trigger: 'both', // 가이드 라인 동작 설정 (both, focus, selection) orientation: 'both' // 가이드 라인 방향 설정 (both, vertical, horizontal) }, focusTarget: 'datum', //datum:차트에 마우스가 오버되는경우 , category:차트에 마우스가 오버되는경우 colors:['#aaaaaa','#a4bbff','#1AC47A','#961AC4','#3F916D','#07F707','#F846F8'] }; var chart = new google.visualization.LineChart(document.getElementById('line_top_x')); chart.draw(data, options); $(window).on('resize', function() { chart.draw(data, options); }); } </script> <form name="form" method="get" action="<?=$_SERVER[PHP_SELF]?>" onsubmit="return SEARCH()" style="height:100%;"> <input type="hidden" name="p" value="<?=$p?>"><?//페이지?> <input type="hidden" name="cn" value="<?=$cn?>"><?//페이지번호?> <input type="hidden" name="t" value="<?=$t?>"><?//타입?> <input type="hidden" name="v" value="<?=$v?>"><?//보여지는방법?> <input type="hidden" name="r" value="<?=$r?>"><?//리사이즈?> <input type="hidden" name="m" value="<?=$m?>"><?//모달?> <input type="hidden" name="h" value="<?=$h?>"><?//헤더?> <input type="hidden" name="s" value="<?=$s?>"><?//검색?> <input type="hidden" name="l" value="<?=$l?>"><?//리스트?> <input type="hidden" name="rp" value="<?=$rp?>"><?//리턴받는페이지?> <input type="hidden" name="freload" value="<?=$freload?>"><?//리로드하는 여부?> <input type="hidden" name="pageNum" value="<?=$pageNum?>"><?//페이지넘?> <input type="hidden" name="focus_no" value="<?=$focus_no?>"> <input type="hidden" name="key_code" value="<?=$key_code?>"> <input type="hidden" name="skey_code" value="<?=$skey_code?>"> <input type="hidden" name="p_code" value="<?=$p_code?>"> <input type="hidden" name="search_code" value="<?=$search_code?>"> <?if($s!="n"){?> <div class="searcharea" style="height:100px;"> <table cellpadding=3 cellspacing=1 width=100%> <tr> <td> <div style="margin-bottom:5px;"> <input type="button" value="1개월전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*31))==1)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-1 month"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="3개월전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*31))==3)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-3 month"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="6개월전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*31))==6)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-6 month"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="1년전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*31))==12)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-1 year"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="2년전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*366))==2)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-2 year"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="5년전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*366))==5)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-5 year"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="10년전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*366))==10)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-10 year"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> <input type="button" value="20년전" class="css_button<?if(ceil((strtotime($search2)-strtotime($search1))/(24*60*60*366))==20)echo"_red";?>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-20 year"))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 day"))?>'; SEARCH(); "> </div> <div> <input type="button" class="css_button" value="<<" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-1 year",strtotime($search1)))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 year",strtotime($search2)))?>'; SEARCH(); "> <input type="button" class="css_button" value="<" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("-1 month",strtotime($search1)))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("-1 month",strtotime($search2)))?>'; SEARCH(); " > <input type="date" name="search1" value="<?=$search1?>" style="width:110px;" autocomplete=off onblur="SEARCH();">부터 ~ <input type="date" name="search2" value="<?=$search2?>" style="width:110px;" autocomplete=off onblur="SEARCH();">까지 <input type="button" class="css_button" value=">" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("+1 month",strtotime($search1)))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("+1 month",strtotime($search2)))?>'; SEARCH(); " > <input type="button" class="css_button" value=">>" onclick=" document.form.search1.value='<?=date("Y-m-d",strtotime("+1 year",strtotime($search1)))?>'; document.form.search2.value='<?=date("Y-m-d",strtotime("+1 year",strtotime($search2)))?>'; SEARCH(); " > <?if($is_range=="y"){?> <span style="color:#ff6600">※검색범위가 넘어가 재정의 하였습니다</span> <?}?> </div> </td> </tr> <tr height=50> <td> <label for="search3"><input type="checkbox" name="search3" id="search3" value="y" <?if($search3=="y")echo "checked";?> onclick="SEARCH();">200일평균선</label> </td> </tr> </table> </div> <?}?> <div id="div_line" style="overflow:hidden;position:relative;top:0px;left:0px;height:calc(100% - 110px);-webkit-calc(100% - 110px);"> <!-- 차트가 들어가는 부분 --> <div id="line_top_x" style="display:inline-block;margin-bottom:5px;width:100%;height:100%;"></div> </div> <div style="clear:both;height:5px;"></div> </form>