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.
