How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?
Here is the code that outputs the chart above
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
<?php echo"['', 2, null],"; ?>
<?php echo"['', 2, '1 Kpa ---------->'],"; ?>
<?php echo"['2', 1, '<---------- 2'],"; ?>
<?php echo"['3 σ', 0, '<---------- 3 σ']"; ?>
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
};
var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
chart.draw(data, options);
}
you can use a ComboChart to combine series types
add another column to the data table for the point
in the options, define the series types, use 'scatter' for points
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'Scatter');
data.addRows([
['', 2, null, null],
['', 2, '1 Kpa ---------->', 1],
['2', 1, '<---------- 2', null],
['3 s', 0, '<---------- 3 s', null]
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I would like to show a stacked bar chart with grouped bars and only one row of horizontal axis labels. From what I found, it is not currently possible to show a stacked BarChart with grouped bars using visualization.BarChart as of the Google Visualization API v44 , but this is possible with the material Bar chart by using the series array option.
For example:
google.charts.load('44', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23],
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
targetAxisIndex: 1
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
textPosition: 'none',
ticks: [null],
title: 'Hide one of the axis values '
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
My problem is that the horizontal axis range/ticks match for both bars, so showing 2 with the exact same tick values on the bottom is redundant. With the non-material BarChart, the textPosition: 'none' option can be used to hide labels for an axis, but this option is not currently supported in material bar charts. Is there another way that one of these axis labels/ticks can be hidden in a non-hacky way?
Note that textPosition has no effect.
couldn't find a way to hide the tick marks
but you can move them to the top
see following working snippet...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
UPDATE
another option would be to modify the chart's svg manually,
once the 'ready' event fires
here, the top labels are hidden when the chart is drawn...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
google.visualization.events.addListener(chart, 'ready', function () {
$.each($('#stacked-grouped-chart text'), function (index, label) {
if (parseFloat($(label).attr('y')) < 20) {
$(label).attr('fill', 'none');
}
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
var options = {
hAxis : {
format : 'none'
}
}
Here is a code for creating a line chart. I'm trying to add an image on top of the line annotation. Here a demo on jsfiddle.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0,null, 0, 1], [1,'', 10,3], [2,null, 23,6], [3,null, 17,7], [4,null, 18,4], [5,null, 9,7]
]);
var options = {
curveType : 'function',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I really can't figure out how to do this. Any one ever done this ?
you can add elements to the chart, once the 'ready' event fires
(or 'animationfinish' when using animation)
first, need to find the annotations, which will be <rect> elements
similar to the axis lines, they will have a 'width' of 1
but they will have a different 'fill' attribute
(keep this in mind, if more style settings are set on the annotations option)
the following working snippet finds the annotation lines and adds an image to the top
google.charts.load('current', {
callback: drawBasic,
packages: ['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, null, 0, 1],
[1, '', 10, 3],
[2, null, 23, 6],
[3, null, 17, 7],
[4, null, 18, 4],
[5, null, 9, 7]
]);
var options = {
annotations: {
position: 'top',
style: 'line'
},
hAxis: {
gridlines: {
color: 'transparent'
},
title: 'Time'
},
vAxis: {
gridlines: {
color: 'transparent'
},
title: 'Popularity'
},
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) {
var xPos = parseFloat(rect.getAttribute('x'));
var yPos = parseFloat(rect.getAttribute('y'));
var whiteHat = container.appendChild(document.createElement('img'));
whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
whiteHat.className = 'whiteHat';
// 16x16 (image size in this example)
whiteHat.style.top = (yPos - 8) + 'px';
whiteHat.style.left = (xPos) + 'px';
}
});
});
chart.draw(data, options);
}
.whiteHat {
border: none;
position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Add 'role': 'tooltip', 'p': {'html': true}}); in your data.addColumn and
in the options use: tooltip: { isHtml: true }.
HTML:
<div id="chart"></div>
JavaScript:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addColumn('number', 'Line 2');
data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]);
data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]);
data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]);
data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]);
data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]);
var options = {
title: 'Graph',
hAxis: {
title: 'Time',
gridlines: {
color: 'transparent'
}
},
vAxis: {
title: 'Popularity',
gridlines: {
color: 'transparent'
}
},
annotations: {
style: 'line',
position: 'top'
},
tooltip: {isHtml: true},
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
See in JsFiddle.
i am using google chart api to show a chart on a bootstrap modal with framework Laravel, i'm having an issue because i'm not beein able to change the colour of the bar and put one blue and the other one green, another issue is that at the right it only put me the name of une of the bars(RX).
Here is my js code:
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(nombre, unidad, tipo, valor, media) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'RX');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Tú', parseInt(valor), valor+' '+unidad],
['Media', parseFloat(media), parseInt(media)+' '+unidad],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,1,2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
// height: 400,
// width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100,
minValue: 0,
}
});
$("#myModalLabel").empty();
$("#myModalLabel").append(tipo+" - "+nombre);
$("#modalChart").modal();
}
Here is the chart that i get:
you can write your drawchart function like this
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
For more https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns
I have to create a line chart where a few of the points have tooltips or other balloons/captions/texboxes with information about the point. They must always be displayed, not only on mouse over. Basically a google annotation chart, but with the data on the chart.
I tried the code below, which doesn't even show the tooltip as it should. Any thoughts, or should I choose a different technology? Thanks.
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type: 'string', role: 'tooltip' });
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
You would want to use role:'annotation' instead of role: 'tooltip'. Annotation allows you to display the text without any user interaction. See the documentation on annotationRole for more info.
Working Code: http://jsfiddle.net/wkyg2brg/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}
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!