Wilson Rogério Braun

unread,

Mar 6, 2015, 9:09:40 AM3/6/15

to google-visua...@googlegroups.com

Alguém tem alguma sugestão?
Controler:
    public ActionResult Peso()
        {
            var dia = db.spPesoEvolucao().ToList();
            var a = dia.Select(x => new { x.data_semanal, x.peso_kg });
            return Json(a, JsonRequestBehavior.AllowGet);
        }
View:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Script-->
    <script type="text/javascript">
        google.load('visualization', '1', { 'packages': ['corechart'] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.get('/Programa/Peso', {},
                function (data) {
                    var tdata = new google.visualization.DataTable();
                    tdata.addColumn('date', 'data_semanal');
                    tdata.addColumn('number', 'peso_kg');
                    //tdata.addColumn({ type: 'string', role: 'annotation' });
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].data_semanal != null)
                            tdata.addRow([data[i].data_semanal, data[i].peso_kg]);
                    }
                    var options = {                       
                        vAxis: { title: "PESO", minValue: 1 },
                        hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                        legend: { position: "none" }
                    };
                    var chart = new google.visualization.LineChart(document.getElementById('EvolucaoPeso'));
                    chart.draw(tdata, options);
                });
        }
    </script>


    <body>     
                        <div id="EvolucaoPeso" style="width: 900px; height: 500px;"></div>                   

   
    </body>

ERRO:</script>

No banco SQL Server 2008:

No design da tabela os campos peso_kg(nchar(10),null) e data_semanal(date,null)

Sergey Grabkovsky

unread,

Mar 6, 2015, 9:40:05 AM3/6/15

to google-visua...@googlegroups.com

Please look at this documentation page for instructions on how to use Dates in Google Charts: https://developers.google.com/chart/interactive/docs/datesandtimes

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Wilson Rogério Braun

unread,

Mar 6, 2015, 10:49:58 AM3/6/15

to google-visua...@googlegroups.com

Muito bom, mas estou com dificuldades para localizar o erro, eu tentei incluindo o o código, mas não da de renderizar o gráfico:

De: hAxis: { title: "DATA", textStyle: { fontSize: 10 } },

Para: hAxis: { title: "DATA", format: 'M/d/yy', textStyle: { fontSize: 10 } },

...

Sergey Grabkovsky

unread,

Mar 6, 2015, 10:54:12 AM3/6/15

to google-visua...@googlegroups.com

Your error doesn't come from the options. You are not specifying dates correctly. "/Date(1409626800000)/" is not a supported way to specify dates. If I were you, I would have your Database query return raw numbers, and use a DataView calculated column to convert them to Date objects.

--

Wilson Rogério Braun

unread,

Mar 6, 2015, 1:12:22 PM3/6/15

to google-visua...@googlegroups.com

Teria algum exemplo para aplicar a sugestão?

Em sexta-feira, 6 de março de 2015 11:09:40 UTC-3, Wilson Rogério Braun escreveu:

...

Sergey Grabkovsky

unread,

Mar 6, 2015, 1:29:01 PM3/6/15

to google-visua...@googlegroups.com

Here is a basic example: http://jsfiddle.net/vc36osx3/

--

Wilson Rogério Braun

unread,

Mar 6, 2015, 2:10:20 PM3/6/15

to google-visua...@googlegroups.com

Até ai acho que estou entendendo, obrigado, mas como retornar do banco desta forma?

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

Wilson Rogério Braun

unread,

Mar 7, 2015, 5:46:46 AM3/7/15

to google-visua...@googlegroups.com

Algum local ou exemplo para esta consulta?

Wilson Rogério Braun

unread,

Mar 7, 2015, 8:11:36 AM3/7/15

to google-visua...@googlegroups.com

Como retornar a data_semanal?

De:

Date(1409626800000)

Para:

data.addRows([
[1409626800000, 3],
[1419626800000, 1],
[1429626800000, 1],
[1439626800000, 1],
[1449626800000, 2]
]);

Sergey Grabkovsky

unread,

Mar 9, 2015, 10:09:31 AM3/9/15

to google-visua...@googlegroups.com

I would recommend that you change the database itself either to store real dates or numbers. If this is not possible, you could use a regular expression to get the number out. In your case, that regexp would look something like /Date$(\d+)$/. Here's an example of using that: http://jsfiddle.net/vc36osx3/2/

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

Wilson Rogério Braun

unread,

Mar 9, 2015, 3:08:30 PM3/9/15

to google-visua...@googlegroups.com

Uncaught SyntaxError: Unexpected token ;

var tdata = new google.visualization.DataTable();
tdata.addColumn('date', 'data_semanal');
tdata.addColumn('number', 'peso_kg');
//tdata.addColumn({ type: 'string', role: 'annotation' });

//console.log(data);

for (var i = 0; i < data.length; i++) {
if (data[i].data_semanal != null)
tdata.addRow([data[i].data_semanal, data[i].peso_kg]);

});

// Redefine as dates
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'date',
calc: function(dt, row) {
var stringDateValue = dt.getValue(row, 0);
var number = parseInt(/Date$(\d+)$/.exec(stringDateValue)[1]);
return new Date(number);
}
}, 1])
var options = {
//title: "EVOLUÇÃO DE PESO EM KG POR DATA",

vAxis: { title: "PESO", minValue: 1 },
hAxis: { title: "DATA", textStyle: { fontSize: 10 } },

legend: { position: "none" },
async: true //aumenta a velocidade de renderização

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

chart.draw(view, options);
};

</script>

Em sexta-feira, 6 de março de 2015 11:09:40 UTC-3, Wilson Rogério Braun escreveu:

...

Sergey Grabkovsky

unread,

