Google charts on .CSHTML page with data from MS SQL

[Matevz Uros Pavlic]

Hi all, 

i am having troubles with understanding how to connect to MS SQL to get data to show in Google charts API on .CSHTML webpage. Is that even possible?

I am not a it engineer, so please use be "basic" when talking about this. 

Let me explain my problem a bit more. I have a MS SQL database that will be/is filling up with data from different sensors. Now i'd like to show this data in 

nice SVG plots (i have it done now with ASP.NET Chart helper, but it's ugly). I understand how to use Google charts from a file, but can not for the life of me, get

how to connect to MS SQL database!

Any help would be greatly appreciated.

Thank you, m

[asgallant]

Are you using ASP.net MVC?  If so, do you have a model set up for your database connection?

[Matevz Uros Pavlic]

Hi,

I think so to the first answer (using Webmatrix).

If by "model set" you mean if i can connect to a databse in my server, yes. Yes i can get data out of sql and show in web page.

Tnx, m

[asgallant]

Can you post the code that outputs the data in a webpage?  I'll take a look and see what you might do with it to build a chart with it instead.

[Matevz Uros Pavlic]

Hi, 

this is the code that gets the chart from SQL database :

@{
     
    Layout = null; 
 
        var db = Database.Open("HEK");
        var data = db.Query("SELECT * FROM VWS where ID > 2200");

        var myChart = new Chart(width: 900, height: 350)
            .AddTitle("Absolutna kota vode v tesnilni zavesi")
            .AddSeries("nivo Sava", chartType: "Line", xValue: data, xField: "Datum", yValues: data, yFields: "Sava")
            .AddSeries("RPWS1", chartType: "Line", xValue: data, xField: "Datum", yValues: data, yFields: "RPWS1")
            .AddSeries("RPWS2", chartType: "Line", xValue: data, xField: "Datum", yValues: data, yFields: "RPWS2")
            .AddSeries("RPWS3", chartType: "Line", xValue: data, xField: "Datum", yValues: data, yFields: "RPWS3")
 
            .SetYAxis("absolutna kota", 159, 165.5)
 
            .AddLegend()
            .Write();
}

But this chart is not SVg, it's put in as an image...i'd like to put it in as SVG...

I'm not sure that's all you need, so please let me know if you need something more.

regards, m

[asgallant]

FYI, if that is the methodology you are using to access your data, then you're not using MVC.

I think this is basically what you want to draw the chart:

@{
    Layout = null;
    var db = Database.Open("HEK");
    var data = db.Query("SELECT * FROM VWS where ID > 2200");

    // move to a DataTable
    DataTable dataTable = new DataTable();
    data.copyToDataTable(dataTable);

    // create an array of rows
    List<string> rows = new List<string>();
    rowsList.Add("['nivo Sava', 'RPWS1', 'RPWS2', 'RPWS3']");
    foreach(DataRow row in dataTable.rows) {
        rowsList.Add("[" + row.item["Datum"] + ", " + row.item["Sava"] + ", " + row.item["RPWS1"] + ", " + row.item["RPWS2"] + ", " + row.item["RPWS3"] + "]");

    }
    String rows = String.Join(", ", rowsList);
}
<script type='text/javascript' src="http://www.google.com/jsapi"></script>

<script type="text/javascript>
function drawChart () {
    var data = google.visualization.arrayToDataTable([@rowsList]);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div');
    chart.draw(data, {
        height: 350,
        width: 900,
        title: 'Absolutna kota vode v tesnilni zavesi',

        vAxis: {

            maxValue: 165.5,

            minValue: 159,

            title: 'absolutna kota'

        }

    });

}

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

google.setOnLoadCallback(drawChart);

</script>

<div id="chart_div"></div>

You'll have to test and debug that yourself (as I don't have an ASP.net environment handy to test that code in right now).

[Matevž Uroš Pavlič]

Hi, 

thanks for reply...but it doesn't work (yet). Error is shown in attachment ....

Any ideas?

m

2013/2/18 asgallant <drew_g...@abtassoc.com>

--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Matevz Uros Pavlic]

Tried to debug it myself, but no luck : still the sam answer :

Compiler Error Message: CS0246: The type or namespace name 'DataTable' could not be found (are you missing a using directive or an assembly reference?)

