Hi,
I am able to show data points on one Line, but in second line data points
are not showing,
Below is the code.
Example Key1 Values : 40 , 29 , 51, 53
Key2 Values : 0 ,15 , 2 ,60
Key1 Values are showing on Data Points, but key2 are not showing
function drawVisualization(dataValues) {
var data = new google.visualization.DataTable();
var userName;
data.addColumn('string', 'Name');
data.addColumn('number', 'Key1');
data.addColumn('number', 'Key2');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn({ type: 'number', role: 'annotation2' });
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Name, dataValues[i].Key1,
dataValues[i].Key2, dataValues[i].Key1,dataValues[i].Key2]);
}
var options = {
width: 400,
height: 100,
pointSize: 4,
tooltip: { isHtml: true },
legend: 'none',
colors: ['red','green']
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div3'));
chart.draw(data, options);
}
Example 2 Here you can save it as html and run below the code:
it shwoing only data points on 1 value, look below example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SO Q#</title>
<!--
My idea was to get some element property and change style to display:none.
But there is nothing which can be used for that.
-->
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
var rectTags = document.getElementsByTagName("rect");
console.log(rectTags.length);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Exp');
data.addColumn({type: 'number', role: 'annotation'});
data.addColumn({type: 'number', role: 'annotation3'});
data.addRows([
['2008', 23, 54,78,66],
['2009', 145,55,7,45],
['2010', 245,56,55,24],
['2011', 350,57,13,68]
]);
var options = {
width: 400,
height: 200,
pointSize: 4,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 400,
height: 50},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'transparent'},
maxValue:'58',
minValue:'52'
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'default'
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
for (var i = 0; i < rectTags.length; i++) {
if (rectTags[i].hasAttribute("width")) {
var width = rectTags[i].getAttribute("width");
if (parseInt(width) == 1) {
rectTags[i].setAttribute("width", 0);
}
}
}
}
</script>
</head>
<body>
<div id="chart_div"></div>
<script>
</script>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
