Line Chart

[TheInnovator]

Why does my line chart continue when there is not value for a point?  As you can see below, the two lines end at June and July but it should actually stop at June for the blue line and May for the purple line.

It's supposed to be somewhat like this

[Daniel LaLiberte]

You didn't provide your data or options for us to look at, but since you indicate that the lines extend one month too far, I suspect you are using date values with months being one too high.  That is, when you create Date values with new Date(yyyy, M, dd), the M values start at 0, not 1.   This is not just a Google Charts feature or a JavaScript feature, but most programming languages adopted this convention.  Hope that helps.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Isaac Sogunro]

here's my code using sharepoint as a data source

var dataValues = [

['Oct', 0, 0],

['Nov', 0, 0],

['Dec', 0, 0],

['Jan', 0, 0],

['Feb', 0, 0],

['Mar', 0, 0],

['Apr', 0, 0],

['May', 0, 0],

['Jun', 0, 0],

['Jul', 0, 0],

['Aug', 0, 0],

['Sep', 0, 0]

];

var d = new Date();

var curYear = d.getFullYear();

var prevYear = curYear-1;

var monthIndex=0;

$().SPServices({

operation: "GetListItems", 

async: false,

listName: "508 Data_Overall Monthly Results",

CAMLViewFields: "<ViewFields><FieldRef Name='ScanType'></FieldRef><FieldRef Name='Year'></FieldRef><FieldRef Name='Month'></FieldRef><FieldRef Name='Score'></FieldRef></ViewFields>",

CAMLQuery: "<Query><OrderBy><FieldRef Name='Month'></FieldRef></OrderBy></Query>",

completefunc: function (xData, Status) {

 $(xData.responseXML).SPFilterNode("z:row").each(function() {

  monthIndex = getMonthIndex($(this).attr("ows_Month"));

var month = $(this).attr("ows_Month");

 

if ( prevYear == $(this).attr("ows_Year") && (( month == "Oct" || month == "Nov" || month == "Dec" ) ) || ( curYear == $(this).attr("ows_Year") && (month == "Jan" || month == "Feb" || month == "Mar" || month=="Apr" || month == "May" || month == "Jun" || month == "Jul" || month == "Aug" || month=="Sep")))

{  

//alert(monthIndex);

if ($(this).attr("ows_ScanType") == "Automatic")

{

dataValues[monthIndex][1] = $(this).attr("ows_Score");

}

else

{

dataValues[monthIndex][2] = $(this).attr("ows_Score");

}

}

 });

}

 });

 

var data = new google.visualization.DataTable();

data.addColumn('string', 'Month');

data.addColumn('number', 'Automatic Scan');

data.addColumn({type:'number', role:'annotation'});

data.addColumn('number', 'Manual Scan');

data.addColumn({type:'number', role:'annotation'});

 $.each(dataValues, function (index, value) {

        data.addRow([dataValues[index][0], Number(dataValues[index][1]),Number(dataValues[index][1]), Number(dataValues[index][2]),Number(dataValues[index][2])]);

}); 

//Use to convert the value in the 4th column to a percentage

var formatter = new google.visualization.NumberFormat({pattern: '#%'});

formatter.format(data, 4); // format column 4 in DataTable "data"

//Use to convert the value in the 4th column to a percentage

var formatter2 = new google.visualization.NumberFormat({pattern: '#%'});

formatter2.format(data, 2);

        var options = {

          title: 'Overall 508 Compliance Monthly Score Trend Analysis',

 colors: ["#6A0888", "#045FB4"],

 hAxis: {title: 'Month'},

 titleTextStyle: {color: 'black', fontName: '"Arial"', fontSize: '12'},

 legend: {textStyle: {color: 'black', fontName: '"Arial"', fontSize: '12'}},

 chartArea: {

            height: '65%'

        },

 vAxis: {

title: 'Score',

format: '#%'

}

};

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/lyskn2b6Do4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

[Daniel LaLiberte]

Since you are not using the Google Chart date type, you should look into what monthIndex values you are getting from your getMonthIndex() function.

Also, since your dataValues array initializes everything to 0, if you don't change some value to a non-zero value, it will still be 0.

[Isaac Sogunro]

One more thing.

If you look at the first image I attached earlier, how do I keep the line chart numbers from overlapping like they do.

I can't tell what some of the numbers are.

Any ideas?

[Isaac Sogunro]

Thanks! I will look into your suggestion.

[Daniel LaLiberte]

We don't have a way of dealing with the overlapping annotations at this time.  We are considering the options and how to implement.  It might be best to avoid using too many annotations and instead rely on tooltips to show the values when the user hovers over them.

[Isaac Sogunro]

Thanks!

I can't stop banging my head on that issue now. haha..

[TheInnovator]

One more line chart question please.
Do you know why when I increase the height of my chart above 65%, the months along the x-axis disappear. The height of my HTML table is 100%. How can I fix that?

On Wednesday, June 4, 2014 4:04:39 PM UTC-4, TheInnovator wrote:

Thanks!

I can't stop banging my head on that issue now. haha..

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/lyskn2b6Do4/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/lyskn2b6Do4/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
-Isaac-

http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/lyskn2b6Do4/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Daniel LaLiberte]

There are 3 sets of sizes you need to be aware of.  The container height and width, the chart height and width, and the chartArea height and width, as well as the chartArea left and top.   The chartArea is surrounded by a top area, bottom area, left area and right area.  I suspect you are trying to set your chartArea height, but your chart height (specified with the top-level 'height' option) is set to a value that doesn't allow all of the chartArea to be shown, along with the top area and bottom area.  Your chartArea.height + chartArea.top should be less than the chart height by the amount of space you want to allow for the bottom area.  

I hope my explanation is clear enough.  This is a common confusion, and we should probably have some documentation to spell it out in more detail.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

[Isaac Sogunro]

Makes sense!

http://isaac.issharepoint.com/Web%20Part%20Page/508Dashboard.aspx

Thank you sir.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--