프리이미지
사이트 내 전체검색

Google Charts - Line Chart

페이지 정보

작성일14-07-16 04:49

본문

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
게시물 검색