Run the ruby project, open the page in a browser, view the source, and post
it here so I can test what is happening.
On Monday, September 16, 2013 10:15:35 AM UTC-4, Zeh Arthur Ortiz wrote:
>
> chart.draw(data, {width: 700, height: 240, title: data_type + ' por Mês',
> hAxis: {title: 'Meses', titleTextStyle: {color: '#FF0000'}} });
>
> If I create an HTML page with the charts code the result is the file
> untitled 2.png
> But in my ruby project, when execute the code the result is the file
> untitled 3.png
>
>
>
> Em segunda-feira, 16 de setembro de 2013 10h52min37s UTC-3, Sergey
> escreveu:
>>
>> Hi, I'm a little confused about what's going wrong for you. I pasted your
>> html, and it looks like an area chart to me. Is there something in
>> particular that you're seeing that's wrong with it? Or are you not seeing
>> it at all somehow?
>>
>> - Sergey
>>
>>
>> On Mon, Sep 16, 2013 at 9:47 AM, Zeh Arthur Ortiz
>> <[email protected]>wrote:
>>
>>> the google chart is not drawing the options
>>>
>>> I don't know why, but the options is not working at my page, apparently
>>> the html generated is not correct
>>> my code is
>>>
>>> <article id="user_report" class="full">
>>> <h1>Relatórios Consolidados</h1>
>>>
>>> <form method="GET" action="/admin/users/report">
>>> <ul>
>>> <li>
>>> Agrupar:
>>> <select name="data_type">
>>> <option value="session">Sessões</option>
>>> <option value="user">Usuários</option>
>>> <option value="hours">Horas de Uso</option>
>>> </select>
>>> </li>
>>> <li>
>>> <input type="checkbox" name="just_acurate_data" checked="" /> Apenas
>>> dados partir de 18/06/2012
>>> </li>
>>> </ul>
>>> </form>
>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>> "></script>
>>> <script type="text/javascript">
>>> var just_accurate_data = function(array) {
>>> var just_accurate = [];
>>> $(array).each(function() {
>>> var temp = this[0].split('/');
>>> var date = new Date(parseInt(temp[2]), parseInt(temp[1]) - 1,
>>> parseInt(temp[0]));
>>> if (date >= new Date(2012, 5, 18))
>>> just_accurate.push(this);
>>>
>>> });
>>>
>>> return just_accurate;
>>> };
>>>
>>> var just_accurate_data_monthly = function(array) {
>>> var just_accurate = [];
>>> $(array).each(function() {
>>> var temp = this[0].split('/');
>>> var date = new Date(parseInt(temp[1]), parseInt(temp[0]),1);
>>> if (date >= new Date(2012, 6, 1))
>>> just_accurate.push(this);
>>>
>>> });
>>>
>>> return just_accurate;
>>> };
>>> var set_chart_variables = function() {
>>> var all_data;
>>> data_type = $("article#user_report form select[name='data_type']").val();
>>> if (data_type == "session") {
>>> all_data = session_data;
>>> data_type = "Sessões abertas"
>>> } else if (data_type == "user") {
>>> all_data = user_data;
>>> data_type = "Usuários"
>>> } else if (data_type == "hours") {
>>> all_data = usage_data;
>>> data_type = "Horas de uso"
>>> }
>>> if ($("article#user_report form :checkbox").is(":checked")) {
>>> monthly_data = just_accurate_data_monthly(all_data.monthly);
>>> } else {
>>> monthly_data = all_data.monthly;
>>> }
>>> };
>>>
>>> $(["select", ":checkbox"]).each(function(){
>>> $("article#user_report form " + this).change(function(){
>>> set_chart_variables();
>>> drawChartMonth();
>>> });
>>> });
>>> <% data_by_month = DesktopSession.data_created_by_month.to_a %>
>>> var session_data = {
>>> monthly : <%= raw to_google_array(data_by_month, "%m/%Y", "count") %>,
>>> };
>>> var user_data = {
>>> monthly : <%= raw to_google_array(data_by_month, "%m/%Y",
>>> "uniq_count") %>,
>>> };
>>> var usage_data = {
>>> monthly : <%= raw to_google_array(data_by_month, "%m/%Y", "hours") %>,
>>> };
>>> var daily_data, monthly_data, weekly_data, data_type;
>>> set_chart_variables();
>>> google.load("visualization", "1", {packages:["corechart"]});
>>> google.setOnLoadCallback(drawChartMonth);
>>>
>>>
>>> function drawChartMonth() {
>>> var data = new google.visualization.DataTable();
>>> data.addColumn('string', 'Data');
>>> data.addColumn('number', data_type);
>>> data.addRows(monthly_data);
>>> var chart = new
>>> google.visualization.AreaChart(document.getElementById('chart_month'));
>>> chart.draw(data, {width: 700, height: 240, title: data_type + '
>>> por Mês',
>>> hAxis: {title: 'Meses', titleTextStyle: {color: '#FF0000'}} });
>>> }
>>>
>>> </script>
>>> <div id="charts">
>>> <div id="chart_month"></div>
>>> </div>
>>> </article>
>>>
>>>
>>> the HTML generated is
>>>
>>> <div id="chart_month" style="position: relative;"><div dir="ltr"
>>> style="position: relative; width: 700px; height: 240px;"><div
>>> style="position: absolute; left: 0px; top: 0px; width: 100%; height:
>>> 100%;"><svg width="700" height="240" style="overflow: hidden;"><defs
>>> id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="94" y="46"
>>> width="512" height="148"></rect></clipPath></defs><rect x="0" y="0"
>>> width="700" height="240" stroke="none" stroke-width="0"
>>> fill="#ffffff"></rect><g><rect x="618" y="46" width="12" height="12"
>>> stroke="none" stroke-width="0" fill-opacity="0"
>>> fill="#ffffff"></rect><g><rect x="618" y="46" width="12" height="12"
>>> stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><rect
>>> x="618" y="46" width="12" height="12" stroke="none" stroke-width="0"
>>> fill="#3366cc"></rect></g></g><g><rect x="94" y="46" width="512"
>>> height="148" stroke="none" stroke-width="0" fill-opacity="0"
>>> fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect
>>> x="94" y="193" width="512" height="1" stroke="none" stroke-width="0"
>>> fill="#cccccc"></rect><rect x="94" y="156" width="512" height="1"
>>> stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="94" y="120"
>>> width="512" height="1" stroke="none" stroke-width="0"
>>> fill="#cccccc"></rect><rect x="94" y="83" width="512" height="1"
>>> stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="94" y="46"
>>> width="512" height="1" stroke="none" stroke-width="0"
>>> fill="#cccccc"></rect></g><g><g><path
>>> d="M94.5,193.5L94.5,156.75L137.08333333333334,121.32300000000001L179.66666666666669,155.427L222.25,145.578L264.83333333333337,117.1335L307.4166666666667,129.996L350,81.85350000000001L392.58333333333337,121.176L435.1666666666667,155.721L477.75,162.8505L520.3333333333334,145.6515L562.9166666666667,101.25750000000001L605.5,119.412L605.5,193.5Z"
>>>
>>> stroke="none" stroke-width="0" fill-opacity="0.3"
>>> fill="#3366cc"></path></g></g><g><rect x="94" y="193" width="512"
>>> height="1" stroke="none" stroke-width="0"
>>> fill="#333333"></rect></g><g><path
>>> d="M94.5,156.75L137.08333333333334,121.32300000000001L179.66666666666669,155.427L222.25,145.578L264.83333333333337,117.1335L307.4166666666667,129.996L350,81.85350000000001L392.58333333333337,121.176L435.1666666666667,155.721L477.75,162.8505L520.3333333333334,145.6515L562.9166666666667,101.25750000000001L605.5,119.412"
>>>
>>> stroke="#3366cc" stroke-width="2" fill-opacity="1"
>>> fill="none"></path></g></g><g></g></g><g></g></svg></div></div><div
>>> style="display: none; position: absolute; top: 250px; left: 710px;
>>> white-space: nowrap; font-family: Arial; font-size:
>>> 12px;">.</div><div></div></div>
>>>
>>> PS: it is in a ruby on rails project
>>>
>>> --
>>> 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.
