I managed to solve the problem finally (and of course it was something that
should've been obvious enough to me). I had to move this line of code...
*script.Append("divGraphContainer.innerHTML=\"" + divHTML.ToString() +
"\";\n");*
... to appear before this line...
*scriptViz.Append("new
google.visualization.LineChart(document.getElementById('divGraph" +
counter.ToString() + "')).draw(view" + counter.ToString() + ", {curveType:
'none', width: 600, height: 300, " + hAxis + ", " + vAxis + "});\n");*
Naturally when the google.visualization.LineChart() method is called, any
div that is referenced in that call must have already been rendered on the
page.
- Robert -
On Friday, October 18, 2013 8:17:17 AM UTC-5, asgallant wrote:
>
> Well, if that's not the problem, then I'm stumped. Can you post a link to
> the page so I can see it for myself?
>
> On Friday, October 18, 2013 12:36:59 AM UTC-4, Robert Mayer wrote:
>>
>> That must be just a copy-paste error. Since these div tags are being
>> created in a loop of code, there's no way only one of them would be missing
>> the id attribute.
>>
>> On Thursday, October 17, 2013 8:35:36 AM UTC-5, asgallant wrote:
>>>
>>> The only problem I see with the string is that the graph5 div is missing
>>> an "i" from the "id" parameter, which is causing graph5 to fail:
>>>
>>> <div d='divGraph5'>
>>>
>>> should be
>>>
>>> <div id='divGraph5'>
>>>
>>> when I replaced the divs in your jsfiddle with that bit of code, it
>>> worked: http://jsfiddle.net/asgallant/fERP6/13/
>>>
>>> On Thursday, October 17, 2013 1:18:19 AM UTC-4, Robert Mayer wrote:
>>>>
>>>> Unfortunately, this change didn't solve my problem. I would really like
>>>> to find a more elegant solution than hard-coding 50+ div tags on my page
>>>> just in case I may need them.
>>>>
>>>> On Wednesday, October 16, 2013 9:54:06 AM UTC-5, Robert Mayer wrote:
>>>>>
>>>>> divGraphContainer.innerHTML="<div id='divGraph1'></div><div
>>>>> id='divGraph2'></div><div id='divGraph3'></div><div
>>>>> id='divGraph4'></div><div d='divGraph5'></div><div
>>>>> id='divGraph6'></div><div id='divGraph7'></div><div
>>>>> id='divGraph8'></div><div id='divGraph9'></div><div
>>>>> id='divGraph10'></div>";
>>>>>
>>>>> Now I think I may be seeing what the problem is. I think that line
>>>>> needs to look like this:
>>>>>
>>>>> *document.getElementById("divGraphContainer").innerHTML= ...*
>>>>> *
>>>>> *
>>>>> I'll have to update my code this evening and give that a try.
>>>>>
>>>>> - Robert -
>>>>>
>>>>> On Wednesday, October 16, 2013 9:40:41 AM UTC-5, asgallant wrote:
>>>>>>
>>>>>> What does this line:
>>>>>>
>>>>>> script.Append("divGraphContainer.innerHTML=\"" + divHTML.ToString() +
>>>>>> "\";\n");
>>>>>>
>>>>>> output in your javascript?
>>>>>>
>>>>>> On Wednesday, October 16, 2013 10:23:17 AM UTC-4, Robert Mayer wrote:
>>>>>>>
>>>>>>> The javascript that is produced looks exactly like what is used in
>>>>>>> the jsfiddle link I provided earlier. The only difference is with the
>>>>>>> HTML
>>>>>>> where instead of having 10 pre-existing div tags on the page, I'm
>>>>>>> trying to
>>>>>>> create them dynamically and emit them to the page using javascript (see
>>>>>>> my
>>>>>>> 4th line of code from the bottom of my example).
>>>>>>>
>>>>>>> - Robert -
>>>>>>>
>>>>>>> On Wednesday, October 16, 2013 8:56:01 AM UTC-5, asgallant wrote:
>>>>>>>>
>>>>>>>> What does this script produce for javascript/HTML?
>>>>>>>>
>>>>>>>> On Wednesday, October 16, 2013 12:55:37 AM UTC-4, Robert Mayer
>>>>>>>> wrote:
>>>>>>>>>
>>>>>>>>> I'm dynamically creating everything in an ASP.NET app during the
>>>>>>>>> page load. You can see the resulting javascript (which works) in the
>>>>>>>>> jsfiddle link in my previous reply. What I'm trying to do is while
>>>>>>>>> I'm
>>>>>>>>> looping through my data building each array of data, create an HTML
>>>>>>>>> string
>>>>>>>>> of corresponding div tags and then pass it to the innerHTML attribute
>>>>>>>>> of my
>>>>>>>>> container div (which already exists on the page at design time).
>>>>>>>>> Here's the
>>>>>>>>> whole routine:
>>>>>>>>> *
>>>>>>>>> *
>>>>>>>>>
>>>>>>>>>> * private void RenderGraphs(List<BLL.Athlete> athletes)
>>>>>>>>>> {
>>>>>>>>>> StringBuilder script = new StringBuilder();
>>>>>>>>>> StringBuilder scriptData = new StringBuilder();
>>>>>>>>>> StringBuilder scriptViews = new StringBuilder();
>>>>>>>>>> StringBuilder scriptViz = new StringBuilder();
>>>>>>>>>> script.Append("<script type='text/javascript' src='
>>>>>>>>>> https://www.google.com/jsapi'></script>\n");
>>>>>>>>>> script.Append("<script type='text/javascript' src='
>>>>>>>>>> http://momentjs.com/downloads/moment-with-langs.js
>>>>>>>>>> '></script>\n");
>>>>>>>>>> script.Append("<script type='text/javascript'>\n");
>>>>>>>>>> script.Append("\t");
>>>>>>>>>> script.Append("google.load('visualization', '1.1',
>>>>>>>>>> {packages: ['corechart']});\n");
>>>>>>>>>> script.Append("\t");
>>>>>>>>>>
>>>>>>>>>> script.Append("google.setOnLoadCallback(drawVisualization);\n\n");
>>>>>>>>>> script.Append("\tfunction drawVisualization() {\n");
>>>>>>>>>> script.Append("\t\t");
>>>>>>>>>> script.Append("function getTooltip(dataTable, rowNum)
>>>>>>>>>> {\n");
>>>>>>>>>> script.Append("\t\t\t");
>>>>>>>>>> script.Append("var min =
>>>>>>>>>> Math.floor(dataTable.getValue(rowNum, 1)[2]/60);\n");
>>>>>>>>>> script.Append("\t\t\t");
>>>>>>>>>> script.Append("var sec = dataTable.getValue(rowNum,
>>>>>>>>>> 1)[2] - (min * 60);\n");
>>>>>>>>>> script.Append("\t\t\t");
>>>>>>>>>> script.Append("var ms = dataTable.getValue(rowNum,
>>>>>>>>>> 1)[3];\n");
>>>>>>>>>> script.Append("\t\t\t");
>>>>>>>>>> script.Append("var newtime = new moment([1900, 1, 1,
>>>>>>>>>> 0, min, sec, ms]);\n");
>>>>>>>>>> script.Append("\t\t\t");
>>>>>>>>>> script.Append("return newtime.format('m:ss.SS');\n");
>>>>>>>>>> script.Append("\t\t}\n\n");
>>>>>>>>>> StringBuilder divHTML = new StringBuilder();
>>>>>>>>>> int counter = 0;
>>>>>>>>>> foreach (BLL.Athlete athlete in athletes)
>>>>>>>>>> {
>>>>>>>>>> if (athlete.History != null &&
>>>>>>>>>> athlete.History.Count > 1)
>>>>>>>>>> {
>>>>>>>>>> counter++; // Increment athlete counter
>>>>>>>>>> divHTML.Append("<div id='divGraph" +
>>>>>>>>>> counter.ToString() + "' />");
>>>>>>>>>> scriptData.Append("\t\tvar data" +
>>>>>>>>>> counter.ToString() + " = google.visualization.arrayToDataTable([\n");
>>>>>>>>>> scriptData.Append("\t\t\t['Date', '" +
>>>>>>>>>> athlete.FullName + "'],");
>>>>>>>>>> // Build array of data points
>>>>>>>>>> StringBuilder dataPoints = new
>>>>>>>>>> StringBuilder();
>>>>>>>>>> double floor = 999999;
>>>>>>>>>> foreach (IPerformance p in athlete.History)
>>>>>>>>>> {
>>>>>>>>>> string shortDate =
>>>>>>>>>> String.Format("{0:M/d}", p.PerformanceDate);
>>>>>>>>>> if (dataPoints.Length > 0)
>>>>>>>>>> dataPoints.Append(",");
>>>>>>>>>> double secs =
>>>>>>>>>> Math.Truncate(p.ResultValue);
>>>>>>>>>> int ms = Convert.ToInt32((p.ResultValue -
>>>>>>>>>> secs) * 1000);
>>>>>>>>>> dataPoints.Append("\n\t\t\t['" +
>>>>>>>>>> shortDate + "', [0, 0, " + secs.ToString() + ", " + ms.ToString() +
>>>>>>>>>> "]]");
>>>>>>>>>> if (p.ResultValue < floor)
>>>>>>>>>> floor = p.ResultValue;
>>>>>>>>>> }
>>>>>>>>>> scriptData.Append(dataPoints.ToString());
>>>>>>>>>> scriptData.Append("\n\t\t]);\n\n");
>>>>>>>>>> scriptViews.Append("\t\t");
>>>>>>>>>> scriptViews.Append("var view" +
>>>>>>>>>> counter.ToString() + " = new google.visualization.DataView(data" +
>>>>>>>>>> counter.ToString() + ");\n");
>>>>>>>>>> scriptViews.Append("\t\t");
>>>>>>>>>> scriptViews.Append("view" +
>>>>>>>>>> counter.ToString() + ".setColumns([0, 1, {\n");
>>>>>>>>>> scriptViews.Append("\t\t\t");
>>>>>>>>>> scriptViews.Append("calc: getTooltip,\n");
>>>>>>>>>> scriptViews.Append("\t\t\t");
>>>>>>>>>> scriptViews.Append("type: 'string',\n");
>>>>>>>>>> scriptViews.Append("\t\t\t");
>>>>>>>>>> scriptViews.Append("role: 'tooltip'\n");
>>>>>>>>>> scriptViews.Append("\t\t}]);\n\n");
>>>>>>>>>> string minValue = (floor * .9).ToString("N0");
>>>>>>>>>> string hAxis = "hAxis: { title: 'Date' }";
>>>>>>>>>> string vAxis = "vAxis: { title: 'Time',
>>>>>>>>>> minValue: " + minValue + ", format: 'm:ss'}";
>>>>>>>>>> scriptViz.Append("\t\t");
>>>>>>>>>> scriptViz.Append("new
>>>>>>>>>> google.visualization.LineChart(document.getElementById('divGraph" +
>>>>>>>>>> counter.ToString() + "')).draw(view" + counter.ToString() + ",
>>>>>>>>>> {curveType:
>>>>>>>>>> 'none', width: 600, height: 300, " + hAxis + ", " + vAxis + "});\n");
>>>>>>>>>> }
>>>>>>>>>> }
>>>>>>>>>> // Write out data arrays
>>>>>>>>>> script.Append(scriptData.ToString());
>>>>>>>>>> // Write out data views
>>>>>>>>>> script.Append(scriptViews.ToString());
>>>>>>>>>> // Write out calls to LineChart method
>>>>>>>>>> script.Append(scriptViz.ToString());
>>>>>>>>>> // Create new div for each of the graphs
>>>>>>>>>> script.Append("divGraphContainer.innerHTML=\"" +
>>>>>>>>>> divHTML.ToString() + "\";\n");
>>>>>>>>>> script.Append("\t}\n");
>>>>>>>>>> script.Append("</script>");
>>>>>>>>>>
>>>>>>>>>> Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
>>>>>>>>>> "GoogleChartsScript", script.ToString(), false);
>>>>>>>>>> }*
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tuesday, October 15, 2013 9:35:25 AM UTC-5, asgallant wrote:
>>>>>>>>>>
>>>>>>>>>> Post the code you are using that generates the errors (or a
>>>>>>>>>> jsfiddle example).
>>>>>>>>>>
>>>>>>>>>> On Tuesday, October 15, 2013 1:19:00 AM UTC-4, Robert Mayer wrote:
>>>>>>>>>>>
>>>>>>>>>>> I've finally managed to get the tooltip formatting the way I
>>>>>>>>>>> want it and also to render a series of graphs based on a series of
>>>>>>>>>>> data
>>>>>>>>>>> sets: http://jsfiddle.net/fERP6/12/
>>>>>>>>>>>
>>>>>>>>>>> However, the one thing I'm currently hung up on is trying to
>>>>>>>>>>> make it work when I render the divs for the graphs dynamically,
>>>>>>>>>>> which
>>>>>>>>>>> always results in a "JavaScript runtime error: Container is not
>>>>>>>>>>> defined"
>>>>>>>>>>> error. Any thoughts on this?
>>>>>>>>>>>
>>>>>>>>>>> - Robert -
>>>>>>>>>>>
>>>>>>>>>>> On Tuesday, October 8, 2013 6:49:37 AM UTC-5, trybka wrote:
>>>>>>>>>>>>
>>>>>>>>>>>> Try http://jsfiddle.net/fERP6/7/ (apparently some of the
>>>>>>>>>>>> timeofday improvements are in the "testing" release, 1.1)
>>>>>>>>>>>>
>>>>>>>>>>>> What do you mean by ticks in this case?
>>>>>>>>>>>>
>>>>>>>>>>>> Thomas Rybka | Software Engineer | [email protected] | GViz
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> On Tue, Oct 8, 2013 at 7:29 AM, Robert Mayer <[email protected]
>>>>>>>>>>>> > wrote:
>>>>>>>>>>>>
>>>>>>>>>>>>> One other thought... would it be advantageous at all if I were
>>>>>>>>>>>>> to supply my data values in ticks rather than seconds and
>>>>>>>>>>>>> fractions?
>>>>>>>>>>>>>
>>>>>>>>>>>>> - Robert -
>>>>>>>>>>>>>
>>>>>>>>>>>>> On Monday, October 7, 2013 3:58:31 PM UTC-5, trybka wrote:
>>>>>>>>>>>>>
>>>>>>>>>>>>>> You could use timeofday for your specification of the time.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> I tried it, and it seems to work well, but the tick
>>>>>>>>>>>>>> calculation doesn't seem to fall on ms boundaries, so the
>>>>>>>>>>>>>> fractional
>>>>>>>>>>>>>> seconds
>>>>>>>>>>>>>> are all 000.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Sadly, the tooltips are formatted a little strange, so I
>>>>>>>>>>>>>> overrode the tooltips to get something a little nicer (using
>>>>>>>>>>>>>> Moment.js
>>>>>>>>>>>>>> http://momentjs.com/**).
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Here's a jsfiddle that munged your data to put the seconds
>>>>>>>>>>>>>> and ms in an array, and added a tooltip column, and axis
>>>>>>>>>>>>>> formatting:
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> http://jsfiddle.net/fERP6/6/
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> On Sun, Oct 6, 2013 at 7:32 PM, asgallant <
>>>>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> There is not built-in conversion for seconds to "mm:ss.SS" -
>>>>>>>>>>>>>>> you will have to do so manually by calculating the appropriate
>>>>>>>>>>>>>>> string value
>>>>>>>>>>>>>>> and setting the formatted value of the cell to that value.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> On Sunday, October 6, 2013 5:45:25 PM UTC-4, Robert Mayer
>>>>>>>>>>>>>>> wrote:
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> I'm using the following code to render a line chart:
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> function drawVisualization() {
>>>>>>>>>>>>>>>>> // Create and populate the data table.
>>>>>>>>>>>>>>>>> var data = google.visualization.**arrayToDa**taTable([
>>>>>>>>>>>>>>>>> ['Date', 'Michelle 800m'],
>>>>>>>>>>>>>>>>> ['3/16', 163.84],
>>>>>>>>>>>>>>>>> ['4/13', 161.69],
>>>>>>>>>>>>>>>>> ['4/20', 162],
>>>>>>>>>>>>>>>>> ['5/4', 154.22],
>>>>>>>>>>>>>>>>> ['6/1', 155.46],
>>>>>>>>>>>>>>>>> ['6/8', 153],
>>>>>>>>>>>>>>>>> ['6/15', 151.22],
>>>>>>>>>>>>>>>>> ['6/22', 156.45],
>>>>>>>>>>>>>>>>> ['6/29', 153.45],
>>>>>>>>>>>>>>>>> ['7/31', 153.95]
>>>>>>>>>>>>>>>>> ]);
>>>>>>>>>>>>>>>>> // Create and draw the visualization.
>>>>>>>>>>>>>>>>> new google.visualization.**LineChart**(document.**
>>>>>>>>>>>>>>>>> getElementById('**visualization'**)).
>>>>>>>>>>>>>>>>> draw(data, {curveType: "none",
>>>>>>>>>>>>>>>>> width: 500, height: 250,
>>>>>>>>>>>>>>>>> vAxis: {minValue: 140}}
>>>>>>>>>>>>>>>>> );
>>>>>>>>>>>>>>>>> }
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Each data point on the vAxis represents time elapsed in
>>>>>>>>>>>>>>>> seconds. The data points are graphed correctly, but the
>>>>>>>>>>>>>>>> problem is that for
>>>>>>>>>>>>>>>> times in excess of one minute, the typical convention is to
>>>>>>>>>>>>>>>> display it
>>>>>>>>>>>>>>>> in the format, mm:ss.ss. How can I make this conversion for
>>>>>>>>>>>>>>>> display purposes only?
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> - Robert -
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> --
>>>>>>>>>>>>>>> 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+**
>>>>>>>>>>>>>>> [email protected].
>>>>>>>>>>>>>>> To post to this group, send email to google-visua...@**
>>>>>>>>>>>>>>> googlegroups.com.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Visit this group at http://groups.google.com/**
>>>>>>>>>>>>>>> group/google-visualization-api<http://groups.google.com/group/google-visualization-api>
>>>>>>>>>>>>>>> **.
>>>>>>>>>>>>>>> For more options, visit https://groups.google.com/**
>>>>>>>>>>>>>>> groups/opt_out <https://groups.google.com/groups/opt_out>.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> --
>>>>>>>>>>>>> You received this message because you are subscribed to the
>>>>>>>>>>>>> Google Groups "Google Visualization API" group.
>>>>>>>>>>>>> To unsubscribe from this group and stop receiving emails from
>>>>>>>>>>>>> it, send an email to
>>>>>>>>>>>>> [email protected].
>>>>>>>>>>>>> To post to this group, send email to
>>>>>>>>>>>>> [email protected].
>>>>>>>>>>>>> Visit this group at
>>>>>>>>>>>>> http://groups.google.com/group/google-visualization-api.
>>>>>>>>>>>>> For more options, visit
>>>>>>>>>>>>> https://groups.google.com/groups/opt_out.
>>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
