How to prevent legend from getting cutoff GOOGLE CHARTS
2
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Here is the chart I have. It is a material line chart (package: google.charts.Line not google.visualization.LineChart). As you see "SPPlus" is cutoff. I have tried to adjust the height of the chart but that has not solved my issue. 
javascript charts google-visualization
asked Nov 12 '18 at 17:18
Saad Khan
479
add a comment |
2
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Here is the chart I have. It is a material line chart (package: google.charts.Line not google.visualization.LineChart). As you see "SPPlus" is cutoff. I have tried to adjust the height of the chart but that has not solved my issue.
javascript charts google-visualization
asked Nov 12 '18 at 17:18
Saad Khan
479
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45
add a comment |
2
2
2
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Here is the chart I have. It is a material line chart (package: google.charts.Line not google.visualization.LineChart). As you see "SPPlus" is cutoff. I have tried to adjust the height of the chart but that has not solved my issue.
javascript charts google-visualization
asked Nov 12 '18 at 17:18
Saad Khan
479
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Here is the chart I have. It is a material line chart (package: google.charts.Line not google.visualization.LineChart). As you see "SPPlus" is cutoff. I have tried to adjust the height of the chart but that has not solved my issue.
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: "Example"
;
var line=document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data,google.charts.Line.convertOptions(options));
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
javascript charts google-visualization
javascript charts google-visualization
asked Nov 12 '18 at 17:18
Saad Khan
479
asked Nov 12 '18 at 17:18
Saad Khan
479
edited Nov 13 '18 at 15:08
asked Nov 12 '18 at 17:18
Saad Khan
479
asked Nov 12 '18 at 17:18
Saad Khan
479
asked Nov 12 '18 at 17:18
Saad Khan
479
479
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45
add a comment |
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45
add a comment |
2 Answers
2
active
oldest
votes
2
you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.
in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title.
var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);
instead, they should be added to the draw method.
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
you could also decrease the font size.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
add a comment |
0
I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.
I think you have mess up with the configuration itself.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JS
google.charts.load('current', packages: ['corechart', 'line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input)
return input.reduce(function(o,i)
o.push(i.concat(i).concat(i).concat(i).concat(i));
return o;
,);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addColumn('number', 'h');
data.addColumn('number', 'i');
data.addColumn('number', 'j');
data.addColumn('number', 'j');
data.addColumn('number', 'k');
data.addColumn('number', 'l');
data.addColumn('number', 'm');
data.addRows(parseData([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]));
var options =
height: 500,
hAxis:
title: 'Time'
,
vAxis:
title: 'Popularity'
,
series:
1: curveType: 'function'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267076%2fhow-to-prevent-legend-from-getting-cutoff-google-charts%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.
in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title.
var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);
instead, they should be added to the draw method.
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
you could also decrease the font size.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
add a comment |
2
you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.
in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title.
var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);
instead, they should be added to the draw method.
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
you could also decrease the font size.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
add a comment |
2
2
2
you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.
in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title.
var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);
instead, they should be added to the draw method.
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
you could also decrease the font size.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
you can increase the height of the chart.
the reason this may not have worked in the provided snippet,
the options were being used in the wrong place.
in the snippet, the options are added to the chart's constructor.
as such, none of the provided options are being used, including the title.
var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);
instead, they should be added to the draw method.
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
you could also decrease the font size.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>another option would be to draw your own custom legend,
on top of the chart, this would allow for more room,
without increasing the height.
see following working snippet...
google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
height: 400,
legend:
textStyle:
fontSize: 10
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>google.charts.load('current', 'packages': ['line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'values');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);
var options =
chart:
title: 'Example'
,
legend:
position: 'none'
;
var line = document.getElementById('chart_div');
var chart = new google.charts.Line(line);
// add legend marker
function addLegendMarker(markerProps)
var legendMarker = document.getElementById('template-legend-marker').innerHTML;
for (var handle in markerProps)
if (markerProps.hasOwnProperty(handle))
legendMarker = legendMarker.replace('' + handle + '', markerProps[handle]);
document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
// chart ready event
google.visualization.events.addListener(chart, 'ready', function ()
var legend = document.getElementById('legend_div');
// get colors from chart
var colorPallette = ;
var lines = line.getElementsByTagName('path');
Array.prototype.forEach.call(lines, function(path)
if (colorPallette.indexOf(path.getAttribute('stroke')) === -1)
colorPallette.push(path.getAttribute('stroke'));
);
// clear previous legend
legend.innerHTML = '';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < data.getNumberOfColumns(); i++)
var markerProps = ;
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = data.getColumnLabel(i);
addLegendMarker(markerProps);
// add "hover" event to each legend marker
var currentSelection;
var markers = legend.getElementsByTagName('DIV');
Array.prototype.forEach.call(markers, function(marker)
marker.addEventListener('mouseover', function (e) , false);
marker.addEventListener('mouseout', function (e)
chart.setSelection();
, false);
);
);
chart.draw(data, google.charts.Line.convertOptions(options));
#legend_div
color: #999;
font-family: Roboto;
position: absolute;
right: 0px;
text-align: right;
top: 0px;
width: 60%;
z-index: 1000;
.legend-marker
display: inline-block;
padding: 6px 6px 6px 6px;
.legend-marker-color
border-radius: 25%;
display: inline-block;
height: 12px;
width: 12px;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="legend_div"></div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="index">
<div class="legend-marker-color" style="background-color: color"></div>
<span>label</span>
</div>
</script>answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
answered Nov 13 '18 at 13:10
WhiteHat
35.7k61476
35.7k61476
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
add a comment |
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
Thank you for your well written response. The font-size and height is the option that works best for me. Much appreciated
– Saad Khan
Nov 13 '18 at 15:14
add a comment |
0
I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.
I think you have mess up with the configuration itself.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JS
google.charts.load('current', packages: ['corechart', 'line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input)
return input.reduce(function(o,i)
o.push(i.concat(i).concat(i).concat(i).concat(i));
return o;
,);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addColumn('number', 'h');
data.addColumn('number', 'i');
data.addColumn('number', 'j');
data.addColumn('number', 'j');
data.addColumn('number', 'k');
data.addColumn('number', 'l');
data.addColumn('number', 'm');
data.addRows(parseData([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]));
var options =
height: 500,
hAxis:
title: 'Time'
,
vAxis:
title: 'Popularity'
,
series:
1: curveType: 'function'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
add a comment |
0
I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.
I think you have mess up with the configuration itself.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JS
google.charts.load('current', packages: ['corechart', 'line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input)
return input.reduce(function(o,i)
o.push(i.concat(i).concat(i).concat(i).concat(i));
return o;
,);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addColumn('number', 'h');
data.addColumn('number', 'i');
data.addColumn('number', 'j');
data.addColumn('number', 'j');
data.addColumn('number', 'k');
data.addColumn('number', 'l');
data.addColumn('number', 'm');
data.addRows(parseData([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]));
var options =
height: 500,
hAxis:
title: 'Time'
,
vAxis:
title: 'Popularity'
,
series:
1: curveType: 'function'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
add a comment |
0
0
0
I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.
I think you have mess up with the configuration itself.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JS
google.charts.load('current', packages: ['corechart', 'line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input)
return input.reduce(function(o,i)
o.push(i.concat(i).concat(i).concat(i).concat(i));
return o;
,);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addColumn('number', 'h');
data.addColumn('number', 'i');
data.addColumn('number', 'j');
data.addColumn('number', 'j');
data.addColumn('number', 'k');
data.addColumn('number', 'l');
data.addColumn('number', 'm');
data.addRows(parseData([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]));
var options =
height: 500,
hAxis:
title: 'Time'
,
vAxis:
title: 'Popularity'
,
series:
1: curveType: 'function'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
I have created an charts with 12 columns and it's not breaking and instead it shown an toggle button to move to next columns.
I think you have mess up with the configuration itself.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JS
google.charts.load('current', packages: ['corechart', 'line']);
google.charts.setOnLoadCallback(drawCurveTypes);
function parseData(input)
return input.reduce(function(o,i)
o.push(i.concat(i).concat(i).concat(i).concat(i));
return o;
,);
function drawCurveTypes()
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'a');
data.addColumn('number', 'b');
data.addColumn('number', 'c');
data.addColumn('number', 'd');
data.addColumn('number', 'e');
data.addColumn('number', 'f');
data.addColumn('number', 'g');
data.addColumn('number', 'h');
data.addColumn('number', 'i');
data.addColumn('number', 'j');
data.addColumn('number', 'j');
data.addColumn('number', 'k');
data.addColumn('number', 'l');
data.addColumn('number', 'm');
data.addRows(parseData([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]));
var options =
height: 500,
hAxis:
title: 'Time'
,
vAxis:
title: 'Popularity'
,
series:
1: curveType: 'function'
;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
JSFiddle demo - https://jsfiddle.net/z0wudpxv/1/
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
answered Nov 12 '18 at 18:14
front_end_dev
1,3351511
1,3351511
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
add a comment |
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
Thanks for the fiddle, however, the package I am using is google.charts.Line() not google.visualization.LineChart
– Saad Khan
Nov 12 '18 at 18:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267076%2fhow-to-prevent-legend-from-getting-cutoff-google-charts%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you share a jsFiddle link with working demo
– front_end_dev
Nov 12 '18 at 17:29
@front_end_dev I have attached the code snippet as you can see the value g is not present in the legend
– Saad Khan
Nov 12 '18 at 20:45