Google Charts - Line Chart > 개발정보

본문 바로가기

검색취소

Google Charts - Line Chart

검색 이전 다음 목록

본문

Visualization: Line Chart

Overview

A line chart that is rendered within the browser using SVG or VML. Displays tips when hovering over points.

Example

Code it yourself on the Visualization Playground

<html>
 
<head>
   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
<script type="text/javascript">
      google
.load("visualization", "1", {packages:["corechart"]});
      google
.setOnLoadCallback(drawChart);
     
function drawChart() {
       
var data = google.visualization.arrayToDataTable([
         
['Year', 'Sales', 'Expenses'],
         
['2004',  1000,      400],
         
['2005',  1170,      460],
         
['2006',  660,       1120],
         
['2007',  1030,      540]
       
]);

       
var options = {
          title
: 'Company Performance'
       
};

       
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart
.draw(data, options);
     
}
   
</script>
 
</head>
 
<body>
   
<div id="chart_div" style="width: 900px; height: 500px;"></div>
 
</body>
</html>

Curving the Lines

You can smooth the lines by setting the curveType option to function:

The code to generate this chart is the same as the one above, except that the options now look like so:

  var options = {
    title: 'Company Performance',
    curveType: 'function',    legend: { position: 'bottom' }
  };

Loading

The google.load package name is "corechart".

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

The visualization's class name is google.visualization.LineChart.

  var visualization = new google.visualization.LineChart(container);

Data Format

Rows: Each row in the table represents a set of data points with the same x-axis location.

Columns:

  Column 0 Column 1 ... Column N
Purpose: Line 1 values ... Line N values
Data Type: number ... number
Role: domain data ... data
Optional column roles:
추천 0

등록된 댓글이 없습니다.

검색취소

개발정보

검색
  • 생전 처음 해보는 iOS8 앱 24시간 안에 개발하기
  • 생전 처음 해보는 iOS8 앱 24시간 안에 개발하기

    2014년 11월 29일 토요일생전 처음 해보는 iOS8 앱 24시간 안에 개발하기 - 8시간이 포스트는 iOS의 어플리케이션 프레임워크와 랭기지를 전혀 모르는 상태에서 24시간안에 IoT앱을 만드는 과정 중 8시간…

  • no image
  • K-WAH 4.0

    다운로드 접속자가 폭주하여 다운로드가 중간에 끊길 수 있습니다.파일의 정상 용량은 60.2MB이며 정상적으로 다운되지 않았을 경우 다시 다운로드 하시기 바랍니다.K-WAH4.0을 설치하시기 전에 아래 기본요구사양의 …

  • 2014년 최고의 HTML5 애니메이션 제작 프로그램
  • 2014년 최고의 HTML5 애니메이션 제작 프로그램

    첨부파일

     2014년 최고의 HTML5 애니메이션 제작 프로그램   HTML5 등장 이전에는 웹에서 구현되는 애니메이션의 대부분은 플래시로 제작되었습니다. 플래시는 개발자가 아닌 디자이너도 애니메이션을 제작할수 있도록 강력하…

  • Ubuntu와 Mint  중에  데스크탑엔 Mint 추천
  • Ubuntu와 Mint 중에 데스크탑엔 Mint 추천

    첨부파일

    프로그래머는 아니지만,Linux를 사용해 보려고 노력하는 사람입니다. Linux 는 쓸수록 편리하면서,안정적이고,빠르네요 사양이 낮은 컴퓨터를 빠른 컴퓨터로 업그레이드 시켜주는 군요 올해 4월이니까.몇달 됬네요 처음…

  • 2013년 4월 리눅스 배포판 순위
  • 2013년 4월 리눅스 배포판 순위

    2013년 4월 리눅스 배포판 순위 리눅스 배포판의 실사용 순위는 아니지만 DistoWatch에서 제공하는 Page Hit Ranking입니다. Mint는 최근 12개월 동안뿐만 아니라 그 이전부터  1위를 고수하고…

  • no image
  • 블로그 소스 무엇이 좋을까?

    블로그 소스 무엇이 좋을까?   Tattertools을 쓰기전에 pMachine를 섰었다. 한 2달 정도. Tattertools도 많은 제약이 있지만.. 제일 문제가 되는건. 글쓸때 html을 그대로 보여주기 힘…

?>