Any ideas?

m

[asgallant]

The DataTable class is part of .Net v4.5 (it may be present in earlier versions, but I don't know for certain).  If you don't have access to it, then you'll have to rewrite to use the class returned by the Query instead

[Matevž Uroš Pavlič]

Hi, 

i have .net 4.5 installed on the server as well on this machine. Still no luck...do i have to do something special in order to make it work??

regards, m

2013/2/19 asgallant <drew_g...@abtassoc.com>

--

[Matevž Uroš Pavlič]

Hi, 

i changed Targeted framework to 4.5 but still the same error: 

"CS0246: The type or namespace name 'DataTable' could not be found (are you missing a using directive or an assembly reference?)"

My web.config file is as follows: 

<?xml version="1.0"?>
<configuration>

  <system.web>

    <compilation targetFramework="4.5" debug="true"/>
    <globalization culture="sl-SI" enableClientBasedCulture="true" uiCulture="sl-SI"/>
    <customErrors mode="Off"/>
    <authentication mode="Windows"/>
    <identity impersonate="false"/>
    <pages controlRenderingCompatibilityVersion="4.0"/>
  </system.web>
  <connectionStrings>
    <add connectionString="Server=xxx.xxx.xxx.xxx,1433\SQLEXPRESS;Database=;Uid=-;Pwd=" name="mpavlic_Gecko" providerName="System.Data.SqlClient"/>
    <add connectionString="Server=xxx.xxx.xxx.xxx,1433\SQLEXPRESS;Database=;Uid=;Pwd=" name="HEK" providerName="System.Data.SqlClient"/>

  </connectionStrings>
  <system.webServer>
    <defaultDocument enabled="true">
      <files>
        <add value="index.cshtml"/>
      </files>
    </defaultDocument>
    <directoryBrowse enabled="false" showFlags="Date, Time, Size, Extension, LongDate"/>
  </system.webServer>
</configuration>

I have .NET 4.5 installed.

Do you think there could be something else wrong?

regards, m

[asgallant]

Ask around a ASP.net forum for help (or try StackOverflow); I'm still learning ASP.net, and you've stumped me on this one.

[Matevz Uros Pavlic]

Just did...thank you for the help anyway.

Regards, m

[Matevz Uros Pavlic]

Hi again, 

these were missing :

@using System.Data;
@using System.Collections.Generic;
@using System.Data.SqlClient;

But it still doesn't work. 

I (think) I managed to copy SQL table to DataTable of c# by :

@using System.Data;
@using System.Collections.Generic;
@using System.Data.SqlClient;
@{
    
    Layout = null;


    string connectionString="Server=xxx.xxx.xxx.xxx; Database=HEK; Uid=sa; Pwd=xxxxx";
    
    DataTable dt = new DataTable();
    
    using (SqlConnection conn = new SqlConnection(connectionString))
    {
        conn.Open();
        using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT Sava, rpws1 FROM VWS WHERE ID > 2200", conn))
        {
            adapter.Fill(dt);
        };
    };
    

Now i'd have to pass it to  Google charts, to draw the plot... ?

Of course this doesn't work :

    var data = google.visualization.arrayToDataTable(@dt);

Do you have any ideas on this...i am reaaaally lost here...

Tnx

[asgallant]

You have to parse the contents of the data structure returned by your query and output the data into a format the Visualization API can understand.  If you have the C# DataTable populated correctly, then you should be able to use something like this to output it in the correct format:

@{
    // query database and populate DataTable dt first

    // create an array of rows
    List<string> rows = new List<string>();
    rowsList.Add("['nivo Sava', 'RPWS1', 'RPWS2', 'RPWS3']");

    foreach(DataRow row in dt.rows) {

        rowsList.Add("[" + row.item["Datum"] + ", " + row.item["Sava"] + ", " + row.item["RPWS1"] + ", " + row.item["RPWS2"] + ", " + row.item["RPWS3"] + "]");

    }
    String rows = String.Join(", ", rowsList);
}
<script type='text/javascript' src="http://www.google.com/jsapi"></script>

<script type="text/javascript>
function drawChart () {
    var data = google.visualization.arrayToDataTable([@rowsList]);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div');
    chart.draw(data, {
        height: 350,
        width: 900,
        title: 'Absolutna kota vode v tesnilni zavesi',

        vAxis: {

            maxValue: 165.5,

            minValue: 159,

            title: 'absolutna kota'

        }

    });

}

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

google.setOnLoadCallback(drawChart);

</script>

[Matevž Uroš Pavlič]

hi, 

ok, i'll try and find how this goes. Another thing, do you have any idea how to check if DataTable is filled correcty from SQL query?

Thanks, m

2013/2/20 asgallant <drew_g...@abtassoc.com>

--

[asgallant]

If it is properly filled, the dt.Rows property should contain an array of rows.

Thanks, m

2013/2/20 asgallant <drew_g...@abtassoc.com>

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

[Matevz Uros Pavlic]

Hi, 

ok, but how can i check this?  if i do :

            var a = dt.Rows;

            Response.Write(a);

I get :

System.Data.DataRowCollection

How could i check what exaclty is stored in DataTable dt?

[asgallant]

This loop here is accessing the contents of the row:

foreach(DataRow row in dt.rows) {

    rowsList.Add("[" + row.item["Datum"] + ", " + row.item["Sava"] + ", " + row.item["RPWS1"] + ", " + row.item["RPWS2"] + ", " + row.item["RPWS3"] + "]");

}

[Matevz Uros Pavlic]

No luck...

If I test it like this :

            Object o = dt.Rows[0]["RPWS1"];

The values are correct.

What is rowsList in the code you posted? 

Thanks, m

[asgallant]

rowsList is a list of strings which will be printed in the javascript, translating the C# DataTable into a Google Visualization DataTable.

[Matevz Uros Pavlic]

Hi, 

i figured the Item error out. Seem like in c# you can write it directly like :

@using System.Data;

@using System.Collections.Generic;

@using System.Data.SqlClient;

@{    

    

    Layout = null;

    string connectionString="Server=192.168.1.125,1433\\sqlexpress; Database=HEK; Uid=sa; Pwd=lubelincek12121";

    

    DataTable dt = new DataTable();

    

    using (SqlConnection conn = new SqlConnection(connectionString))

    {

        conn.Open();

        using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT Datum, Sava, RPWS1 FROM vws", conn))

        {

            adapter.Fill(dt);

            

            

            List<string> rowsList = new List<string>();

            

            rowsList.Add("['Datum', 'Sava', 'RPWS1']");

                    

            

            foreach(DataRow row in dt.rowsList) 

            

            {

                    rowsList.Add("[" + row["Datum"] + ", " + row["Sava"] + ", " + row["RPWS1"] + "]");

            }

            String rows = String.Join(", ", rowsList);

            

            

            

            //Object o = dt.Rows[0]["RPWS1"];

            //Response.Write(o);

        };

        

    };

    

}

But the error about rowsList remains. I can't figure out what's wrong....

[asgallant]

This is probably the problem:

foreach(DataRow row in dt.rowsList)

rowsList is not a property of a DataTable.  It should be:

foreach(DataRow row in dt.Rows)

[Matevz Uros Pavlic]

Hi, 

c# part seems to work ok....but i get an error in HTML and Javascript, still sayin rowsList :"The name 'rowsList' does not exist in the current context." 

If i check to see what rows c#, using Response.Write(rows); i get the string in a form of :

['Datum', 'Sava', 'RPWS1'], [29.8.2012 18:00:00, 161.87, 161.79], [29.8.2012 20:00:00, 161.86, 161.77], [........

Which is correct,...

But using @rowsList or @rows produces the above error. 

Could there be a problem passing variable rows or rowsList  to Java and HTML?

[asgallant]

I made an error in my code above, it should be:

var data = google.visualization.arrayToDataTable([@rows]);

[Matevž Uroš Pavlič]

No, I saw the, i tried it before also...it doesn't work. Same error...

The name 'rows' does not exist in the current context

2013/2/22 asgallant <drew_g...@abtassoc.com>

--
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.

[asgallant]

Can you post the cshtml file and an example of the javascript rendered by the server (open the page in a browser and view the source)?

On Friday, February 22, 2013 1:33:14 PM UTC-5, Matevz Uros Pavlic wrote:

No, I saw the, i tried it before also...it doesn't work. Same error...

The name 'rows' does not exist in the current context

2013/2/22 asgallant <drew_g...@abtassoc.com>

I made an error in my code above, it should be:

var data = google.visualization.arrayToDataTable([@rows]);

On Friday, February 22, 2013 12:30:36 PM UTC-5, Matevz Uros Pavlic wrote:

Hi, 

c# part seems to work ok....but i get an error in HTML and Javascript, still sayin rowsList :"The name 'rowsList' does not exist in the current context." 

If i check to see what rows c#, using Response.Write(rows); i get the string in a form of :

['Datum', 'Sava', 'RPWS1'], [29.8.2012 18:00:00, 161.87, 161.79], [29.8.2012 20:00:00, 161.86, 161.77], [........

Which is correct,...

But using @rowsList or @rows produces the above error. 

Could there be a problem passing variable rows or rowsList  to Java and HTML?

--
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+unsub...@googlegroups.com.

[Matevž Uroš Pavlič]

Hi, 

here are they. Thanks for helping, 

m

2013/2/22 asgallant <drew_g...@abtassoc.com>

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

[asgallant]

I suspect that the problem is a scope issue: "rows" is local to the inner "using" call, and so isn't available when you call it down in the javascript.  Declaring it outside the "using" call should fix the problem:

    @using System.Data;

    @using System.Collections.Generic;

    @using System.Data.SqlClient;

    @{    

        Layout = null;

        string connectionString="Server=xxx.xxx.xxx.xxx,1433\\sqlexpress; Database=HEK; Uid=sa; Pwd=xxxxxxxxxxxxx";

        DataTable dt = new DataTable();

String rows = new String();

        using (SqlConnection conn = new SqlConnection(connectionString))

        {

            conn.Open();

            using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT Datum, Sava, RPWS1 FROM vws", conn))

            {

                adapter.Fill(dt);

            

            

                List<string> rowsList = new List<string>();

            

                rowsList.Add("['Datum', 'Sava', 'RPWS1']");

                foreach (DataRow row in dt.Rows)

                {

                    rowsList.Add("[" + row["Datum"] + ", " + row["Sava"] + ", " + row["RPWS1"] + "]");

                }

                rows = String.Join(", ", rowsList);

                

            };

        };

    }

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

<script type="text/javascript">

function drawChart() {

var data1 = google.visualization.arrayToDataTable([@rows]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

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

google.setOnLoadCallback(drawChart);

</script>

<div id="chart_div"></div>

On Friday, February 22, 2013 3:23:16 PM UTC-5, Matevz Uros Pavlic wrote:

Hi, 

here are they. Thanks for helping, 

m

2013/2/22 asgallant <drew_g...@abtassoc.com>

Can you post the cshtml file and an example of the javascript rendered by the server (open the page in a browser and view the source)?

On Friday, February 22, 2013 1:33:14 PM UTC-5, Matevz Uros Pavlic wrote:

No, I saw the, i tried it before also...it doesn't work. Same error...

The name 'rows' does not exist in the current context

2013/2/22 asgallant <drew_g...@abtassoc.com>

I made an error in my code above, it should be:

var data = google.visualization.arrayToDataTable([@rows]);

On Friday, February 22, 2013 12:30:36 PM UTC-5, Matevz Uros Pavlic wrote:

Hi, 

c# part seems to work ok....but i get an error in HTML and Javascript, still sayin rowsList :"The name 'rowsList' does not exist in the current context." 

If i check to see what rows c#, using Response.Write(rows); i get the string in a form of :

['Datum', 'Sava', 'RPWS1'], [29.8.2012 18:00:00, 161.87, 161.79], [29.8.2012 20:00:00, 161.86, 161.77], [........

Which is correct,...

But using @rowsList or @rows produces the above error. 

Could there be a problem passing variable rows or rowsList  to Java and HTML?

--
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+unsubscr...@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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Matevž Uroš Pavlič]

Hi, that solved that particular problem, but i have a new one...saying that :

 CS1729: 'string' does not contain a constructor that takes 0 arguments

I guess :

String rows = new String();

Can not be empty..

Any ideas?

[asgallant]

Try:

String rows = "";

[Matevž Uroš Pavlič]

Hi, 

getting close now....

Everything compiles, but nothing shows in browser. Atttahed is render file from server....

m

2013/2/22 asgallant <drew_g...@abtassoc.com>

--

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.

[Matevž Uroš Pavlič]

Hi again, 

i changed the parser a bit, so that the output looks the same form as the google Charts tutorial....still no luck...

var data = google.visualization.arrayToDataTable([['Datum', 'Sava', 'RPWS1'],

	[29.8.2012 18:00:00, 161.87, 161.79],
	[29.8.2012 20:00:00, 161.86, 161.77],

	[29.8.2012 22:00:00, 161.89, 161.79],
	[30.8.2012 0:00:00, 161.95, 161.84],
	[30.8.2012 2:00:00, 161.94, 161.85],

The only thing that could be wrong is  bolded text....i guess the column names are parsed strange?

2013/2/22 Matevž Uroš Pavlič <matevz...@gmail.com>

[Matevz Uros Pavlic]

Figured that one out...there was an apostophe to much, but it still doesn't show anything, just an empty page. The render is the same as the one from tutorial..

I even tried changing Datum (which is a DateTime) with ID (int) and it also dosen't work.

Any ideas?

m

[asgallant]

Try:

var data1 = google.visualization.arrayToDataTable([@Html.raw(rows)]);

Also, you're going to need to do some formatting of your dates.  Do you want them input as strings or Date objects?

2013/2/22 asgallant <drew_g...@abtassoc.com>

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

[Matevž Uroš Pavlič]

Hi, 

@Html.Raw(rows) doesn't do anything also....

Yes, i'd like to format the Datum variable as Date.....

Thanks, m

2013/2/23 asgallant <drew_g...@abtassoc.com>

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

[Matevz Uros Pavlic]

Hi,

i think i figured it out. I changed the data in @rows with actual rendered code and it didn't work. Then i changed the Datum with Id (int) and it showed graph. I guess i need to format  Datum as DateTime. Also, in the heading row, there needs to be Apostrophes...

How do i format Datum to DateTime? 

regards, m

[asgallant]

Using a "datetime" column, we have to switch things up a bit in the javascript, as the arrayToDataTable method doesn't support datetime columns.  You also have to manually parse your date format into a javascript compatible date format:

@using System.Data;

@using System.Collections.Generic;

@using System.Data.SqlClient;

@{    

Layout = null;

string connectionString="Server=xxx.xxx.xxx.xxx,1433\\sqlexpress; Database=HEK; Uid=sa; Pwd=xxxxxxxxxxxxx";

DataTable dt = new DataTable();

String rows = new String();

using (SqlConnection conn = new SqlConnection(connectionString))

{

conn.Open();

using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT Datum, Sava, RPWS1 FROM vws", conn))

{

adapter.Fill(dt);

List<string> rowsList = new List<string>();

List<string> datetimeList = new List<string>;

List<string> dateList = new List<string>;

List<string> timeList = new List<string>;

foreach (DataRow row in dt.Rows)

{

// this datetime split assumes dates in the form "day.month.year hour:minute:second"

datetimeList = new List<string>(row["Datum"].Split(" "));

dateList = new List<string>(datetimeList[0].Split("."));

timeList = new List<string>(datetimeList[1].Split(":"));

rowsList.Add("[new Date(" + dateList[2] + ", " + dateList[1] + ", " + dateList[0] + ", " + timeList[0] + ", " + timeList[1] + ", " + timeList[2] + "), " + row["Sava"] + ", " + row["RPWS1"] + "]");

}

rows = String.Join(", ", rowsList);

};

};

}

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

<script type="text/javascript">

function drawChart() {

var data1 = google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Savum');

data1.addColumm('number', 'RPWS1');

data1.addRows([@Html.Raw(rows)]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

[Matevz Uros Pavlic]

Hi, 

here is the problem :

datetimeList = new List<string>(row["Datum"].Split(" "));

'object' does not contain a definition for 'Split' and no extension method 'Split' accepting a first argument of type 'object' could be found (are you missing a using directive or an assembly reference?)

[asgallant]

I had assumed that your "datum" field was a string type; is is a DateTime type?  If so, then this can be simplified a bit:

@using System.Data;

@using System.Collections.Generic;

@using System.Data.SqlClient;

@{    

Layout = null;

string connectionString="Server=xxx.xxx.xxx.xxx,1433\\sqlexpress; Database=HEK; Uid=sa; Pwd=xxxxxxxxxxxxx";

DataTable dt = new DataTable();

String rows = new String();

using (SqlConnection conn = new SqlConnection(connectionString))

{

conn.Open();

using (SqlDataAdapter adapter = new SqlDataAdapter("SELECT Datum, Sava, RPWS1 FROM vws", conn))

{

adapter.Fill(dt);

List<string> rowsList = new List<string>();

foreach (DataRow row in dt.Rows)

{

rowsList.Add("[new Date(" + row["Datum"].Year + ", " + (row["Datum"].Month - 1) + ", " + row["Datum"].Day + ", " + row["Datum"].Hour + ", " + row["Datum"].Minute + ", " + row["Datum"].Second + "), " + row["Sava"] + ", " + row["RPWS1"] + "]");

}

rows = String.Join(", ", rowsList);

};

};

}

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

<script type="text/javascript">

function drawChart() {

var data1 = google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Savum');

data1.addColumm('number', 'RPWS1');

data1.addRows([@Html.Raw(rows)]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

[Matevz Uros Pavlic]

Hi again ;)

i checked how it reads the Datum column from SQL using this code :

Object o = dt.Rows[0]["Datum"];

        Response.Write(o);

Response.Write(o.GetType());    

Response is 29.8.2012 18:00:00 System.DateTime

But the problem is that using your code for formating this DateTime to JS DateTime produces error :

'object' does not contain a definition for 'Day' and no extension method 'Day' accepting a first argument of type 'object' could be found (are you missing a using directive or an assembly reference?)

Don't know what's the problem, 

[asgallant]

I don't know what's going on there, since Day is a property of DateTime objects in C#.  Maybe this will work:

rowsList.Add("[new Date(" + ((row["Datum"].Ticks - new DateTime(1970, 1, 1, 0, 0, 0).Ticks) / 10000) + "), " + row["Sava"] + ", " + row["RPWS1"] + "]");

[Matevž Uroš Pavlič]

Hi, 

no, same error. Don't know either. Maybe i am missing some directive (using)?

2013/2/24 asgallant <drew_g...@abtassoc.com>

[Matevž Uroš Pavlič]

Hi, 

got the answer in ASP.net forum. Seem that you need to cast or convert to DateTime anyway in order to access to those prperties..no it works, but still the chart doesnen't show up. Render looks like this :

 data1.addColumn('datetime', 'Datum');
        data1.addColumn('number', 'Savum');
        data1.addColumm('number', 'RPWS1');
        data1.addRows([[new Date(2012, 7, 29, 18, 0, 0), 161.87, 161.79], [new Date(2012, 7, 29, 20, 0, 0), 161.86, 161.77], [new Date(2012, 7, 29, 22, 0, 0), 161.89, 161.79], [new Date(2012, 7, 30, 0, 0, 0), 161.95, 161.84], [new Date(2012, 7, 30, 2, 0, 0), 161.94, 161.85], [new Date(2012, 7, 30, 4, 0, 0), 161.9, 161.82], [new Date(2012, 7, 30, 6, 0, 0), 161.87, 161.79], [new Date(2012, 7, 30, 8, 0, 0), 161.87, 161.78], [new Date(2012, 7, 30, 10, 0, 0), 161.85, 161.78], [new Date(2012, 7, 30, 12, 0, 0), 161.86, 161.79], [new Date(2012, 7, 30, 14, 0, 0), 161.84, 161.77], [new Date(2012, 7, 30, 16, 0, 0), 161.84, 161.76], [new Date(2012, 7, 30, 18, 0, 0), 161.81, 161.74], [new Date(2012, 7, 30, 20, 0, 0), 161.77, 161.71], [new Date(2012, 7, 30, 22, 0, 0), 161.79, 161.71], [new Date(2012, 7, 31, 0, 0, 0), 161.85, 161.74], [new Date(2012, 7, 31, 2, 0, 0), 161.91, 161.81], [new Date(2012, 7, 31, 4, 0, 0), 161.87, 161.79],....

It's probably wrong...

thanks, m

2013/2/24 Matevž Uroš Pavlič <matevz...@gmail.com>

[Matevz Uros Pavlic]

I think it's because there were no heading row...

I fixed that with 

                rowsList.Add("['Datum', 'Sava', 'RPWS1']");

                foreach (DataRow row in dt.Rows)

But it still doesn't show the chart...

I think the problem is because it dosen't render the apostrophe correctly. It renders it as :

['Datum', 'Sava', 'RPWS1'],

[asgallant]

You don't want the header row any more.  That was for the arrayToDataTable method.

There's a typo in the code:

data1.addColumm('number', 'RPWS1');

should be:

data1.addColumn('number', 'RPWS1');

(the first "addColumn" has "mm" at the end, when it should have "mn")

[Matevž Uroš Pavlič]

Hi, 

i don't why, but it still doesn't do anything. The server render is like this:

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	function drawChart() {
	var data1 = google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Sava');

data1.addColumn('number', 'RPWS1');

But the chart don't show up. It's strange that even with the typo, column RPWS1 was still added in DataTable. I don't know what to do anymore...

[asgallant]

Post the rendered javascript again, I'll take a look.

[Matevž Uroš Pavlič]

Sure thing...here it is (attached).

Thanks!

m

2013/2/25 asgallant <drew_g...@abtassoc.com>

[asgallant]

Oh, you're missing the google loader:

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

<script type="text/javascript">

function drawChart() {

var data1 = google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Savum');

data1.addColumm('number', 'RPWS1');

data1.addRows([@Html.Raw(rows)]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

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

google.setOnLoadCallback(drawChart);

On Monday, February 25, 2013 1:42:15 AM UTC-5, Matevz Uros Pavlic wrote:

Sure thing...here it is (attached).

Thanks!

m

2013/2/25 asgallant <drew_g...@abtassoc.com>

Post the rendered javascript again, I'll take a look.

On Monday, February 25, 2013 12:45:33 AM UTC-5, Matevz Uros Pavlic wrote:

Hi, 

i don't why, but it still doesn't do anything. The server render is like this:

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	function drawChart() {
	var data1 = google.visualization.DataTable()
	data1.addColumn('datetime', 'Datum');
	data1.addColumn('number', 'Sava');
	data1.addColumn('number', 'RPWS1');
But the chart don't show up. It's strange that even with the typo, column RPWS1 was still added in DataTable. I don't know what to do anymore...

--
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+unsub...@googlegroups.com.

[asgallant]

Sorry, found a typo, should be:

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

<script type="text/javascript">

function drawChart() {

var data1 = new google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Savum');

data1.addColumm('number', 'RPWS1');

data1.addRows([@Html.Raw(rows)]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

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

google.setOnLoadCallback(drawChart);

[Matevž Uroš Pavlič]

Hi, 

it don't know what is wrong, but still it doesn't show graph. changed all like you said, yet still nothing...no error or anything just blank screen. The render looks ok...but nothing shows up. 

Is there a ways I could send you some data or anything that you could test? 

Attached are complete CSHTML file and HTML render....

Thanks again,  m

[asgallant]

*facepalm* when I copied the javascript over, I left the "mm" typo in place, use this instead:

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

<script type="text/javascript">

function drawChart() {

var data1 = new google.visualization.DataTable()

data1.addColumn('datetime', 'Datum');

data1.addColumn('number', 'Savum');

data1.addColumn('number', 'RPWS1');

data1.addRows([@Html.Raw(rows)]);

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

chart.draw(data1, {

height: 350,

width: 900,

title: 'Absolutna kota vode v tesnilni zavesi',

vAxis: {

maxValue: 165.5,

minValue: 159,

title: 'absolutna kota'

}

});

}

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

google.setOnLoadCallback(drawChart);

</script>

[Matevž Uroš Pavlič]

Hallelijah!!! Thanks a million man. IT works now. Couldn't do it without you. Thanks again!

m

2013/2/25 asgallant <drew_g...@abtassoc.com>

--
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.

[asgallant]

You're welcome.

m

2013/2/25 asgallant <drew_g...@abtassoc.com>

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