I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)
there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>
Related
I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/
you can add custom ticks to ensure each column "sits" on the correct date.
the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.
var xTicks = data.getDistinctValues(0);
hAxis: {
slantedText: false,
format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks
ticks: xTicks
},
see following working snippet...
function doTest() {
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var xTicks = data.getDistinctValues(0);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
ticks: xTicks
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', doTest);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts</h1>
<div id="chart_div"></div>
I am new to Google Line Chart. The chart which I try to draw is drawn properly but I want to animate it. I tried using animation section in code but seems it does not work at all on single line chart.
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Test');
data.addColumn('number', 'Test 2');
data.addRows([
[1, 37.8],
[2, 30.9],
[3, 25.4],
[4, 11.7]
]);
var options = {
animation: {
duration: 1000,
startup: true, //This is the new option
easing: 'out',
},
aggregationTarget: 'category',
chart: {
title: 'Test 1',
subtitle: 'Test 2'
},
width: '98%',
height: 300,
axes: {
x: {
0: {
side: 'top'
}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
animation isn't supported on Material charts
in fact, there are several options Material charts do not support
see --> Tracking Issue for Material Chart Feature Parity #2143
Material charts --> google.charts.Line -- packages: ['line']
Core charts --> google.visualization.LineChart -- packages: ['corechart']
using a Core chart with the following option will display similar to Material
theme: 'material'
I am trying to display Google line chart with some values. My minimum value is 0 and my maximum value is 100. My graph has 2 lines, not only a single line.
I use curveType: 'function' for the graph options, and for some reason in the chart - the minimum is being set to -100 and the maximum value is being set to +200. Please run the script and look at the number to the left of the graph - these are the values I'm asking about and wishes to control them.
What am I doing wrong?
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="LineChart"></div>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
minValue:0,
maxValue:100
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
google.visualization.events.addListener(chart7, 'ready', afterDraw);
}
</script>
</html>
not sure why minValue and maxValue do not work.
however, you can use viewWindow instead...
viewWindow: {
min:0,
max:100
}
see following working snippet...
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
viewWindow: {
min:0,
max:100
}
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></div>
Since yesterday i try to draw chart with google charts. I have one problem. I tried to put strings on Y-axis, and script doesn't display anything.
I tried to do this with code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'document');
data.addColumn('string', 'term');
data.addRows([
[1 , 'word1'] , [3 , 'word2']
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
</script>
That gives me a result: http://darium.linuxpl.eu/chart/
The goal: I wanna draw sometnig like this-
https://www.imageupload.co.uk/images/2015/08/25/asd.png
Is there any way to draw what I want?
Data column(s) for axis #0 cannot be of type string
So you need to change the axis,
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'term');
data.addColumn('number', 'document');
data.addRows([
['word1', 1] , ['word2', 3]
]);
var options = {
width: 900,
height: 500,
chart: {
title: 'weight of terms'
},
axes: {
x: {
0: {side: 'bottom'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="scatter_top_x"></div>
Consider the following code:
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');
data.addRow([Date.parse("2013-08-17 10:12:18"), 0]);
data.addRow([Date.parse("2013-08-17 09:13:42"), 14]);
data.addRow([Date.parse("2013-08-17 10:00:05"), 15]);
data.addRow([Date.parse("2013-08-17 11:12:18"), 3]);
var options = {
title: 'Company Performance',
fontSize: '12px',
curveType: 'function',
pointSize: 5,
hAxis: {
title: 'Daily Report',
titleTextStyle: {
color: '#FF0000'
}
},
vAxis: {
title: 'Leads',
titleTextStyle: {
color: '#FF0000'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Now, the above code is suppsed to load google chart api, defined a DataTable & generate a LineChart graph but it doesn't. Instead, I the following error when trying to add Columns
TypeError: data is undefined #at this line --> data.addColumn('datetime', 'Time')
Can anyone tell me what am I missing?
you did not use new while creating a new object of google.visualization.Datatable.
function drawChart() {
// var data = google.visualization.DataTable(); missed new keyword
var data = new google.visualization.DataTable();
//...
}