Create a Line Chart with Google Charts

Use a line chart to display changes over time. This browser example uses a month column and a numeric sales column. For live database records, follow the line chart with MySQL tutorial.

Line chart with sample monthly data

The first column contains month labels. The second column must contain numeric values. The chart below shows the original 12-month sample.

Copyable starter example

The full HTML below includes the required Google Charts loader, the chart container and the callback. Replace the sample rows with your own numeric values.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width:100%;min-height:380px"></div>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['Month', 'Sales'],
    ['Jan', 300], ['Feb', 200], ['Mar', 350]
  ]);
  const options = {title: 'Sales trend', curveType: 'function',
    legend: {position: 'bottom'}};
  const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

The curveType: 'function' option draws a smoothed line; remove it for straight segments. A callback ensures the library is available before creating the chart.

Build rows from a JavaScript array

The interactive chart above preserves the 12-month example. For many rows, a DataTable can be populated in a loop:

const monthlySales = [
  ['Jan', 300], ['Feb', 200], ['Mar', 300], ['Apr', 400],
  ['May', 300], ['Jun', 200], ['Jul', 200], ['Aug', 300],
  ['Sep', 300], ['Oct', 400], ['Nov', 250], ['Dec', 350]
];
const data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
monthlySales.forEach(row => data.addRow(row));

If your data comes from a PHP database query, validate the values and use json_encode() to pass a typed array to JavaScript. For a complete PHP/MySQL example, continue to line chart using MySQL records.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: