Stay organized with collectionsSave and categorize content based on your preferences.
Important:The Image Charts portion of Google Chart Tools has beenofficially deprecatedas of April 20, 2012. It will continue to work as per ourdeprecation policy.
The first column should be a string, and contain the category label.
Any number of columns can follow, all must be numeric.
Each column is displayed as a separate line.
Use this to assign specific colors to each data series. Colors are specified
in theChart API color format.
Color i is used for data column i, wrapping around to the beginning
if there are more data columns than colors. If variations of a single
color is acceptable for all series, use thecoloroption
instead.
enableEvents
boolean
false
Causes charts to throw user-triggered events such as click or mouse over.
Supported only for specific chart types. SeeEventsbelow.
height
number
Container's height
Height of the chart in pixels.
legend
string
'right'
Position and type of legend. Can be one of the following:
'right' - To the right of the chart.
'left' - To the left of the chart.
'top' - Above the chart.
'bottom' - Below the chart.
'none' - No legend is displayed.
max
number
automatic
The maximal value to show in the Y axis.
min
number
automatic
The minimal value to show in the Y axis.
showAxisLines
boolean
true
If set to false, removes axis lines and labels.
showCategoryLabels
boolean
same as showAxisLines
If set to false, removes the labels of the categories (the X axis labels).
showValueLabels
boolean
same as showAxisLines
If set to false, removes the labels of the values (the Y axis labels).
title
string
no title
Text to display above the chart.
valueLabelsInterval
number
Auto
The interval at which to show value axis labels. For example, ifminis 0,maxis 100, andvalueLabelsIntervalis 20, the chart will show axis labels at (0, 20, 40, 60, 80 100).
width
number
Container's width
Width of the chart in pixels.
Methods
Method
Return Type
Description
draw(data, options)
none
Draws the chart.
Events
You can register to hear the events described on theGeneric
Image Chartpage.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-10 UTC."],[],[],null,["# Visualization: Line Chart (Image)\n\n**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](/chart/terms). \n1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Loading](#Loading)\n4. [Data Format](#Data_Format)\n5. [Configuration Options](#Configuration_Options)\n6. [Methods](#Methods)\n7. [Events](#Events)\n8. [Data Policy](#Data_Policy)\n\nOverview\n--------\n\n\nA line chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/line_charts).\n\nExample\n-------\n\n\\\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\\\u003e\\\u003c/script\\\u003e \\\u003cscript type=\"text/javascript\"\\\u003e google.charts.load('current', {'packages':\\['imagelinechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e google.charts.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 chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"imagelinechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n var data = google.visualization.arrayToDataTable([\n ['Year', 'Sales', 'Expenses'],\n ['2004', 1000, 400],\n ['2005', 1170, 460],\n ['2006', 660, 1120],\n ['2007', 1030, 540]\n ]);\n\n var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div'));\n\n chart.draw(data, {width: 400, height: 240, min: 0});\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoading\n-------\n\n\nThe `google.charts.load` package name is `\"imagelinechart\"`. \n\n```gdscript\n google.charts.load('current', {packages: ['imagelinechart']});\n```\n\n\nThe visualization's class name is `google.visualization.ImageLineChart`. \n\n```gdscript\n var visualization = new google.visualization.ImageLineChart(container);\n```\n\nData Format\n-----------\n\n\nThe first column should be a string, and contain the category label.\nAny number of columns can follow, all must be numeric.\nEach column is displayed as a separate line.\n\nConfiguration Options\n---------------------\n\n| Name | Type | Default | Description |\n|---------------------|-----------------|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). |\n| colors | Array\\\u003cstring\\\u003e | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). Color i is used for data column i, wrapping around to the beginning if there are more data columns than colors. If variations of a single color is acceptable for all series, use the `color` option instead. |\n| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See [Events](#Events) below. |\n| height | number | Container's height | Height of the chart in pixels. |\n| legend | string | 'right' | Position and type of legend. Can be one of the following: - 'right' - To the right of the chart. - 'left' - To the left of the chart. - 'top' - Above the chart. - 'bottom' - Below the chart. - 'none' - No legend is displayed. |\n| max | number | automatic | The maximal value to show in the Y axis. |\n| min | number | automatic | The minimal value to show in the Y axis. |\n| showAxisLines | boolean | true | If set to false, removes axis lines and labels. |\n| showCategoryLabels | boolean | same as showAxisLines | If set to false, removes the labels of the categories (the X axis labels). |\n| showValueLabels | boolean | same as showAxisLines | If set to false, removes the labels of the values (the Y axis labels). |\n| title | string | no title | Text to display above the chart. |\n| valueLabelsInterval | number | Auto | The interval at which to show value axis labels. For example, if `min` is 0, `max` is 100, and `valueLabelsInterval` is 20, the chart will show axis labels at (0, 20, 40, 60, 80 100). |\n| width | number | Container's width | Width of the chart in pixels. |\n\nMethods\n-------\n\n| Method | Return Type | Description |\n|-----------------------|-------------|------------------|\n| `draw(data, options)` | none | Draws the chart. |\n\nEvents\n------\n\nYou can register to hear the events described on the [Generic\nImage Chart](/chart/interactive/docs/gallery/genericimagechart#Events) page.\n\nData Policy\n-----------\n\n\nPlease refer to the [Chart API logging policy](/chart/interactive/faq#logging)."]]
