[visualization-api] Pay it Forward - A complete working Line Chart example
This Forum has been amazingly helpful to me in my quest to generate a
series of moderately complex Line Charts on a web page from a collection of
CVS data files.
After weeks of effort, I now have the kind of charting capability I have
wanted for years to show critical home temperature values over time. One of
these charts is shown below...
https://lh6.googleusercontent.com/-eEMijaE6oTE/VKbf2kpZPHI/CiU/RsmNxl5iHRk/s1600/chart.jpg
In an effort to Pay it Forward and help others, I have attached a
complete HTML/javaScript (chartTemps.html) web page. The kind of example
I sought, but never found.
The attached file contents are also displayed below for quick reference.
The code is highly documented, in the hopes it will give you enough insight
to explore further on your own, in order to meet your specific needs.
Enjoy, and thanks again to all those that helped me...
html
head
style type=text/css
!--
.padding {padding-left: 40px;}
--
/style
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=http://jquery-csv.googlecode.com/git/src/jquery.csv.js;
/script
titleEnvironmental Temperatures/title
script
// This is a general purpose Chart Handler, using the Google Charts API.
// It was designed to chart 5 temperature sensors, differentiating between
current and old data values, which were written to a CVS file.
// The file has a header (for chart labeling use) and 5 sets of dual
(left/right pair) columns. Each column pair holds the new/old values for a
sensor.
// Using SQL to hold and manage the temperature readings, at the beginning
of each chart period (ie, x-axis value 0) all the values in the left
// (new) column are moved to the right (old) column. The new column
chart lines are displayed as solid, while the old are shown as dashed.
// This clearly differentiates the current vs the historic values, while
allowing a contiguous chart line.
// These vars are used for labeling the three charts produced by this code.
A Day, Week, and Month chart.
var d = new Date();
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',
'Saturday'];
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var day = days[d.getDay()];
var month = months[d.getMonth()];
// Load the Visualization API from Google and set Listener
google.load(visualization, 1.1, {packages:[corechart]});
//google.setOnLoadCallback(drawChart);
// These calls (onLoad) call the three charts made with the 'drawChart'
function, which has multiple parameters passed to it.
// The parameters cover the CSV file name; the vertical axis range and tick
marking, the horizontal axis range and ticks;
// and finally the name of the division id used to place the chart in the
body of the html page.
google.setOnLoadCallback(function()
{
// parms-- (fileName,cPeriod,vStrt,vStep,vEnd,vMaj,vMnr,
hStrt,hStep,hEnd,hMaj,hMnr,divName)
drawChart(tempsDay.csv,day,-20,10,100,12,4, 0,1,24,24,3,dayChart);
drawChart(tempsWeek.csv,Week (0=Sun; 6=Sat),-20,10,100,12,4, 0,1,7,7,
5,weekChart);
drawChart(tempsMonth.csv,month,-20,10,100,12,4, 1,1,32,32,5,
monthChart);
});
function drawChart(fileName,cPeriod,vStrt,vStep,vEnd,vMaj,vMnr,hStrt,hStep,
hEnd,hMaj,hMnr,divName) {
//grab the CSV data and ready it for charting
$.get(fileName, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.
castToScalar});
//alert (arrayData[0]+ '\n' + arrayData[1]); //debug code to verify
array contents
//alert(arrayData.join('\n')); //this dumps the first and last portions
of the array
// This new DataTable object holds all the data in Charting format
var data = google.visualization.arrayToDataTable(arrayData, false);
// The data view does not handle the case where a column may be totally
blank (A sensor fails?).
// So creating a DataView isolates that problem.
var view = new google.visualization.DataView(data);
// The DataView allows us to force the column definitions to be numeric, so
nulls don't cause a problem.
// Since we created a new view. we have to also import the CSV column
labels.
view.setColumns([
{sourceColumn: 0, type: number, label: data.getColumnLabel(0)},
// If imported labels are not used, then the data.getColumnLabel()
parameter can be replaced with a label name (eg, Outside Temp)
{sourceColumn: 1, type: number, label: data.getColumnLabel(1)},
{sourceColumn: 2, type: number},
{sourceColumn: 3, type: number, label: data.getColumnLabel(3)},
{sourceColumn: 4, type: number},
{sourceColumn: 5, type: number, label: data.getColumnLabel(5)},
{sourceColumn: 6, type: number},
{sourceColumn: 7, type: number, label: data.getColumnLabel(7)},
{sourceColumn: 8, type: number},
{sourceColumn: 9, type: number, label: data.getColumnLabel(9)},
{sourceColumn: 10, type:
Re: [visualization-api] Re: Setting Column Property to 'numeric' ?
On Sunday, December 21, 2014 7:39:05 PM UTC-5, Daniel LaLiberte wrote:
... to use the DataTable (without the DataView) would have to instead add
a header row to your arrayData that specifies the types of the columns and
pass that to arrayToDataTable().
Daniel - this morning I just noticed that using the dataView approach
caused the labels to disappear from my chart legend. They are in the 1st
line (header) of the CSV file and previously provided labels with the
non-DataView approach.
But as soon as I add the DataView visualization the labels disappear.
I restored labels with sourceColumn options (as exampled below) but would
prefer to pass the labels in the CSV file for generality. Is that
possible? I couldn't discover a way to make it work.
var data = google.visualization.arrayToDataTable(arrayData, false);
var view = new google.visualization.DataView(data);
view.setColumns([
{sourceColumn: 0, type: number, label: Hour},
{sourceColumn: 1, type: number, label: Dwn},
{sourceColumn: 2, type: number},
{sourceColumn: 3, type: number, label: Mid},
. . . .
. . . .
Thanks.
--
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+unsubscr...@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.
Re: [visualization-api] Re: Setting Column Property to 'numeric' ?
Nice!
Works just fine.
This has been a very helpful thread, that I hope will help others too.
I searched for days trying to find this information, without success.
Very grateful for your knowledge and assistance.
I think I now everything I wanted and needed.
[:-)}
On 12/22/2014 11:10 AM, 'Daniel LaLiberte' via Google Visualization API
wrote:
Ken,
You can get the column labels from your DataTable data with
data.getColumnLabel(i). So use that expression instead of your
literal string value. In fact, you could use a loop to setup all of
the columns for your DataView, building a columns array that you then
pass to view.setColumns().
On Mon, Dec 22, 2014 at 11:03 AM, Ken Burkhalter
kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote:
On Sunday, December 21, 2014 7:39:05 PM UTC-5, Daniel LaLiberte
wrote:
... to use the DataTable (without the DataView) would have to
instead add a header row to your arrayData that specifies the
types of the columns and pass that to arrayToDataTable().
Daniel - this morning I just noticed that using the dataView
approach caused the labels to disappear from my chart legend.
They are in the 1st line (header) of the CSV file and previously
provided labels with the non-DataView approach.
But as soon as I add the DataView visualization the labels disappear.
I restored labels with sourceColumn options (as exampled below)
but would prefer to pass the labels in the CSV file for
generality. Is that possible? I couldn't discover a way to make
it work.
|
vardata =google.visualization.arrayToDataTable(arrayData,false);
varview =newgoogle.visualization.DataView(data);
view.setColumns([
{sourceColumn:0,type:number,label:Hour},
{sourceColumn:1,type:number,label:Dwn},
{sourceColumn:2,type:number},
{sourceColumn:3,type:number,label:Mid},
|
Thanks.
--
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+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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
https://plus.google.com/100631381223468223275?prsrc=2 - 978-394-1058
dlalibe...@google.com mailto:dlalibe...@google.com 5CC, Cambridge MA
daniel.lalibe...@gmail.com mailto:daniel.lalibe...@gmail.com 9
Juniper Ridge Road, Acton MA
--
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/TxIRHjJ34sc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
google-visualization-api+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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.
--
-ken burkhalter
No trees were killed in the sending of this message, but
a large number of electrons were terribly inconvenienced.
--
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+unsubscr...@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.
[visualization-api] Re: Setting Column Property to 'numeric' ?
Now that everything is working, I thought it would be helpful to post the working file, in the hope it might help others. See attached (which is a pretty much documented code example) ... [:-)} -- 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+unsubscr...@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. text/html; charset=UTF-8; name="chartTemps.html": Unrecognized
[visualization-api] Re: Setting Column Property to 'numeric' ?
Daniel wrote: ... how about trying to set up a Data View? I changed my code to incorporate a dataView. That code works OK when the csv file does contain nulls (exactly as the non-dataView approach did) but fails in the same All series on a given axis must be of the same data type way (as the non-view) when there is a full column of nulls in the csv data. Attached is my code and a csv file with a null column for your inspection. Thanks.[:-)} -- 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+unsubscr...@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. Time,Dwn,Dwn,Mid,Mid,Out,Out,Frzr,Frzr,Frig,Frig 0,70.0,,70.0,,30.2,,.1,,46, .17,70.0,,70.0,,29.3,,1.1,,46, .33,69.0,,70.0,,30.2,,1.7,,46, .5,69.0,,69.0,,29.3,,2.3,,46, .67,69.0,,69.0,,29.3,,2.9,,46, .83,69.0,,69.0,,29.3,,3.3,,37.9, 1,69.0,,69.0,,29.3,,3.8,,31.6, 1.17,69.0,,69.0,,29.3,,4.1,,29.3, 1.33,69.0,,69.0,,29.3,,4.4,,28, 1.5,69.0,,68.0,,29.3,,4.9,,27.1, 1.67,68.0,,68.0,,28.4,,5.1,,26.6, 1.83,68.0,,68.0,,29.3,,5.5,,26.2, 2,68.0,,68.0,,29.3,,3.3,,25.7, 2.17,68.0,,68.0,,29.3,,1.2,,25.3, 2.33,68.0,,68.0,,29.3,,-.1,,28.4, 2.5,68.0,,68.0,,29.3,,-1,,30.7, 2.67,68.0,,67.0,,29.3,,-1.8,,32.5, 2.83,68.0,,67.0,,29.3,,-2.3,,33.8, 3,68.0,,67.0,,30.2,,-2.9,,35.6, 3.17,67.0,,67.0,,29.3,,-2.2,,37, 3.33,67.0,,67.0,,30.2,,-.3,,38.3, 3.5,67.0,,67.0,,30.2,,.7,,39.2, 3.67,67.0,,67.0,,30.2,,1.4,,40.1, 3.83,67.0,,66.0,,30.2,,2.1,,40.1, 4,67.0,,66.0,,30.2,,2.6,,40.6, 4.17,67.0,,66.0,,30.2,,3.1,,40.6, 4.33,67.0,,66.0,,30.2,,3.5,,41, 4.5,67.0,,66.0,,30.2,,4,,41.5, 4.67,67.0,,66.0,,30.2,,4.3,,41.9, 4.83,68.0,,66.0,,30.2,,4.7,,42.4, 5,68.0,,66.0,,30.2,,5,,42.8, 5.17,69.0,,66.0,,30.2,,5.2,,42.8, 5.33,69.0,,66.0,,30.2,,4.8,,42.8, 5.5,69.0,,66.0,,30.2,,1.7,,42.8, 5.67,70.0,,67.0,,30.2,,.4,,43.3, 5.83,70.0,,67.0,,30.2,,-.7,,42.8, 6,70.0,,67.0,,30.2,,-1.5,,43.3, 6.17,70.0,,67.0,,30.2,,-2.3,,43.7, 6.33,71.0,,68.0,,30.2,,-2.8,,44.2, 6.5,71.0,,68.0,,30.2,,-2.3,,44.6, 6.67,71.0,,68.0,,30.2,,-.3,,44.6, 6.83,71.0,,68.0,,30.2,,1,,45.1, 7,71.0,,68.0,,30.2,,1.5,,45.1, 7.17,71.0,,69.0,,30.2,,2.1,,43.3, 7.33,71.0,,69.0,,30.2,,2.6,,33.8, 7.5,71.0,,70.0,,30.2,,3.2,,30.2, 7.67,71.0,,70.0,,30.2,,3.8,,29.8, 7.83,71.0,,70.0,,30.2,,4.1,,28.9, 8,71.0,,71.0,,30.2,,4.4,,28, 8.17,71.0,,71.0,,30.2,,4.9,,27.5, 8.33,71.0,,71.0,,30.2,,5.2,,27.1, 8.5,72.0,,71.0,,30.2,,5.3,,27.1, 8.67,72.0,,71.0,,30.2,,2.5,,26.6, 8.83,72.0,,71.0,,30.2,,1,,25.7, 9,72.0,,71.0,,30.2,,-.1,,25.3, 9.17,72.0,,71.0,,30.2,,-1,,28.4, 9.33,71.0,,71.0,,30.2,,-1.5,,31.1, 9.5,71.0,,71.0,,30.2,,-2,,33.4, 9.67,, 9.83,, 10,, 10.17,, 10.33,, 10.5,, 10.67,, 10.83,, 11,, 11.17,, 11.33,, 11.5,, 11.67,, 11.83,, 12,, 12.17,, 12.33,, 12.5,, 12.67,, 12.83,, 13,, 13.17,, 13.33,, 13.5,, 13.67,71.0,,71.0,,31.1,,.7,,27.5, 13.83,, 14,71.0,,72.0,,30.2,,-2.9,,39.2, 14.17,71.0,,72.0,,30.2,,-2.9,,39.2, 14.33,72.0,,72.0,,30.2,,-2.9,,39.2, 14.5,71.0,,72.0,,30.2,,-2.9,,39.2, 14.67,72.0,,72.0,,30.2,,-2.9,,39.2, 14.83,71.0,,72.0,,30.2,,-2.9,,39.2, 15,71.0,,72.0,,30.2,,-2.9,,39.2, 15.17,71.0,,72.0,,31.1,,5.3,,42.4, 15.33,72.0,,72.0,,31.1,,5.3,,42.4, 15.5,71.0,,72.0,,32,,4.2,,43.3, 15.67,72.0,,72.0,,31.1,,2.1,,43.7, 15.83,71.0,,72.0,,31.1,,.5,,44.2, 16,71.0,,72.0,,32,,-.4,,44.6, 16.17,71.0,,72.0,,31.1,,-1.1,,45.1, 16.33,71.0,,72.0,,31.1,,-1.8,,45.5, 16.5,71.0,,72.0,,31.1,,-2.4,,45.5, 16.67,72.0,,72.0,,31.1,,-2.8,,46, 16.83,72.0,,72.0,,31.1,,-2.2,,46, 17,72.0,,72.0,,32,,-.2,,46, 17.17,72.0,,72.0,,31.1,,.8,,46.4, 17.33,72.0,,72.0,,31.1,,1.5,,46.4, 17.5,72.0,,72.0,,32,,2.1,,46.9, 17.67,72.0,,72.0,,31.1,,2.6,,47.3, 17.83,72.0,,72.0,,31.1,,3.3,,37.4, 18,72.0,,72.0,,31.1,,3.8,,32.5, 18.17,72.0,,72.0,,31.1,,4.1,,31.6, 18.33,72.0,,72.0,,31.1,,4.6,,29.3, 18.5,72.0,,72.0,,31.1,,4.8,,28.4, 18.67,72.0,,72.0,,31.1,,5.2,,28, 18.83,72.0,,72.0,,31.1,,5.6,,28.9, 19,72.0,,72.0,,31.1,,3.5,,28, 19.17,72.0,,72.0,,31.1,,1.4,,30.7, 19.33,72.0,,72.0,,31.1,,.4,,27.5, 19.5,72.0,,71.0,,31.1,,-.6,,28.9, 19.67,72.0,,72.0,,31.1,,-1.3,,27.1, 19.83,72.0,,72.0,,31.1,,-2,,26.6, 20,72.0,,72.0,,31.1,,-2.4,,26.2, 20.17,72.0,,72.0,,31.1,,-2.8,,25.7, 20.33,72.0,,72.0,,31.1,,-2.5,,25.3, 20.5,72.0,,72.0,,31.1,,-.5,,31.1, 20.67,72.0,,72.0,,31.1,,.7,,33.4, 20.83,72.0,,72.0,,31.1,,1.4,,35.6, 21,72.0,,72.0,,31.1,,2.1,,38.3, 21.17,72.0,,72.0,,31.1,,3.2,,38.3, 21.33,72.0,,71.0,,31.1,,3.2,,40.1, 21.5,72.0,,71.0,,31.1,,3.5,,41, 21.67,72.0,,72.0,,31.1,,4,,41.9, 21.83,72.0,,72.0,,30.2,,4.3,,42.4, 22,72.0,,72.0,,30.2,,4.7,,43.3,
[visualization-api] Re: Setting Column Property to 'numeric' ?
Woops, found a typo after I posted. The statement *That code works OK when the csv file does contain nulls (exactly as the non-dataView approach did) * Should have been *That code works OK when the csv file does not contain nulls (exactly as the non-dataView approach did) * -- 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+unsubscr...@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.
[visualization-api] Re: Setting Column Property to 'numeric' ?
Well, I'm a glutton for punishment so I could not resist going back to the old code and trying it. Using this approach... var data = google.visualization.arrayToDataTable(arrayData); // Set chart options data.setColumnProperty (0, 'type', 'number'); data.setColumnProperty (1, 'type', 'number'); yada, yada. to initialize the column definitions, there was NO success. I still get the same axis data type error. BUT, all is well if I add the dataView visualization approach to the process (without the setColumnProperty method but the sourceColumn approach for the dataView). I have not run across the sourceColumn method before and was not aware of it. I didn't try it with the data set, just the view set. [:-)} -- 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+unsubscr...@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.
[visualization-api] Setting Column Property to 'numeric' ?
My Line Chart input data comes from a csv file with data for 11 columns (x-axis and 10 series). It is possible, at times, for one, or more, of the csv lines to contain all null data vales, in which case Charting fails with an All series on a given axis must be of the same data type error comment. I can stop this by always writing an initial line into the csv file with (11) zeroes [0,0,0,0,0,0,0,0,0,0,0] but that messes up the chart appearance. I thought it possible to cure this by using the setColumnProperty Method to define all columns as numeric (which is true of all the data). That is... var data = new google.visualization.arrayToDataTable(arrayData); // Set chart options data.setColumnProperty (0, 'type', 'number'); data.setColumnProperty (1, 'type', 'number'); data.setColumnProperty (2, 'type', 'number'); data.setColumnProperty (3, 'type', 'number'); data.setColumnProperty (4, 'type', 'number'); data.setColumnProperty (5, 'type', 'number'); data.setColumnProperty (6, 'type', 'number'); data.setColumnProperty (7, 'type', 'number'); data.setColumnProperty (8, 'type', 'number'); data.setColumnProperty (9, 'type', 'number'); data.setColumnProperty (10, 'type', 'number'); but it seems to have no effect. I still get the data type error. What am I missing? -- 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+unsubscr...@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.
[visualization-api] Re: Setting Column Property to 'numeric' ?
Daniel- I think I did it right, but I still get the data type error if I don't put a row of all zeros data in the CSV file. I have attached my code. Maybe you can spot something. :-) Thanks. You have been so much help and I sure do appreciate it! -- 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+unsubscr...@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. text/html; charset=UTF-8; name="chartTemps.html": Unrecognized
Re: [visualization-api] Controlling Chart Bordering White Space?
Daniel-
Thank you. That was it. I made the chart height 15px smaller than the
chart.chartArea.height and that left a nice small white space border.
I guess none are so blind as they that cannot see. Like so many things
in life, once you understand something it is obvious, but until then a
mystery.
I was very puzzled why there were two height (and width) properties,
never stopping to think that one was a chart option and the other a
chartArea option. Once that became clear it is obvious how to use them.
As a newbie I suggest someone consider a small bit of explanatory text
in the 'Using Google Charts Chart Galleries help 'chartArea.height' and
'height' (also widths) area that says for example...
chartArea.height number or string auto Chart area height. See also
'height' option to adjust the chart size within the chart area.
That would make things a lot clearer for anyone trying to learn about
the use of charting.
-ken b
On 12/14/2014 2:23 PM, 'Daniel LaLiberte' via Google Visualization API
wrote:
Hi Ken,
You also can adjust the height of the overall chart, separate from the
'chartArea'. If your div height is 350, this should be used to
determine the default chart size, but I can't tell what else you are
doing with your chart options without seeing the code. So try:
var options = {
height: 350,
chartArea: {
height: 350
}
}
On Sun, Dec 14, 2014 at 10:58 AM, Ken Burkhalter
kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote:
The Line Chart I have generated seems to have excessing white
space bordering it. I have been able to trim the top and left
sides, but the bottom is excessive and although I have tried to
change every chartArea option I can think of to try, I have not
been successful.
Here is an example, where the new Google Chart is displayed on a
page with others (not yet converted).
There is no html inserted spacing between the chart elements, so
all the space is associated with the Google Chart itself. Here is
the page code...
|
body
divid=chart_divstyle=width:775px;height:350;align:=left/div
imgsrc=logtemp/week.jpgalt=The Week Temps/br/
br/
imgsrc=logtemp/month.jpgalt=The Month Temps/
/body
|
And here is the displayed result...
https://lh3.googleusercontent.com/-wTB_cHHZ_JQ/VI2zFu-nBZI/Cgc/W-cusRo_ImE/s1600/2014-12-14_10-50-48.png
The red boxed area is all excessing white space that I would like
to trim as much as possible.
Is this possible?
Thanks.
--
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+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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
https://plus.google.com/100631381223468223275?prsrc=2 - 978-394-1058
dlalibe...@google.com mailto:dlalibe...@google.com 5CC, Cambridge MA
daniel.lalibe...@gmail.com mailto:daniel.lalibe...@gmail.com 9
Juniper Ridge Road, Acton MA
--
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/7sD67KFpUhk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
google-visualization-api+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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.
--
-ken burkhalter
--
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+unsubscr...@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.
Re: [visualization-api] Controlling Chart Bordering White Space?
Daniel- Apparently I spoke too soon. I seems I've taken one step forward and two steps back. Using your suggested code, I eliminated the unwanted vertical spacing but then later noticed that my chart A-axis labels dropped the last label. The axis should have been labeled from 0-24, but was then just 0-23. So I thought that perhaps I needed to also add width control like your height suggestions. As soon as I did that, I then lost all of the x-axis labels and tick marks. The chart was cropped right thru the minimum x-axis tick line, slicing off the bottom half of the lower y-axis label as well as all of the x-axis labels. (Note red outlined area on image below)... https://lh3.googleusercontent.com/-XBTHOmJDTUk/VI7znpYaIEI/Cgw/TrUAJ7tz3EY/s1600/chrt.jpg No matter what I have tried with the Var options settings, I can't fix this issue. If I make the height considerably smaller than the chartArea.height the chart resizes appropriately but is still cropped. I've tried different browsers, and three different computers, and restarted my web server in case this was a caching issue somewhere but to no avail. There is nothing I can do that will restore an uncropped chart now. I even removed all style parameters from the html chart_div entry in the page body code. Nothing seems to make a difference! The chart remains cropped at the bottom no matter what. I also can find no chart config options that I might have inadvertently changed or dropped. There seems to be memory somewhere but I'll be danged if I can find it. I have attached my html page code as well as the csv file that drives the chart creation, and the img file just below the google chart, if case it helps you discover what the heck is going on. If you can advise the cure for this AND the lost last x-axis tick mark label (24) I would sure be a happy camper! :-) This seems like voo-doo dust has gotten into the works somehow. [:-)} -- 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+unsubscr...@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. Time,Dwn,Dwn,Mid,Mid,Out,Out,Frzr,Frzr,Frig,Frig 0,70,,71,,50,,-1,,25, .17,70,,71,,49,,-2,,25, .33,70,,71,,50,,-2,,29, .5,70,,71,,49,,-2,,32, .67,70,,71,,49,,0,,34, .83,70,,71,,49,,0,,35, 1,70,,71,,49,,1,,37, 1.17,70,,71,,49,,2,,38, 1.33,70,,70,,49,,2,,39, 1.5,70,,70,,49,,3,,40, 1.67,70,,70,,49,,3,,41, 1.83,70,,70,,48,,4,,41, 2,70,,70,,49,,4,,42, 2.17,70,,70,,48,,4,,42, 2.33,70,,70,,48,,5,,42, 2.5,69,,70,,48,,5,,42, 2.67,69,,70,,47,,3,,42, 2.83,69,,70,,47,,1,,43, 3,69,,70,,48,,0,,43, 3.17,69,,70,,47,,0,,44, 3.33,69,,70,,47,,-1,,44, 3.5,69,,70,,47,,-1,,44, 3.67,69,,69,,46,,-1,,44, 3.83,69,,69,,46,,-2,,44, 4,69,,69,,46,,-2,,44, 4.17,69,,69,,46,,0,,44, 4.33,69,,69,,46,,0,,44, 4.5,69,,69,,46,,1,,44, 4.67,69,,69,,46,,2,,45, 4.83,69,,69,,46,,2,,45, 5,70,,69,,45,,3,,45, 5.17,70,,69,,45,,3,,35, 5.33,71,,69,,45,,4,,30, 5.5,71,,70,,45,,4,,28, 5.67,71,,70,,45,,4,,27, 5.83,71,,70,,45,,5,,27, 6,71,,70,,45,,5,,26, 6.17,71,,70,,45,,3,,26, 6.33,71,,70,,44,,1,,26, 6.5,71,,70,,44,,0,,25, 6.67,71,,70,,44,,0,,25, 6.83,71,,70,,44,,-1,,25, 7,71,,70,,44,,-2,,24, 7.17,72,,70,,44,,-2,,29, 7.33,72,,71,,44,,-2,,32, 7.5,72,,71,,45,,-1,,34, 7.67,72,,72,,44,,0,,35, 7.83,72,,72,,44,,1,,37, 8,72,,72,,44,,1,,39, 8.17,72,,72,,44,,2,,40, 8.33,72,,72,,44,,3,,41, 8.5,72,,72,,44,,3,,42, 8.67,72,,72,,43,,4,,42, 8.83,72,,72,,43,,4,,43, 9,71,,72,,43,,4,,43, 9.17,71,,72,,43,,5,,44, 9.33,72,,72,,43,,5,,45, 9.5,72,,72,,43,,3,,45, 9.67,72,,72,,43,,1,,45, 9.83,72,,72,,43,,0,,46, 10,,72,,71,,47,,2,,26 10.17,,71,,71,,47,,2,,26 10.33,,72,,71,,47,,3,,26 10.5,,71,,71,,47,,3,,25 10.67,,71,,71,,48,,4,,25 10.83,,71,,71,,48,,4,,25 11,,72,,71,,48,,5,,24 11.17,,71,,71,,48,,5,,30 11.33,,71,,71,,48,,1,,32 11.5,,72,,71,,48,,0,,34 11.67,,72,,72,,48,,-2,,35 11.83,,71,,72,,48,,12,,37 12,,71,,72,,48,,5,,40 12.17,,72,,72,,48,,3,,41 12.33,,71,,72,,49,,1,,41 12.5,,72,,72,,49,,0,,42 12.67,,72,,72,,49,,0,,42 12.83,,72,,72,,50,,0,,46 13,,71,,72,,50,,-1,,45 13.17,,72,,72,,50,,-1,,45 13.33,,71,,72,,50,,-2,,45 13.5,,72,,72,,50,,-2,,45 13.67,,72,,72,,50,,-2,,45 13.83,,72,,72,,51,,-3,,46 14,,72,,72,,52,,-1,,46 14.17,,72,,72,,52,,0,,46 14.33,,72,,72,,52,,1,,46 14.5,,72,,72,,52,,1,,45 14.67,,72,,72,,52,,2,,35 14.83,,72,,72,,52,,2,,31 15,,72,,72,,53,,3,,29 15.17,,71,,72,,53,,3,,28 15.33,,71,,72,,53,,4,,28 15.5,,72,,72,,53,,4,,29 15.67,,72,,72,,52,,5,,28 15.83,,72,,72,,52,,5,,30 16,,72,,72,,52,,4,,28 16.17,,71,,72,,52,,2,,28 16.33,,72,,72,,52,,0,,27 16.5,,72,,72,,52,,0,,27 16.67,,72,,72,,52,,0,,27 16.83,,72,,72,,52,,-1,,30 17,,72,,72,,52,,-2,,27 17.17,,72,,72,,52,,-2,,27 17.33,,72,,72,,52,,-3,,26
Re: [visualization-api] Controlling Chart Bordering White Space?
You nailed it on all fronts! Got 'er going correctly now Definite need for clearer language in the documentation. To me at least, the explanation seems counter intuitive, but once explained makes sense. Thanks again for helping me get over the hump. [:-)} On 12/15/2014 10:19 AM, 'Daniel LaLiberte' via Google Visualization API wrote: Ken, You may have gotten the wrong idea about the 'height' vs 'chartArea.height' The 'chartArea' is the part inside the axes, where the drawing of the data is displayed. The overall chart contains the chartArea, surrounded by the top, bottom, left, and right areas. The 'height' is for the total chart size, including the chartArea.height. So the 'height' should generally be larger than the 'chartArea.height', not smaller. (I see now that your suggested comment got it backwards.) Same for 'width' and 'chartArea.width'. Another thing that might be going on is if the html element you put the chart in has a height, that could override whatever you specify for the chart itself. Also, your second chart might be positioned such that it covers up the bottom of the first chart. Your chartTemps.html doesn't seem to have the content I would need to tell what is going on, but maybe you can figure it out from here. On Mon, Dec 15, 2014 at 9:59 AM, Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Daniel- Apparently I spoke too soon. I seems I've taken one step forward and two steps back. Using your suggested code, I eliminated the unwanted vertical spacing but then later noticed that my chart A-axis labels dropped the last label. The axis should have been labeled from 0-24, but was then just 0-23. So I thought that perhaps I needed to also add width control like your height suggestions. As soon as I did that, I then lost all of the x-axis labels and tick marks. The chart was cropped right thru the minimum x-axis tick line, slicing off the bottom half of the lower y-axis label as well as all of the x-axis labels. (Note red outlined area on image below)... https://lh3.googleusercontent.com/-XBTHOmJDTUk/VI7znpYaIEI/Cgw/TrUAJ7tz3EY/s1600/chrt.jpg No matter what I have tried with the Var options settings, I can't fix this issue. If I make the height considerably smaller than the chartArea.height the chart resizes appropriately but is still cropped. I've tried different browsers, and three different computers, and restarted my web server in case this was a caching issue somewhere but to no avail. There is nothing I can do that will restore an uncropped chart now. I even removed all style parameters from the html chart_div entry in the page body code. Nothing seems to make a difference! The chart remains cropped at the bottom no matter what. I also can find no chart config options that I might have inadvertently changed or dropped. There seems to be memory somewhere but I'll be danged if I can find it. I have attached my html page code as well as the csv file that drives the chart creation, and the img file just below the google chart, if case it helps you discover what the heck is going on. If you can advise the cure for this AND the lost last x-axis tick mark label (24) I would sure be a happy camper! :-) This seems like voo-doo dust has gotten into the works somehow. [:-)} -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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 https://plus.google.com/100631381223468223275?prsrc=2 - 978-394-1058 dlalibe...@google.com mailto:dlalibe...@google.com 5CC, Cambridge MA daniel.lalibe...@gmail.com mailto:daniel.lalibe...@gmail.com 9 Juniper Ridge Road, Acton MA -- 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/7sD67KFpUhk/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto:google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google
[visualization-api] curveType: 'function' doesn't do anything
According to the visualization documentation on Line Charts the following
should smooth a line chart...
var options = {
title: 'Company Performance',
*curveType: 'function',*
legend: { position: 'bottom' }
};
But I can see no difference in my chart results with, or without, the
'function' option,and there seem to be some pretty sharp edges that would
smooth.
https://lh3.googleusercontent.com/-sc1EQj5BOS8/VI8H_IJTqYI/ChA/GF8fszuZz58/s1600/chrt.jpg
Shouldn't this be smoother?
--
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+unsubscr...@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.
[visualization-api] Re: curveType: 'function' doesn't do anything
Thanks for the suggestion but none of the Trendline approaches really work. The polynomial is the only practical trend method for my data, and it sends the line off to la-la land at the end of the first portion of the plotted line (which is only part of the data, up to the current time, (with historic data from the same hour forward but from yesterday being plotted thereafter as a dotted line formed from another series holding the historic part of the data). The result, while highly artistic, makes for a pretty funky chart. [:-)} I'm just surprised the function' option doesn't work, as my data is slightly stepped and I was hoping for just a little smoothing. The Y axis data is in 1 degree increments and the X axis data appears on each of the vertical tick lines https://lh3.googleusercontent.com/-7v5FK4COMfo/VI8pfNFztrI/Chc/hPkgNlzeE_Q/s1600/chrt.jpg To get the polynomial to work (ignoring the la-la land issue) would take about a 18 degree equation, (which is too much for the chart API). If smooth would do the little bit of interpalation needed, then I guess I'll just have to live with it, as is. [:-)} Thanks. -- 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+unsubscr...@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.
[visualization-api] Controlling Chart Bordering White Space?
The Line Chart I have generated seems to have excessing white space bordering it. I have been able to trim the top and left sides, but the bottom is excessive and although I have tried to change every chartArea option I can think of to try, I have not been successful. Here is an example, where the new Google Chart is displayed on a page with others (not yet converted). There is no html inserted spacing between the chart elements, so all the space is associated with the Google Chart itself. Here is the page code... body div id=chart_div style=width: 775px; height: 350; align:=left /div img src=logtemp/week.jpg alt=The Week Temps /br / br / img src=logtemp/month.jpg alt=The Month Temps / /body And here is the displayed result... https://lh3.googleusercontent.com/-wTB_cHHZ_JQ/VI2zFu-nBZI/Cgc/W-cusRo_ImE/s1600/2014-12-14_10-50-48.png The red boxed area is all excessing white space that I would like to trim as much as possible. Is this possible? Thanks. -- 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+unsubscr...@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.
Re: [visualization-api] Re: Empty Last Value in CSV data causes error
Sergey - As usual you just hit a Home Run again. I spent hours yesterday trying to discover such a method, with no luck. That does exactly what I wanted. BTW - If there is a link to a full *reference source* I could probably answer a lot of these issues myself, but I have only been able to find bits and pieces posted around and snippets of help at various forums. Thanks again. -ken b [:-)} -- 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+unsubscr...@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.
Re: [visualization-api] Re: Empty Last Value in CSV data causes error
Thanks Sergey - That is the best source I have found and have been using it since the beginning of my efforts BUT it is extremely difficult to find information therein. Unfortunately much of what I try to find, I never can. :-( Only when I searched on visibleInLegend in the Line Chart gallery entry did I find it buried in the Series Configuration Options. What would be really, really helpful, I suggest, is to have a full dictionary of all possible config options listed somewhere. When one is not familiar with what is possible, it is difficult to do myriad searches for things you have no clue as to what they might be called. With a full list, one can at least do visual searches and let the brain pattern recognize appropriate candidates.[:-)} -ken b On 12/12/2014 10:37 AM, 'Sergey Grabkovsky' via Google Visualization API wrote: We have full documentation for each one of our charts. You can find it at https://developers.google.com/chart/interactive/docs/gallery/linechart On Fri Dec 12 2014 at 10:36:25 AM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Sergey - As usual you just hit a Home Run again. I spent hours yesterday trying to discover such a method, with no luck. That does exactly what I wanted. BTW - If there is a link to a full *reference source* I could probably answer a lot of these issues myself, but I have only been able to find bits and pieces posted around and snippets of help at various forums. Thanks again. -ken b [:-)} -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/yqK6thg32Ks/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- 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+unsubscr...@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.
Re: [visualization-api] Re: Empty Last Value in CSV data causes error
I meant an ordered (alpha) listing by name of all options, formatters, properties, methods, etc applicable to a chart type. I envisioned just a list with no definitions (perhaps links to applicable knowledge sources). The more compact the list, the easier to visually search or use Find on to see and compare potential matches. Especially when one is trying to get started and not at all sure exactly where to look for something, it is very difficult to get to the right place to find the data. I spent probably three hours yesterday searching the web with every variation of legend, hiding text strings I could think of and never discovered the visibleInLegend approach. [:-)} On 12/12/2014 11:47 AM, 'Sergey Grabkovsky' via Google Visualization API wrote: What do you mean by full dictionary of all possible config options? That seems like exactly the thing that I linked to. Seems like you could always search either the page or the entire Google Charts Developers site for legend and find the option like that. On Fri Dec 12 2014 at 11:39:31 AM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Thanks Sergey - That is the best source I have found and have been using it since the beginning of my efforts BUT it is extremely difficult to find information therein. Unfortunately much of what I try to find, I never can. :-( Only when I searched on visibleInLegend in the Line Chart gallery entry did I find it buried in the Series Configuration Options. What would be really, really helpful, I suggest, is to have a full dictionary of all possible config options listed somewhere. When one is not familiar with what is possible, it is difficult to do myriad searches for things you have no clue as to what they might be called. With a full list, one can at least do visual searches and let the brain pattern recognize appropriate candidates. [:-)} -ken b On 12/12/2014 10:37 AM, 'Sergey Grabkovsky' via Google Visualization API wrote: We have full documentation for each one of our charts. You can find it at https://developers.google.com/chart/interactive/docs/gallery/linechart On Fri Dec 12 2014 at 10:36:25 AM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Sergey - As usual you just hit a Home Run again. I spent hours yesterday trying to discover such a method, with no luck. That does exactly what I wanted. BTW - If there is a link to a full *reference source* I could probably answer a lot of these issues myself, but I have only been able to find bits and pieces posted around and snippets of help at various forums. Thanks again. -ken b [:-)} -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/yqK6thg32Ks/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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
[visualization-api] Empty Last Value in CSV data causes error
After all the effort to get my charting done with 'certainty' flags controlling the chart line appearance, I have run into restrictions that are leading me to use the 'lineDashStyle property instead. To do so I need to create two data columns, one for solid and one for dashed lines for the same data. Since the solid lines appear in one column for the chart up to the current time, and dashed lines in another column thereafter, my solid column has no entries after the current time and that makes the last data value in the csv file empty. I am thus getting a Row x has 10 columns, but must have 11 error comment. Empty values in anything other than the last column are not a problem. How do I address this? -- 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+unsubscr...@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.
[visualization-api] Re: Empty Last Value in CSV data causes error
On Thursday, December 11, 2014 3:47:05 PM UTC-5, Ken Burkhalter wrote:
Empty values in anything other than the last column are not a problem.
Not sure why, but all of a sudden it seems to be working.
https://lh4.googleusercontent.com/-SbsjmG4lpBM/VIpDerT3--I/CgA/ll1jq1xdwJg/s1600/csv.png
Didn't change anything in the csv file I am aware of, but suddenly the
chart is drawing OK now. {Spooky}
But now I have a new issue.
In order to show different line styles before now() and after now() I broke
the data Table, for a given reading, into two columns where one column is
the before now data for a temperature, and the other is the data after now.
The csv data was illustrated above and this is the resulting chart...
https://lh6.googleusercontent.com/-TA92TKsQ8KA/VIpDoEDrnqI/CgI/Q5KSRKq_M_M/s1600/chart.png
Unfortunately this approach produces *TWO legend entries* for the same data
plot (the new and old values for the same device temp.
Is there a way to eliminate the redundant entry (in the chart above the old
(later) values for the Dwn temp (labeled 'cert').
This 2nd legend entry is not needed!
--
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+unsubscr...@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.
Re: [visualization-api] Re: Setting multiple DataTable columns to certainty
On Monday, December 8, 2014 5:24:39 PM UTC-5, Sergey wrote: Hi Ken, It's really difficult to read your code. Please *attach* the HTML and CSV file, or at least a sample of the CSV file, so that I can copy/paste them into my own environment. As for the discontinuity in your alert, it appears that Chrome truncates the text somewhere in the middle (look at the line for value 5.71). Sergey - My apologies. I misunderstood your prior request for attached code to mean insert it inline with the post, and not an image The *code* is attached this time! :-) Along with the *csv file* I have been using for testing. That should make any testing you do identical to my environment, which may make a difference because as far as I can determine I have the same code as you posted in the jsfiddle area but I am not getting any indication of the uncertainty dashed lined that should be showing after 14:00 hours on the chart. This is my current output chart... https://lh5.googleusercontent.com/-EzoC6JUBwas/VIc_KBvJCHI/Ce8/AdSs5xkP2A4/s1600/graph.png Note that, for testing purposes, in my code I have inserted in lines 19 an alert message to show the contents of the CSV table originally constructed by csv.toArrays, and then in lines 32-33 a reverse transformation from dataTable back to CSV to verify the integrity of the original translation. It appears that the true/false contents are correctly being handled, so I did not implement your suggested custom converter for the jQuery CSV parser. Hopefully with this exchange we can put the final nail in the coffin, and solve the last part of the mystery. [:-)} Thank you. -- 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+unsubscr...@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 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+unsubscr...@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. Time,Dwn,Cert,Mid,Cert,Out,Cert,Frez,Cert,Frig,Cert 0.00,71,true,72,true,29.3,true,2.3,true,26.2,true 0.17,71,true,72,true,28.4,true,2.9,true,25.7,true 0.33,71,true,71,true,29.3,true,3.4,true,31.1,true 0.50,71,true,71,true,29.3,true,4,true,33.4,true 0.67,71,true,71,true,28.4,true,4.4,true,35.2,true 0.83,71,true,71,true,28.4,true,5,true,36.5,true 1.00,71,true,71,true,27.5,true,5.2,true,38.3,true 1.17,71,true,71,true,27.5,true,5.7,true,39.7,true 1.33,71,true,71,true,27.5,true,5.9,true,40.6,true 1.50,71,true,71,true,27.5,true,2.2,true,41.5,true 1.67,70,true,71,true,26.6,true,0.1,true,41.9,true 1.83,71,true,71,true,27.5,true,-1.8,true,42.4,true 2.00,71,true,71,true,26.6,true,-2.9,true,42.4,true 2.17,71,true,71,true,26.6,true,-3.7,true,43.3,true 2.33,70,true,71,true,26.6,true,-4.3,true,43.7,true 2.50,70,true,71,true,26.6,true,-4.7,true,44.2,true 2.67,70,true,72,true,26.6,true,-5.4,true,44.6,true 2.83,70,true,72,true,26.6,true,-3.7,true,45.1,true 3.00,70,true,72,true,26.6,true,-1,true,45.1,true 3.17,70,true,72,true,26.6,true,0.5,true,45.1,true 3.33,70,true,72,true,26.6,true,1.5,true,45.1,true 3.50,70,true,72,true,25.7,true,2.2,true,35.2,true 3.67,70,true,72,true,25.7,true,3,true,31.6,true 3.83,70,true,72,true,25.7,true,3.5,true,29.3,true 4.00,70,true,71,true,25.7,true,4,true,28.4,true 4.17,70,true,71,true,25.7,true,4.4,true,27.5,true 4.33,70,true,71,true,25.7,true,4.9,true,26.6,true 4.50,70,true,71,true,25.7,true,5.3,true,26.2,true 4.67,70,true,71,true,25.7,true,5.7,true,25.7,true 4.83,71,true,71,true,25.7,true,5.2,true,25.3,true 5.00,71,true,71,true,25.7,true,1.2,true,25.3,true 5.17,71,true,71,true,25.7,true,-1.1,true,28.9,true 5.33,72,true,71,true,24.8,true,-2.2,true,32.9,true 5.50,71,true,71,true,25.7,true,-3.3,true,35.2,true 5.67,71,true,71,true,24.8,true,-4,true,36.1,true 5.83,71,true,71,true,24.8,true,-4.7,true,37,true 6.00,71,true,71,true,24.8,true,-5.1,true,37.9,true 6.17,71,true,72,true,25.7,true,-5.5,true,38.8,true 6.33,71,true,72,true,25.7,true,-2.4,true,40.1,true 6.50,71,true,72,true,25.7,true,-0.3,true,41,true 6.67,71,true,72,true,25.7,true,0.8,true,41.9,true 6.83,71,true,72,true,25.7,true,1.7,true,42.8,true 7.00,71,true,72,true,25.7,true,2.4,true,42.8,true 7.17,72,true,72,true,25.7,true,3.1,true,43.3,true 7.33,72,true,72,true,25.7,true,3.7,true,44.2,true 7.50,71,true,72,true,25.7,true,4.1,true,44.2,true
Re: [visualization-api] Re: Setting multiple DataTable columns to certainty
Sergey- It works perfectly. I went with your 3rd alternative using the Query as that feels a better approach to me too. I cannot thank you enough for all your efforts. I don't think I could have ever solved this on my own for a very long time. You have given me a solid foundation to now build on, and I am very excited to now begin to put it to good use. Thanks again! [:-)} -- 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+unsubscr...@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.
Re: [visualization-api] Re: Setting multiple DataTable columns to certainty
Sergey - I quick question. With the latest code I am getting these javaScript errors. I assume they are just advisory and nothing to worry about, as everything seems to be working fine... https://lh4.googleusercontent.com/-h-_LAL7MPQI/VIdtmh-Gd4I/CfM/PBbcBRF3PI4/s1600/err.png Thanks -- 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+unsubscr...@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.
Re: [visualization-api] Re: Setting multiple DataTable columns to certainty
Thanks. That does it!
[:-)}
On 12/9/2014 4:50 PM, 'Sergey Grabkovsky' via Google Visualization API
wrote:
Sorry, about that. I'd left some debugging code in. Please change the
version of visualization (google.load('visualization', *'0.1'*, ...))
back to either 1, 1.1, or 1.0.
On Tue Dec 09 2014 at 4:46:40 PM Ken Burkhalter
kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote:
Sergey -
I quick question. With the latest code I am getting these
javaScript errors.
I assume they are just advisory and nothing to worry about, as
everything seems to be working fine...
https://lh4.googleusercontent.com/-h-_LAL7MPQI/VIdtmh-Gd4I/CfM/PBbcBRF3PI4/s1600/err.png
Thanks
--
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+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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/1B-RwqbnE40/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
google-visualization-api+unsubscr...@googlegroups.com
mailto:google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to
google-visualization-api@googlegroups.com
mailto: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.
--
-ken burkhalter
--
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+unsubscr...@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.
[visualization-api] Re: Setting multiple DataTable columns to certainty
I think I figured out the issue here, and that was I needed to add a
Listener to delay the attempts to modify column properties until the
*visualization.**arrayToDataTable* effort was completed.
I thus modified my code (yellow highlight) as follows but now am getting an All
series on a given axis must be of the same data type× error that I can't
seem to resolve.
I think I'm getting close, but no cigar yet. :-(
Help.
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=http://jquery-csv.googlecode.com/git/src/jquery.csv.js;
/script
script
// Load the Visualization API from Google and set Listener
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
// this has to be a global function
function drawChart() {
// grab the CSV
$.get(temps.csv, function(csvString) {
// transform the CSV string into a 2-dimensional array
var chartTbl = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.
castToScalar});
alert (chartTbl[0]+ '\n' + chartTbl[1]);
//alert(chartTbl.join('\n'));
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(chartTbl);
// Define the 'certainty' columns
google.visualization.events.addListener(data, 'ready', function(event) {
data.setColumnProperty(2, 'role', 'certainty');
data.setColumnProperty(4, 'role', 'certainty');
data.setColumnProperty(6, 'role', 'certainty');
data.setColumnProperty(8, 'role', 'certainty');
data.setColumnProperty(8, 'type', 'boolean');
data.setColumnProperty(10,'role', 'certainty');
data.setColumnProperty(10,'type', 'boolean');
});
// set chart options
var start = -20;
var vTicks = [];
while (start = 100) {
vTicks.push(start);
start+=10;
}
var options = {
fontSize: 8,
legend: {position: 'right'},
colors: ['green', 'blue', 'red', 'green', 'yellow', 'gray'],
series: {
0: { lineDashStyle: [2, 2] }
},
hAxis: {
title: 'Time',
gridlines: {
count: 25,
},
minorGridlines: {
count: 3
},
},
vAxis: {
title: 'Temperature',
gridlines: {
count: 12,
},
minorGridlines: {
count: 4
},
ticks: vTicks
}
};
var chart = new google.visualization.LineChart(document.getElementById(
'chart_div'));
chart.draw(data,options);
});
}
/script
/head
body
div id=chart_div style=width: 800px; height: 300px;/div
/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 google-visualization-api+unsubscr...@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.
[visualization-api] setColumnProperties Syntax?
In order to use the 'certainty' feature of line chart plotting I was starting to use the following approach to set the chart DataTable properties after the input data array was converted to a data table. data.setColumnProperty(2, 'role', 'certainty'); data.setColumnProperty(2, 'type', 'boolean'); data.setColumnProperty(4, 'role', 'certainty'); data.setColumnProperty(4, 'type', 'boolean') ... Since there are a number of such columns to set, I discovered and would think that the setColumnProperties method would be more compact, however, despite hours of searching for documentation or examples of that approach I have been able to find virtually nothing. Can someone provide a syntax example of how the above multiple individual column properties can be combined using the *setColumnProperties* approach? Thanks. :-) -- 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+unsubscr...@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.
Re: [visualization-api] Re: Setting multiple DataTable columns to certainty
On Monday, December 8, 2014 9:57:38 AM UTC-5, Sergey wrote:
Hi Ken,
You had some pretty fundamental issues in the code that you attached in
your initial post. The one that drew my eye is your .setColumns call. With
the way you're calling it, it seems like you expect it to set the type:
'boolean', and role: 'certainty' on all of the columns, which is not what
it does. .setColumns *changes* the columns of the chart to a subset (plus
calculated columns). So when you wrote .setColumns([2, 4, 6, 8]), that
means that those columns would be the only ones in the data table. You
actually don't need to use a DataView or the ready event at all. In fact,
here is an example of the chart you want: http://jsfiddle.net/stjxwsju/
I think one of the issues you may be seeing is that the jQuery CSV parser
doesn't detect boolean values, which is completely reasonable. You might
have to override it, and use a custom converter.
Sergey -
I can't even begin to express my gratitude at your remarkable, and
non-judgement (at my struggling efforts) responses! You are a gem amongst
gems!
I modified my code substantially to attempt to incorporate your
suggestions, plus some additional thoughts.
This is my current code
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=http://jquery-csv.googlecode.com/git/src/jquery.csv.js;
/script
script
// Load the Visualization API from Google and set Listener
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
$.get(temps.csv, function(csvString) {
// transform the CSV string into a 2-dimensional array
dataArray = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.
castToScalar});
//alert (dataArray[0]+ '\n' + dataArray[1]);
//alert(chartTbl.join('\n'));
});
function drawChart() {
data = [
// columns: Time,Dwn,Cert,Mid,Cert,Out,Cert,Frez,Cert,Frig,Cert
{label: 'Time', type: 'number'}, //col 0
{label: 'Dwn', type: 'number'}, //col 1
{label: 'Cert', type: 'boolean'}, //col 2
{label: 'Mid', type: 'number'}, //col 3
{label: 'Cert', type: 'boolean'}, //col 4
{label: 'Out', type: 'number'}, //col 5
{label: 'Cert', type: 'boolean'}, //col 6
{label: 'Frez', type: 'number'}, //col 7
{label: 'Cert', type: 'boolean'}, //col 8
{label: 'Frig', type: 'number'}, //col 9
{label: 'Cert', type: 'boolean'}, //col 10
];
//alert(dataArray);
//alert(data);
data = google.visualization.arrayToDataTable(dataArray, true); //true
means the first row has data.
var csv = google.visualization.dataTableToCsv(data);
alert(csv);
// Define the columns...
data.setColumnProperty(0, 'role', 'domain');
data.setColumnProperty(2, 'role', 'certainty');
data.setColumnProperty(4, 'role', 'certainty');
data.setColumnProperty(6, 'role', 'certainty');
data.setColumnProperty(8, 'role', 'certainty');
data.setColumnProperty(10,'role', 'certainty');
// });
// set chart options
var start = -20;
var vTicks = [];
while (start = 100) {
vTicks.push(start);
start+=10;
}
var d = new Date()
var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',
'Saturday'];
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var day = days[d.getDay()];
var month = months[d.getMonth()];
var options = {
fontSize: 8,
legend: {position: 'right'},
// columns: Dwn, Mid, Out, Frez, Frig
//legend: 'true',
title: day,
series: {
// n: {color: '#1DC70E',lineWidth:4,lineDashStyle: [2, 2] },
0: { color: '#E30805' }, //Dwn
1: { color: '#F78F07' }, //Mid
2: { color: '#1DC70E' }, //Out
3: { color: '#0A5EFA' }, //Frez
4: { color: '#44B8F2' } //Frig
},
hAxis: {
title: 'Time',
gridlines: {
count: 25,
},
minorGridlines: {
count: 3
},
},
vAxis: {
title: 'Temperature',
gridlines: {
count: 12,
},
minorGridlines: {
count: 4
},
ticks: vTicks
}
};
var chart = new google.visualization.LineChart(document.getElementById(
'chart_div'));
chart.draw(data,options);
};
/script
/head
body
div id=chart_div style=width: 800px; height: 300px;/div
/body
/html
I am no longer getting any JavaScript Console errors and am getting
everything with the charts I desire EXCEPT still not getting the
'certainty' results expressed on the graph.
NOTE: I am not getting the labels either that I thought I set in the
drawChart definitions.
https://lh5.googleusercontent.com/-Z2WqLDlGUjc/VIYbb9_n9FI/CeE/wu0E6tDaOPY/s1600/graph.png
I seem to kinda be getting the csv data OK, as this is a partial dump of
the dataTableToCsv(data) reconstruction of what is feeding the chart...
https://lh3.googleusercontent.com/-af1mUI6BEOA/VIYdFqWGfKI/Cek/VGvhr9sZaOM/s1600/response.png
I am puzzled though, why the alert dump seems to be discontinuous.
It sure doesn't look right!
Anyway,
[visualization-api] Re: Setting multiple DataTable columns to certainty
OK
Solved the various errors but not getting the chart results desired.
Despite the use of *data.setColumnProperty(2, 'role', 'certainty');* for
col 2 (and 4,6,8,10) and a correct array and DataTable, none of the chart
lines change from certain to uncertain mode. On the chart below (output
from the code shown below it) the lines should all change at ~14 hours
where the input data changes, but it doesn't ...
https://lh3.googleusercontent.com/-UMaJi_rqyWo/VISX3ft5P0I/Cdk/UVCvbvJrmdQ/s1600/temps.png
Here is the data array contents around the change...
https://lh4.googleusercontent.com/-REnbrgSB-k8/VISYMhMZvaI/Cds/vAyQrJxoPwM/s1600/input.png
And here is the page code...
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=http://jquery-csv.googlecode.com/git/src/jquery.csv.js;
/script
script
// Load the Visualization API from Google and set Listener
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
// this has to be a global function
function drawChart() {
// grab the CSV
$.get(temps.csv, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.
castToScalar});
alert (arrayData[0]+ '\n' + arrayData[1]);
//alert(arrayData.join('\n'));
// this new DataTable object holds all the data
// Define the 'certainty' columns
var data = new google.visualization.arrayToDataTable(arrayData);
data.setColumnProperty(2, 'role', 'certainty');
data.setColumnProperty(4, 'role', 'certainty');
data.setColumnProperty(6, 'role', 'certainty');
data.setColumnProperty(8, 'role', 'certainty');
data.setColumnProperty(10,'role', 'certainty');
//Create a DataView from the data_table
//Set the first column of the dataview to format as a number, and return
the other columns as is.
//dataView.setColumns([{calc: function(data, row) { return
data.getFormattedValue(row, 0); }, type:'number'}, 1, 2, 3, 4, 5]);
// set chart options
var start = -20;
var vTicks = [];
while (start = 100) {
vTicks.push(start);
start+=10;
}
var options = {
fontSize: 8,
legend: {position: 'right'},
colors: ['green', 'blue', 'red', 'green', 'yellow', 'gray'],
series: {
0: { lineDashStyle: [2, 2] }
},
hAxis: {
title: 'Time',
gridlines: {
count: 25,
},
minorGridlines: {
count: 3
},
},
vAxis: {
title: 'Temperature',
gridlines: {
count: 12,
},
minorGridlines: {
count: 4
},
ticks: vTicks
}
};
var chart = new google.visualization.LineChart(document.getElementById(
'chart_div'));
chart.draw(data,options);
});
}
/script
/head
body
div id=chart_div style=width: 800px; height: 300px;/div
/body
/html
As far as I can tell I have faithfully replicated several examples I
discovered, but obviously I have something wrong.
Hopefully someone's sharp eyes will catch the error.
[:-)}
--
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+unsubscr...@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.
[visualization-api] Re: Setting multiple DataTable columns to certainty
Thought I might have discovered the problem, when I realized I had not set the 'type' property, so edited all the column *setColumnProperty* statements like this column 10 example... data.setColumnProperty(10,'role', 'certainty'); data.setColumnProperty(10,'type', 'boolean'); but it made no difference, and I'm running out of ideas! :-( -- 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+unsubscr...@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.
[visualization-api] Setting multiple DataTable columns to certainty
Y'all have been such an enormous help in getting me up to speed rapidly in
my new quest to learn and use javaScript that I'm hoping you can do it
again. [:-)}
In Google Charts, I am trying to replicate this chart appearance whose
software I am trying to replace for tighter integration into a web site.
https://lh3.googleusercontent.com/-3zopV--sHKU/VINwblwNi2I/Ccs/OixYtGxDkVc/s1600/temps.png
Note that the data after the current time is shown in dashed lines.
I am outputting a csv file (with more temps than shown in the image above)
that looks like this ...
https://lh4.googleusercontent.com/-YGVx1vwOgXk/VIN07a3bKaI/CdA/AmUpfnk2aHI/s1600/input.png
My challenge is to set the Type and Role attributes on columns 2,4,6,8,10
to reflect the nature of those columns as 'certainty' data, not temp
values, as I want to make the data point entries later than the 'current
time' dashed by using the certainty role: attribute.
I have spent a day trying to find documentation/examples oh how to do this
correctly, but all the examples use manually created data tables where the
column definitions can be set up before the Table is populated.
My Table is *already read in* and I must thus create the proper definitions
after the fact
My code is (full code page attached) ...
. . .
var dataView = new google.visualization.DataView(data);
dataView.setColumns([2, 4, 6, 8, 10 {
type: boolean,
role: certainty
}]);
. . .
Without the dataView 4 lines of code everything works, except I get this
error...
All series on a given axis must be of the same data type
With the dataView code lines I get a...
Uncaught SyntaxError: Unexpected token {
Can't get rid of the unexpected token error, and ALSO wondering if I am
doing this right anyway?! That is, is there an even easier way to change
the data appearance after a specific x-axis value (ie, later times) that
doesn't require all the 'certainty' column data to be inserted into the
data package?
Thanks for any help you can suggest.
[:-)}
--
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+unsubscr...@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.
text/html; charset=UTF-8; name="Chart.html": Unrecognized
Re: [visualization-api] Re: Charting a CVS File
Sergey- I can't tell you how much I appreciate your help and patience. This is my first real attempt to do anything more than superficial in JavaScript, so the learning curve is steep but I'm climbing the hill faster than I thought I could (especially with your help). Really surprised by the other domains issue, as I never would have imagined it applied on a call of a call. The page's HTML document is in the root directory of my web server along with everything it is interacting with. I would have never figured that I need to open that document any way other than just double-clicking on it. Once I changed my approach (including changing the html document name from !LineChartCode-test2.html to Chart.html) I also discovered that the only way I could get the script to run without errors, was if I used http://127.0.0.1/tempsD1.csv; to access my data file. A reference of http://192.168.1.90/tempsD1.csv; does not work, even though that is the web server's actuall IP designation. As a result of these changes, I can now execute the Graphing javascript file, but nothing at all happens. I then inserted a console.log() instruction at Line 28 (see attached document capture), but nothing appears on the Java Console (which is probably why I am not getting a chart displayed either). I can only, thus assume that for some reason the contents of my tempsD1.csv file is not getting read (although there are no errors posted in the Java Console). Do I have the proper Libraries loaded, and/or are there any obvious mistakes in my attempts to get the data to feed the Charting? Or, can you suggest some ways to debug the various Functions to see which might be failing? Thank you for your continued efforts to assist.[:-)} https://lh3.googleusercontent.com/-x7xgqw2ovFA/VIB0tUl9utI/CbM/eWq66aNxNFQ/s1600/chart.png -- 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+unsubscr...@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.
Re: [visualization-api] Re: Charting a CVS File
THANK YOU. THANK YOU. THANK YOU! All works now. :-) That must have been the issue plaguing me for some time. As soon as I deleted the redundant function, every thing worked perfectly. I think I should be in pretty darn good shape from here on out, as once something works at least a little bit, it is then possible to start building and testing on that foundation. Thanks again, and sorry about the screen image vs raw HTML. I was thinking that since the issue might have been with my csv file access, and you couldn't access it anyway that the image would work. Thanks for the suggestion, however, as from now on (if there are any more communications) I will be sure to send the HTML instead. :-) Thank you again, for your help. It was a very exciting moment when my graph appeared on the screen ! -ken b On 12/4/2014 10:19 AM, 'Sergey Grabkovsky' via Google Visualization API wrote: You are defining your handleQueryResponse function twice, once on line 17, and another time one line 43. JavaScript will only ever execute the last defined function (with the same name), so in this case, it will execute the one that does practically nothing. As an aside, in the future, could you please attach a raw HTML file, rather than a screenshot? It would be much easier for me to help you if I could just run your code or copy/paste it. On Thu Dec 04 2014 at 10:02:48 AM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Sergey- I can't tell you how much I appreciate your help and patience. This is my first real attempt to do anything more than superficial in JavaScript, so the learning curve is steep but I'm climbing the hill faster than I thought I could (especially with your help). Really surprised by the other domains issue, as I never would have imagined it applied on a call of a call. The page's HTML document is in the root directory of my web server along with everything it is interacting with. I would have never figured that I need to open that document any way other than just double-clicking on it. Once I changed my approach (including changing the html document name from !LineChartCode-test2.html to Chart.html) I also discovered that the only way I could get the script to run without errors, was if I used http://127.0.0.1/tempsD1.csv; to access my data file. A reference of http://192.168.1.90/tempsD1.csv; does not work, even though that is the web server's actuall IP designation. As a result of these changes, I can now execute the Graphing javascript file, but nothing at all happens. I then inserted a console.log() instruction at Line 28 (see attached document capture), but nothing appears on the Java Console (which is probably why I am not getting a chart displayed either). I can only, thus assume that for some reason the contents of my tempsD1.csv file is not getting read (although there are no errors posted in the Java Console). Do I have the proper Libraries loaded, and/or are there any obvious mistakes in my attempts to get the data to feed the Charting? Or, can you suggest some ways to debug the various Functions to see which might be failing? Thank you for your continued efforts to assist.[:-)} https://lh3.googleusercontent.com/-x7xgqw2ovFA/VIB0tUl9utI/CbM/eWq66aNxNFQ/s1600/chart.png -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/cnXYDr411tQ/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- 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
[visualization-api] Setting Chart Tick Marks vs Gridlines?
I am trying to achieve a chart like this where there are Tick marks on the Axis between the Grid lines https://lh5.googleusercontent.com/-d2MvwNzRNjY/VIDaZX2jHNI/Cb4/AuAe_Qfx8BU/s1600/temps.png But the results I am getting is this where I have control over the number of Grid Lines BUT NOT over the Tick marks... https://lh6.googleusercontent.com/-tIpfdVoL1-o/VIDa60M2arI/CcA/UfSdGNMNuWI/s1600/temps2.png My code is (see also attached file)... https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.pngIf the Tick Mark count (line 22) is increased to produce more ticks than grids it doesn't add ticks to the axis but increase the grid marks, which results in an incredibly cluttered chart. https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.pngHow do I get Axis Ticks, without also increasing the number of Grid lines? https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.png [:-)} https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.png -- 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+unsubscr...@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. text/html; charset=UTF-8; name="TestChart2.html": Unrecognized
Re: [visualization-api] Setting Chart Tick Marks vs Gridlines?
That works just fine! Thanks. [:-)} On 12/4/2014 5:23 PM, 'Sergey Grabkovsky' via Google Visualization API wrote: Unfortunately, we do not support adding tick lines like your example. However, we do support minor gridlines, which will let you add more gridlines without adding any more ticks. You can see my example of that here: http://jsfiddle.net/4npvuc06/ On Thu Dec 04 2014 at 5:17:47 PM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: I am trying to achieve a chart like this where there are Tick marks on the Axis between the Grid lines https://lh5.googleusercontent.com/-d2MvwNzRNjY/VIDaZX2jHNI/Cb4/AuAe_Qfx8BU/s1600/temps.png But the results I am getting is this where I have control over the number of Grid Lines BUT NOT over the Tick marks... https://lh6.googleusercontent.com/-tIpfdVoL1-o/VIDa60M2arI/CcA/UfSdGNMNuWI/s1600/temps2.png My code is (see also attached file)... https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.pngIf the Tick Mark count (line 22) is increased to produce more ticks than grids it doesn't add ticks to the axis but increase the grid marks, which results in an incredibly cluttered chart. https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.pngHow do I get Axis Ticks, without also increasing the number of Grid lines? https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.png [:-)} https://lh4.googleusercontent.com/-J5-CuXAAaag/VIDbc-0URjI/CcM/WbJTobkzc6U/s1600/code.png -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/q3uNRi9DleM/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- 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+unsubscr...@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.
[visualization-api] Re: Charting a CVS File
Thanks all for the replies.
I have no problem charting manually entered data [as you had suggest Jon],
my issue is in grabbing data from a file on my web server and charting it.
I tried your code suggestions Sergey, but am still coming up with a blank
screen.
My code is shown below, hopefully someone can spot what I am doing wrong,
rather than trying to give a verbal explanation of what to do.
Sergey note I was unsure what the values should be in the csvColumns
parameter. Since a search didn't reveal the definitions of the cvsColumns
parameter, I assumed that 'number' meant there were number values in each
column (which is true).
Does there need to be a 'number' value stated for each column in the data
array (a csv file with three [column] entries per line.) In which case my
my parameter should be csvColumns: ['number', 'number', 'number']
Also at the end of the csvColumns line, in your code sample, the code used
a , (coma), Should that have really been a semi-colon (;) ?
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=jquery.csv-0.71.js /script
script
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
/
var csvURL = http://192.168.1.90/tempsD1.txt;
var queryOptions = {
csvColumns: ['number', 'number' /* Or whatever the columns in the CSV file
are */],
csvHasHeader: false /* This should be false if your CSV file doesn't have a
header */
}
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
/
function drawChart() {
// set chart options
var options = {
title: Temperatures,
legend: 'none'
};
// create the chart object and draw it
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
/script
/head
body
div id=chart_div style=width: 900px; height: 500px;/div
/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 google-visualization-api+unsubscr...@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.
[visualization-api] Re: Charting a CVS File
Thanks for pointing out the syntax errors. After your extraordinary hint about the Java Console (which I didn't know about) debugging has speeded up considerably!!! :-) I found a few more errors (missing braces, undefined objects) and am now to the point where I am at least getting error comments posted to the screen. :-) I am now getting a Data Table not Defined ( Uncaught TypeError: Cannot read property 'Query' of undefined) on the following code ... *var query = new google.visualization.Query(csvURL, queryOptions);* Since your suggested undocumented dataTableFromCsv support code seemed to define the two Query parameters, I'm guessing I might be missing a Library Source reference. If so, please advise URL, else what might I be missing? Thanks. [:-)} -- 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+unsubscr...@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.
[visualization-api] Re: Charting a CVS File
In the event it helps. Here is the complete HTML page... https://lh3.googleusercontent.com/-X_i1Ax5xA4I/VH9u8QDKuoI/Cas/4N4f-WtnL9k/s1600/chart.png -- 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+unsubscr...@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.
[visualization-api] Re: Charting a CVS File
The error is thrown at Line 22 On Wednesday, December 3, 2014 3:14:12 PM UTC-5, Ken Burkhalter wrote: In the event it helps. Here is the complete HTML page... https://lh3.googleusercontent.com/-X_i1Ax5xA4I/VH9u8QDKuoI/Cas/4N4f-WtnL9k/s1600/chart.png -- 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+unsubscr...@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.
Re: [visualization-api] Re: Charting a CVS File
Gad, this is worse than getting teeth pulled [:-)} I made the changes (I think, I've included a view of the current code below) but now I am getting the following error which doesn't seem to jibe with reality ... n.I.js:266 Uncaught Error: CSV files on other domains are not supported. Please use sendMethod: 'xhr' or 'auto' and serve your .csv file from the same domain as this page. which makes absolutely no sense at all as the page's html document sits in the same directory as all the other web server pages (including index.html). Everything is definately on the same domain! Here https://lh5.googleusercontent.com/-_pRPAyym7k8/VH9976LuNII/Ca8/MJJVWF0e9TM/s1600/chart.png -- 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+unsubscr...@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.
Re: [visualization-api] Re: Charting a CVS File
Sergey - Is this what you wanted? Assuming you can view the code capture I posted in the previous message, you can see that I am NOT using any file protocols. Everything is nice Kosher HTTP tags. [:-)} On 12/3/2014 4:22 PM, 'Sergey Grabkovsky' via Google Visualization API wrote: You might be accessing your HTML file via the file:// protocol, which would be a different domain than http://. If that's not the problem, then it would be immensely helpful if you could post a screenshot of your browser window (with the address bar and everything) accessing the page with the developer tools open. On Wed Dec 03 2014 at 4:19:26 PM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Gad, this is worse than getting teeth pulled [:-)} I made the changes (I think, I've included a view of the current code below) but now I am getting the following error which doesn't seem to jibe with reality ... n.I.js:266 Uncaught Error: CSV files on other domains are not supported. Please use sendMethod: 'xhr' or 'auto' and serve your .csv file from the same domain as this page. which makes absolutely no sense at all as the page's html document sits in the same directory as all the other web server pages (including index.html). Everything is definately on the same domain! Here https://lh5.googleusercontent.com/-_pRPAyym7k8/VH9976LuNII/Ca8/MJJVWF0e9TM/s1600/chart.png -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/cnXYDr411tQ/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- 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+unsubscr...@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.
Re: [visualization-api] Re: Charting a CVS File
On 12/3/2014 4:32 PM, Ken Burkhalter wrote: Sergey - Let me do this over again so you are not mislead. The first screenshot, I just sent, was a capture from my desktop computer where I have been debugging, but the actual HTML code page runs on my web serverm which is what the capture below reflects Assuming you can view the code capture I posted in the previous message, you can see that I am NOT using any file protocols. Everything is nice Kosher HTTP tags. [:-)} On 12/3/2014 4:22 PM, 'Sergey Grabkovsky' via Google Visualization API wrote: You might be accessing your HTML file via the file:// protocol, which would be a different domain than http://. If that's not the problem, then it would be immensely helpful if you could post a screenshot of your browser window (with the address bar and everything) accessing the page with the developer tools open. On Wed Dec 03 2014 at 4:19:26 PM Ken Burkhalter kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote: Gad, this is worse than getting teeth pulled [:-)} I made the changes (I think, I've included a view of the current code below) but now I am getting the following error which doesn't seem to jibe with reality ... n.I.js:266 Uncaught Error: CSV files on other domains are not supported. Please use sendMethod: 'xhr' or 'auto' and serve your .csv file from the same domain as this page. which makes absolutely no sense at all as the page's html document sits in the same directory as all the other web server pages (including index.html). Everything is definately on the same domain! Here https://lh5.googleusercontent.com/-_pRPAyym7k8/VH9976LuNII/Ca8/MJJVWF0e9TM/s1600/chart.png -- 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+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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/cnXYDr411tQ/unsubscribe. To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com mailto:google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com mailto: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. -- -ken burkhalter -- -ken burkhalter -- 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+unsubscr...@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.
Re: [visualization-api] Charting a CVS File
Sergey-
Thank you very much for you reply. I truly appreciate it.
If you could go another step further it would be a GREAT help.
I am just starting to learn JavaScript, so run into brick walls
sometimes that are probably no brainers to experienced folks. :-)
My big challenge right now is related to your /...if //you have a URL
to your CSV file stored in a variable, call it csvUrl../. comment. I
have not been able to figure out how to access a .cvs data file stored
in the same folder as the page HTML file. I've tried to access it as
file:///C:\Users\keb\Desktop\Charting\GoogleCharts/tempData.csv but
that doesn't produce any results. I've also tried lots of variants of
that without success, so I don't know if the file reference method is
bad or the follow-on code is the problem.
If you could fill in or correct my // Fetch the CSV code segment (see
below in my original message) to show how to get the file and use it
with your suggested code (included in your reply), that would be a
powerful help to get me started.
If I can just get to the point where I can start to display a chart I
feel confident I can rapidly move to the final result I seek.
Thanks again for your assistance.
-ken b [:-)}
On 12/1/2014 11:48 AM, 'Sergey Grabkovsky' via Google Visualization API
wrote:
Hi Ken,
We actually have undocumented dataTableFromCsv support, which is built
into our Query object. Namely, we expose two new options: 'csvColumns'
(which should be an array of column types), and 'csvHasHeader' (which
determines whether the first row of the CSV should be interpreted as a
header row). The file will be interpreted as CSV if you specify the
csvColumns option, so it should be fairly straightforward. One thing
to keep in mind is that you can only load CSV files that are on the
same domain as your chart.
So, if you have a URL to your CSV file stored in a variable, call it
csvUrl. That means that we would do something like the following:
var queryOptions = {
csvColumns: ['number', 'number' /* Or whatever the columns in the CSV
file are */],
csvHasHeader: true /* This should be false if your CSV file doesn't
have a header */
}
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Draw your chart with the data table here.
}
On Sat Nov 29 2014 at 7:07:50 PM Ken Burkhalter
kenburkhal...@gmail.com mailto:kenburkhal...@gmail.com wrote:
I seldom get stumped, but sure am now.
Been trying for two days to figure out how to read a CVS Table
that contains Time increments in Col-1 (x-axis) and multiple
Temperature Columns-2 to 6 (y-axis) and make it ready to display
as a Line Chart in Google Charts.
Any sample code to read a local (CSV) data file and make it ready
to Chart (I think I have all the rest would be GREATLY appreciated.
This doesn't seem to work, although I thought it should (my data
file is tempData.csv in the same directory folder as the page HTML
code). All I get is a blank page displayed
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js;
/script
script src=jquery.csv-0.71.js /script
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Fetch the CSV
$.get(tempData.csv, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue:
$.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// For simplicity let's only look at one data column
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: Daily Temps
hAxis: {title: data.getColumnLabel(0), minValue:
data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue:
data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
// create the chart object and draw it
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
/script
/head
body
div id=chart_div style=width: 900px; height: 500px;/div
/body
/html
Thanks for any help anyone can offer.
--
You received this message because you are subscribed to the Google
Groups
[visualization-api] Charting a CVS File
I seldom get stumped, but sure am now.
Been trying for two days to figure out how to read a CVS Table that
contains Time increments in Col-1 (x-axis) and multiple Temperature
Columns-2 to 6 (y-axis) and make it ready to display as a Line Chart in
Google Charts.
Any sample code to read a local (CSV) data file and make it ready to Chart
(I think I have all the rest would be GREATLY appreciated.
This doesn't seem to work, although I thought it should (my data file is
tempData.csv in the same directory folder as the page HTML code). All I
get is a blank page displayed
html
head
script src=https://www.google.com/jsapi; /script
script src=http://code.jquery.com/jquery-1.10.1.min.js; /script
script src=jquery.csv-0.71.js /script
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Fetch the CSV
$.get(tempData.csv, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue:
$.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// For simplicity let's only look at one data column
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: Daily Temps
hAxis: {title: data.getColumnLabel(0), minValue:
data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue:
data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
// create the chart object and draw it
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
/script
/head
body
div id=chart_div style=width: 900px; height: 500px;/div
/body
/html
Thanks for any help anyone can offer.
--
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+unsubscr...@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.
