If you want each series to have its own annotations, then you have to put
each annotation column immediately after the series that it applies to. So
your columns should look more like this:
data.addColumn('number', 'Key1');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Key2');
data.addColumn({ type: 'number', role: 'annotation' });
and change your actual column data to correspond. Note, you can't use
role: 'annotation2'. It must be 'annotation'.
Hope that helps.
On Mon, Jul 27, 2015 at 10:44 AM, skg <[email protected]> wrote:
> 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.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA
--
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.
