Related
Have a look at https://jsfiddle.net/DavidHyde/fkuonb5s/. This is based on an example from the Google Charts documentation along with the code that I'm running. I didn't write the code and am not a Charts expert by any means, so don't understand all the code yet.
Anyway, I'm having trouble combining the style, interval and certainty roles. It seems that I can apply any one, but when I have two or more, only the first is applied.
Specifying "certainty" gives this:
Applying "style" gives this:
and this is just "interval"
What I really want to do is apply the certainty role for the hatching, and the interval role for the horizontal bar.
Can anyone help? Thanks
StackOverflow says that any jsfiddle.net must be accompanied by code, so here it is...
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
['April', 1000, true, 'stroke-color: #703593; stroke-width: 4', 900, 1100, 'A', 'Stolen data'],
['May', 1170, true, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF', 1000, 1200, 'B', 'Coffee spill'],
['June', 660, true, 'fill-color: red; fill-opacity:.3', 550, 800, 'C', 'Wumpus attack'],
['July', 1030, false, null, 100, 300, null, null]
]);
var barOptions = new google.visualization.ComboChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
var barSetting = {
seriesType: "bars",
areaOpacity: 0.1,
orientation: 'horizontal',
series: { 2: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}
Here is the updated jsfiddle from #dlaliberte showing the chart working - https://jsfiddle.net/dlaliberte/cvu3t7se/6/.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
[
'April'
, 1000
, true
, 'stroke-color: #703593; stroke-width: 4'
, 900
, 1100
, 'A'
, 'Stolen data'
],
[
'May'
, 1170
, true
, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF'
, 1000
, 1200
, 'B'
, 'Coffee spill'
],
[
'June'
, 660
, true
, 'fill-color: red; fill-opacity:.3'
, 550
, 800
, 'C'
, 'Wumpus attack'
],
[
'July'
, 1030
, false
, null
, 100
, 300
, null
, null
]
]);
var barOptions = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, 7]);
var barSetting = {
// seriesType: "bars",
//intervals: { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' },
areaOpacity: 0.1,
orientation: 'horizontal',
xseries: { 0: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}
The below code to generate google line chart works fine with 2 values (Date and Mean) assigned. When I added more data (including Mode and Variance as shown below), it just shows the original datas (Date and Mean). The other data are not displayed. What am I doing wrong here? please. I am still learning google charts. Any help would be appreciated greatly. thanks.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
Whitehat's suggestion:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Mode');
data.addColumn('number', 'Variance');
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
after correcting the echo statement, just need to add column to the view...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3]);
or if you want all to have annotations...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
Does anyone know if it is even possible to add annotation on a chart created with the function google.charts.Bar?
The reason I am using google.charts.Bar instead of google.visualization.ColumnChart is that I need to have multiple stacked columns for each period.
google.load("visualization", "1", {
packages: ["corechart", "bar", "table"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'AHMA PS');
data.addColumn('number', 'Others PS');
data.addColumn('number', 'AHMA AB');
data.addColumn('number', 'Others AB');
data.addColumn('number', 'AHMA CC');
data.addColumn('number', 'Others CC');
data.addRows([
['Apr', 30, 50, 10, 60, 2, 40],
['Mar', 30, 2, 10, 60, 2, 40],
['Feb', 30, 50, 10, 60, 2, 40],
['Jan', 30, 50, 10, 60, 2, 40]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
},
4, {
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
},
5, {
calc: "stringify",
sourceColumn: 5,
type: "string",
role: "annotation"
},
6, {
calc: "stringify",
sourceColumn: 6,
type: "string",
role: "annotation"
}
]);
var options = {
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
}
},
vAxis: {
viewWindow: {
min: 0,
max: 100
}
}
};
var chart = new google.charts.Bar(document.getElementById('google-chart'));
chart.draw(view, google.charts.Bar.convertOptions(options));
}
<script src="https://www.google.com/jsapi"></script>
<div id="google-chart"></div>
answer:
<script type="text/javascript">
$(document).ready(function () {
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
});
function drawChart() {
alert('ok');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'AHMA PS');
data.addColumn('number', 'Others PS');
data.addColumn('number', 'AHMA AB');
data.addColumn('number', 'Others AB');
data.addColumn('number', 'AHMA CC');
data.addColumn('number', 'Others CC');
data.addRows([
['Apr', 30, 50, 10, 60, 2, 40],
['Mar', 30, 2, 10, 60, 2, 40],
['Feb', 30, 50, 10, 60, 2, 40],
['Jan', 30, 50, 10, 60, 2, 40]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
},
4, {
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
},
5, {
calc: "stringify",
sourceColumn: 5,
type: "string",
role: "annotation"
},
6, {
calc: "stringify",
sourceColumn: 6,
type: "string",
role: "annotation"
}
]);
var options = {
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
}
},
vAxis: {
viewWindow: {
min: 0,
max: 100
}
}
};
var chart = new google.charts.Bar(document.getElementById('google-chart'));
chart.draw(view, google.charts.Bar.convertOptions(options));
}
</script>
I would like to not show the x axis value in tooltip for line chart using google visualization api. Does anyone know how to do that? I would like series 1 and 2 in the code below to have a tooltip that shows only the vertical axis value (Test)
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date Logged');
data.addColumn('number', 'Test');
data.addColumn('string', 'State');
data.addColumn('number', null);
data.addColumn('number', null);
for (var i = 0; i < dataValues.length; i++) {
data.addRow(//getting this from db);
}
var monthformatter = new google.visualization.DateFormat({pattern: "MMM d, y"});
monthformatter.format(data, 0);
// Define a category picker control
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'State',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'caption' : 'All'
}
}
});
chart = new google.visualization.ChartWrapper({
'chartType': 'ScatterChart',
'containerId': 'chart1',
'options': {
'title': 'Test',
'width': 500,
'height': 500,
'legend': 'none',
'pointSize': 5,
'vAxis': { 'title': 'Test', 'titleTextStyle': { 'color': 'red'}},
'hAxis': { 'format': 'MMM d, y', 'title': 'Date', 'titleTextStyle': { 'color': 'red'} },
'interpolateNulls': true,
'pieSliceText': 'label',
'series': {
'0': { 'color': 'blue' },
'1': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false' },
'2': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false'},
}
},
'view': {'columns': [0, 1, 3, 4]}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker2], [chart]).
// Draw the entire dashboard.
draw(data);
You can either set the formatted values of those columns to the value in "Test", or you can add custom tooltip columns to your view.
Set the formatted value of columns 3 and 4 to the value of column 1
view: {
columns: [0, 1, {
sourceColumn: 3,
calc: function (dt, row) {
return {v: dt.getValue(row, 3), f: dt.getFormattedValue(row, 1)};
}
}, {
sourceColumn: 4,
calc: function (dt, row) {
return {v: dt.getValue(row, 4), f: dt.getFormattedValue(row, 1)};
}
}]
}
Create custom tooltip columns:
view: {
columns: [0, 1, 3, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// return to whatever text you want in the tooltip
return dt.getFormattedValue(row, 1);
}
}, 4, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// return to whatever text you want in the tooltip
return dt.getFormattedValue(row, 1);
}
}]
}
I'm using google visualization
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'time');
data2.addColumn('number', 'amount');
data2.addColumn({ type: 'string', role: 'tooltip' });
data2.addRows(rows_data);
var options2 = {
vAxis: { textPosition: 'none', title: '', textStyle: { fontName: 'arial'} },
hAxis: { slantedText: false, textStyle: { color: '#E6EFFA' }, gridlines: { color: '#E6EFFA', count: 20} },
backgroundColor: '#E6EFFA',
legend: 'none',
chartArea: { top: 0 },
colors: ['#435988'],
chartArea: { width: 800 }
};
chart2 = new google.visualization.LineChart(document.getElementById('chart_div_volume'));
I want the vAxis position to be on the right.
is it possible ?
Short Answer: Yes, but it's tricky.
Long Answer:
You need to set up a multi-axis chart. Basically, you create a dummy axis with no labels or anything to make it look like an axis. Then you configure a secondary axis. You create one set of dummy values (hidden) to put on the first axis, and plot your real data on the second.
Here is an example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Dummy', 'Sales', 'Expenses'],
['2004', 0, 1000, 400],
['2005', null, 1170, 460],
['2006', null, 660, 1120],
['2007', null, 1030, 540]
]);
var options = {
title: 'Company Performance',
series: { 0: {targetAxisIndex: 0, visibleInLegend: false, pointSize: 0, lineWidth: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 1}
},
vAxes: {
0: {textPosition: 'none'},
1: {},
}
};
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, options);
}
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Productivity');
data.addColumn('number', 'Composite');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Average(N=5)');
var compositeDataArry = [];
compositeDataArry.push(["Ravi", 11, 11, 5]);
compositeDataArry.push(["Wasif", 5, 5, 5]);
compositeDataArry.push(["Vipin", 2, 2, 5]);
compositeDataArry.push(["Ankur", 3, 3, 5]);
compositeDataArry.push(["Pankaj", 1, 1, 5]);
compositeDataArry.push(["Dheeraj", 4, 4, 5]);
data.addRows(compositeDataArry);
var options = {
title: 'My Chart',
titleTextStyle: { color: '#264158', fontSize: 24 },
seriesType: 'bars',
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000',
fontSize: 15
}
},
hAxis: {
slantedText: true,
slantedTextAngle: -45
},
series: {
0: { targetAxisIndex: 0, },
1: { targetAxisIndex: 1, type: 'line' }
},
vAxes: {
0: { textPosition: 'none' },
1: {}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="height: 500px; width: 100%"></div>
</body>
</html>