Mar 9, 2015, 3:19:45 PM3/9/15

to google-visua...@googlegroups.com

I'm not sure what you were trying to do here, so I don't have any suggestions for what to do instead, but this is the line where the error is:
$.get('/Programa_Nutricao/Avaliacao/EvolucaoPeso', {};

--

Wilson Rogério Braun

unread,

Mar 9, 2015, 3:24:32 PM3/9/15

to google-visua...@googlegroups.com

Uncaught ReferenceError: data is not definedAvaliacao:193 drawStuff

google.load('visualization', '1.1', { 'packages': ['corechart'] });

google.setOnLoadCallback(drawStuff);

$.get('/Programa_Nutricao/Avaliacao/EvolucaoPeso', {});

function drawStuff() { .....

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

Sergey Grabkovsky

unread,

Mar 9, 2015, 3:38:14 PM3/9/15

to google-visua...@googlegroups.com

It sounds like a lot of the questions you have are unrelated to Google Charts, and have more to do with basic JavaScript programming. You should consult a JavaScript book or tutorial, or ask this question on a beginner forum, like StackOverflow.

Hope this helps,

- Sergey

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

Wilson Rogério Braun

unread,

Mar 9, 2015, 3:40:54 PM3/9/15

to google-visua...@googlegroups.com

THANK YOU.

Wilson Rogério Braun

unread,

Mar 11, 2015, 3:43:28 PM3/11/15

to google-visua...@googlegroups.com

Almost there, but miss rendereizar the chart. Below image attached with island and return code. Any suggestions?

function ToJavaScriptDate(value)

{

var pattern = /Date$([^)]+)$/;

var results = pattern.exec(value);

var dt = new Date(parseFloat(results[1]));

return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();

}

</script>

google.load('visualization', '1.1', { 'packages': ['corechart'] });

google.setOnLoadCallback(drawChart);

function drawChart() {

$.get('/Programa_Nutricao/Avaliacao/EvolucaoPeso', {},

function (data) {

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

tdata.addColumn('date', 'data_semanal');

tdata.addColumn('number', 'peso_kg');

for (var i = 0; i < data.length; i++) {

if (data[i].data_semanal != null)

tdata.addRow(ToJavaScriptDate[data[i].data_semanal],data[i].peso_kg);

console.log(ToJavaScriptDate(data[i].data_semanal),data[i].peso_kg);

}

var options = {

vAxis: { title: "PESO", minValue: 1, maxValue: 6 },

hAxis: { title: "DATA", textStyle: { fontSize: 10 }},

legend: { position: "none" }

};

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

chart.draw(tdata, options);

});

}

</script>

...

console.png

Sergey Grabkovsky

unread,

Mar 11, 2015, 4:27:57 PM3/11/15

to google-visua...@googlegroups.com

The entire point of parsing the date was to turn it into a JavaScript Date. You are returning a string. You need to change your toJavaScriptDate function to be:

function ToJavaScriptDate(value)

{

var pattern = /Date$([^)]+)$/;

var results = pattern.exec(value);

return new Date(parseFloat(results[1]));

}

--

Wilson Rogério Braun

unread,

Mar 11, 2015, 4:45:40 PM3/11/15

to google-visua...@googlegroups.com

Okay, but the chart is not out yet. The return format below:

Tue Sep 02 2014 00:00:00 GMT-0300 (Hora oficial do Brasil) "1.340 "

Sat Sep 06 2014 00:00:00 GMT-0300 (Hora oficial do Brasil) "1.450 "

Mon Sep 08 2014 00:00:00 GMT-0300 (Hora oficial do Brasil) "1.540 "

...

Sergey Grabkovsky

unread,

Mar 11, 2015, 4:50:45 PM3/11/15

to google-visua...@googlegroups.com

I missed this earlier, but you have a syntax error in your code. You're not calling your ToJavaScriptDate function. The code you have is "ToJavaScriptDate[data[i].data_semanal]", which is property access, not function call. You need to change it to be "ToJavaScriptDate(data[i].data_semanal)".

It also looks like you're returning strings for your numbers as well, so you'll need to parse those too. To do that, modify this line:

tdata.addRow(ToJavaScriptDate[data[i].data_semanal],data[i].peso_kg);

to:

tdata.addRow(ToJavaScriptDate(data[i].data_semanal), parseFloat(data[i].peso_kg));

--

Wilson Rogério Braun

unread,

Mar 11, 2015, 4:58:38 PM3/11/15

to google-visua...@googlegroups.com

He returned to the console with the message:

Uncaught Error: If argument is given to addRow, it must be an array, or null

...

Sergey Grabkovsky

unread,

Mar 11, 2015, 5:03:28 PM3/11/15

to google-visua...@googlegroups.com

So you need to change it to:
tdata.addRow([ToJavaScriptDate(data[i].data_semanal), parseFloat(data[i].peso_kg)]);

--

Wilson Rogério Braun

unread,

Mar 11, 2015, 5:08:12 PM3/11/15

to google-visua...@googlegroups.com

Wonder! Congratulations.

...

Wilson Rogério Braun

unread,

Mar 11, 2015, 5:09:22 PM3/11/15

to google-visua...@googlegroups.com

Many Thanks.

...

Sergey Grabkovsky

unread,

Mar 11, 2015, 5:17:06 PM3/11/15

to google-visua...@googlegroups.com

You're welcome. I'm glad you got it working.

--

Reply all

Reply to author

Forward

Uncaught Error: Type mismatch. Value /Date(1409626800000)/ does not match type date in column index 0

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Wilson Rogério Braun

Wilson Rogério Braun

Date(1409626800000)

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Sergey Grabkovsky

Wilson Rogério Braun

Wilson Rogério Braun

Sergey Grabkovsky