Re: [visualization-api] Google Charts in MVC 4 C# Razor

[Jinji]

What's the outcome of this code, and how is it different from what you expect?

On Sat, Jul 14, 2012 at 10:34 PM, DRAY <tnehlwa...@gmail.com> wrote:

I've been using Google Drive to store a lot of data in in Google Spreadsheets so that I can quickly build graphs and such. Piece of cake. Now, I want to move that data to a database and build a little MVC 4 web app to serve that data. Piece of cake. Adding Google Charts was also a piece of cake until I tried to use the AreaChart. Not sure if I have the data in the right format or what, but I am stumped and need some help. Here is my code. Perhaps I'm making it too difficult on myself and there's an easier way. Many thanks.

ChartController method

public JsonResult GetAreaChartData()

{

    List<string[]> data = new List<string[]>();

    data.Add(new[] { "Month", "Bolivia", "Ecuador", "Madagascar", "Papua New Guinea", "Rwanda" });

    data.Add(new[] { "2004/05", "165", "938", "522", "998", "450" });

    data.Add(new[] { "2005/06", "135", "1120", "599", "1268", "288" });

            

    return Json(data);

}

Chart.cshtml

<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="https://www.google.com/jsapi "></script>

<script type="text/javascript">// <![CDATA[

google.load("visualization", "1", { packages: ["corechart"] });

google.setOnLoadCallback(drawChart);

 

function drawChart() {

 

    $.post('/ChartController/GetAreaChartData', {},

    function (data) {

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

        var rows = data.length;

        var cols = data[0].length;

        

        tdata.addColumn('string', data[0][0]);

        for (var i = 0; i < cols; i++)

        {

            tdata.addColumn('number', data[0][i]);

        }

        tdata.addRows(data.length);

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

        {            

            tdata.setCell(i, 0, data[i][0]);

            for (var j = 1; j < cols; j++) {

                var value = parseInt(data[i][j]);

                alert(value);

                // Fails ???

                tdata.setCell(i, j, data[i][j]);

            }

        }

        var options = {

            title: 'Some Text',

            isStacked: true,

            width: 900,

            height: 500,

            vAxis: {title: "More Text"},

            hAxis: {title: "Date"}

        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

        chart.draw(tdata, options);

    });

 

}

// ]]></script>

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

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/XPIZRTkD3rUJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[DRAY]

I expected to see a set of the following given that I am using a set of its data.

https://code.google.com/apis/ajax/playground/?type=visualization#area_chart 

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Jinji]

And what do you actually see?

Can you post a simple page that demonstrates the problem? I have no experience with MVC, so if it's a problem with MVC configuration, I can't really help. If you can reproduce the problem using the javascript API, we'll be happy to help.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/NbyOx5Ntj90J.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

I'm not familiar with MVC either, but I can hazard a guess that the problem might lie with the loop to set the columns:

var cols = data[0].length;

        

tdata.addColumn('string', data[0][0]);

for (var i = 0; i < cols; i++)

{

    tdata.addColumn('number', data[0][i]);

}

You end up adding the 'month' column twice, the first time as type 'string' and the second time as type 'number'.  This would cause a mismatch between number of columns in the DataTable and the number of columns you feed the DataTable.  Start i at 1 instead of 0 to fix.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[DRAY]

Ahhh.. You're right. [0][1]...[0]5] are strings and I failed to update my code example. Let me try that and post my results.

[DRAY]

Updated code snippet... Attached is the output. Many thanks for continued support.

tdata.addColumn('string', data[0][0]);
        for (var i = 0; i < cols; i++)
        {
            tdata.addColumn('number', data[0][i]);
        }

        tdata.addRows(data.length);
        for (var i = 1; i < data.length; i++)
        {           
            tdata.setCell(i, 0, data[i][0]);
            for (var j = 1; j < cols; j++) {
                var value = parseInt(data[i][j]);

                tdata.setCell(i, j, value);

            }
        }



On Monday, July 16, 2012 4:04:56 PM UTC-4, asgallant wrote:

[asgallant]

The first for loop should have var i = 1.  If that doesn't fix the problem, can you post either a link to the page or the a copy of the complete (post-server rendered) js?