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>
Related
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>
I try to custom vertical axis max and min value in google chart but nothing change.
I follow references from https://developers.google.com/chart/interactive/docs/gallery/combochart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', '実績（件数）');
data.addColumn('number', '体調');
data.addRows([['03/19',2,5],['03/20',3,4],['03/21',3,3]]);
var materialOptions = {
seriesType: 'bars',
interpolateNulls: true,
series: {
0: {axis: '実績（件数）'},
1: {axis: '体調', targetAxisIndex:1, type:'line'}
},
height: 400,
vAxis: {
0: {
minValue: 0,
maxValue: 5.5
},
1: {
minValue: 1,
maxValue: 6
}
}
};
var materialChart = new google.visualization.ComboChart(chartDiv);
materialChart.draw(data, materialOptions);
I add isStacked: true like bellow
vAxis: { minValue: 0, maxValue: 5.5 }
isStacked: true,
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>
My problem is that, when i var_dump my array inside a separate file, the values are all correct, but when I require this file into another, in which i try using javascript with the rows i make, it returns me other values, and even erases parts of my array. Does someone know something about it?
Here's the code i'm using to generate the chart in the separate file:
var_dump($jsRows_scatter);
?>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter; ?>];
data.addRows(foo)
var fool =[ <?php echo $jsRows_scatter1; ?>];
data.addRows(fool);
var fool1 =[ <?php echo $jsRows_1; ?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
</script>
<body>
<div id='chart_div' style="width:950px; height:300px;"></div>
</body>
and the var_dump($jsRows_scatter) returns me: string(243) "[1.0199998,null,null,null,null,0.00589003],[0.6599999,null,null,null,null,0.00589003],[4.6799991,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.77272727],[0.1200000,null,null,null,null,0.77272727]"(which is ok).
So i use require_once() to call this array into a javascript google charts function whose code is:
function analise_desequilibrio(medicao, analise){
var nome_analise='';
switch(analise){
case "unipede":
nome_analise="Similaridade entre dias";
document.getElementById("analises").innerHTML='<div id = "chart_div_carac_iec" style="width: 950px; text-align: center;"> </div>';
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter;?>];
data.addRows(foo)
var fool =[<?php echo $jsRows_scatter1;?>];
data.addRows(fool);
var fool1 =[<?php echo $jsRows_1;?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_carac_iec'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
break;
But, even before i reach the function with the steps on javascript, just as i use require_once() on this array file, my var_dump results: string(74) "[3,null,null,null,null,2],[1,null,null,null,null,],[,null,null,null,null,]" Which means lots of data were deleted somehow. Does someone know how to fix it? Thanks in advance!
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();
//...
}