Click here to Skip to main content
15,895,656 members
Home / Discussions / JavaScript
   

JavaScript

 
Questionif vs switch statments Pin
[NOPE]FOREV3R29-May-14 19:51
[NOPE]FOREV3R29-May-14 19:51 
AnswerRe: if vs switch statments Pin
Sanjay K. Gupta29-May-14 20:49
professionalSanjay K. Gupta29-May-14 20:49 
AnswerRe: if vs switch statments Pin
Manikandan1030-May-14 15:55
professionalManikandan1030-May-14 15:55 
AnswerRe: if vs switch statments Pin
HardikPatel.SE4-Jun-14 1:52
professionalHardikPatel.SE4-Jun-14 1:52 
QuestionMaster Page JavaScript to open page in root from sub-folder Pin
BobbyStrain29-May-14 14:04
BobbyStrain29-May-14 14:04 
QuestionCan I pass data via window.opener to dynamic page Pin
Member 1083647121-May-14 23:16
Member 1083647121-May-14 23:16 
GeneralRe: Can I pass data via window.opener to dynamic page Pin
Sunasara Imdadhusen26-May-14 21:23
professionalSunasara Imdadhusen26-May-14 21:23 
QuestionDisplaying data from database using javascript. Pin
miss78621-May-14 7:01
miss78621-May-14 7:01 
Hi,

I would like the javascript to show data from getData method (webMethod), when the page loads but when filter the data (categoryPicker control), using webMethod getData2.

This is currently my c# page.

C#
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            JavaScriptSerializer jss = new JavaScriptSerializer();
            ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
                //string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){'drawVisualization'({0},'{1}','{2}');});</script>",
           string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}','{3}');}});</script>",
            jss.Serialize(GetData()),
        "Name Example",
        "Name",
        "Type Example",
        "Type Example",
         "Type,"));

        }
            else 

            {
                JavaScriptSerializer jtt = new JavaScriptSerializer();
        ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
            //string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){'drawVisualization'({0},'{1}','{2}');});</script>",
       string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}','{3}');}});</script>",
        jtt.Serialize(GetData2()),
    "Name Example",
    "Name",
    "Type Example",
    "Type Example",
     "Type,"));

            }
        }

        
    


    [WebMethod]
    public static List<Data> GetData()
    {
        SqlConnection conn = new SqlConnection("#####");
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        conn.Open();
        var yesterday = DateTime.Today.AddDays(-1);
        string cmdstr = "select top 500 Name, [Decimal price],Cover, UploadDate from [dbo].[database] order by UploadDate desc";
        SqlCommand cmd = new SqlCommand(cmdstr, conn);
        //cmd.Parameters.AddWithValue("@value", yesterday);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        adp.Fill(ds);
        dt = ds.Tables[0];
        List<Data> dataList = new List<Data>();
        string cat = "";
        float val = 0;
        string typ = "";
        DateTime dat = DateTime.Now;

        //dat.ToString("ddmmYYYY", System.Globalization.CultureInfo.InvariantCulture);

        foreach (DataRow dr in dt.Rows)
        {
            try
            {
                cat = dr[0].ToString();

                val = Convert.ToInt32(dr[1]);

                typ = dr[2].ToString();

                dat = (DateTime)(dr[3]);

            }
            catch
            {
            }
            dataList.Add(new Data(cat, val, typ, dat));
        }
        return dataList;
    }


    [WebMethod]
    public static List<Data> GetData2()
    {
        SqlConnection conn = new SqlConnection("#####");
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        conn.Open();
        var yesterday = DateTime.Today.AddDays(-1);
        string cmdstr = "select Name, [Decimal price],Cover, UploadDate from [dbo].[database] order by UploadDate desc";
        SqlCommand cmd = new SqlCommand(cmdstr, conn);
        //cmd.Parameters.AddWithValue("@value", yesterday);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        adp.Fill(ds);
        dt = ds.Tables[0];
        List<Data> dataList = new List<Data>();
        string cat = "";
        float val = 0;
        string typ = "";
        DateTime dat = DateTime.Now;

        //dat.ToString("ddmmYYYY", System.Globalization.CultureInfo.InvariantCulture);

        foreach (DataRow dr in dt.Rows)
        {
            try
            {
                cat = dr[0].ToString();

                val = Convert.ToInt32(dr[1]);

                typ = dr[2].ToString();

                dat = (DateTime)(dr[3]);

            }
            catch
            {
            }
            dataList.Add(new Data(cat, val, typ, dat));
        }
        return dataList;
    }



I am little unsure, how do I go about updating on the javascript side. Could any one provide some guideline or process in what I need to do, please.

JavaScript
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
           if (dataValues.length < 1)
               return;

           var data = new google.visualization.DataTable();
           data.addColumn('string', columnNames.split(',')[0], 'name');
           data.addColumn('number', columnNames.split(',')[1], 'price');
           data.addColumn('string', columnNames.split(',')[2], 'type');
           data.addColumn('datetime', columnNames.split(',')[3], 'date');

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

               var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

               data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
           }

           var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
           var line = new google.visualization.ChartWrapper({
               'chartType': 'AreaChart',
               'containerId': 'PieChartContainer',
               'options': {
                   'width': 1200,
                   'height': 500,
                   'legend': 'none',
                   'hAxis': {
                       'format': "dd-MM-yyyy",
                       'hAxis.maxValue': 'viewWindow.max',
                       'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
                       'viewWindow': { 'max': new Date(2014, 05, 30) },
                   },
                   'chartArea': { 'left': 150, 'top': 100, 'right': 50, 'bottom': 100 },
                   'tooltip': { isHtml: true }
               },
               'view': {
                   'columns': [{

                       type: 'string',
                       label: data.getColumnLabel(3),
                       calc: function (dt, row) {
                           var date = dt.getValue(row, 3);
                           return dateFormatter.formatValue(date);
                       }
                   }, 1, {
                       type: 'string',
                       role: 'tooltip',
                       calc: function (dt, row) {
                           return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
                       }
                   }]
               }
           });


           var categoryPicker = new google.visualization.ControlWrapper({
               'controlType': 'CategoryFilter',
               'containerId': 'CategoryPickerContainer',
               'options': {
                   'filterColumnLabel': columnNames.split(',')[3],
                   'filterColumnIndex': '3',

                   'ui': {
                       'labelStacking': 'horizontal',
                       'allowTyping': false,
                       'allowMultiple': false,
                       'caption': categoryCaption,
                       'label': 'Date',
                   }
               }
           });


           new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line]).draw(data);
           table.draw(data, { showRowNumber: true });


       }

Any help or guidance would be very much appreciated. Thanks in advance.
GeneralRe: Displaying data from database using javascript. Pin
Sunasara Imdadhusen21-May-14 23:36
professionalSunasara Imdadhusen21-May-14 23:36 
GeneralRe: Displaying data from database using javascript. Pin
miss78622-May-14 2:11
miss78622-May-14 2:11 
Questionneed to change code Pin
Drcensor19-May-14 10:22
Drcensor19-May-14 10:22 
AnswerRe: need to change code Pin
berba26-May-14 1:19
berba26-May-14 1:19 
Questionrun event of asp contol by javascript Pin
alireza672518-May-14 5:39
alireza672518-May-14 5:39 
AnswerRe: run event of asp contol by javascript Pin
Praneet Nadkar19-May-14 1:09
Praneet Nadkar19-May-14 1:09 
GeneralRe: run event of asp contol by javascript Pin
Sunasara Imdadhusen21-May-14 23:37
professionalSunasara Imdadhusen21-May-14 23:37 
QuestionModular Javascript Pin
yaswanth.1614-May-14 7:05
yaswanth.1614-May-14 7:05 
AnswerRe: Modular Javascript Pin
Richard MacCutchan14-May-14 22:02
mveRichard MacCutchan14-May-14 22:02 
QuestionJavascript click event handler Pin
yaswanth.1614-May-14 6:24
yaswanth.1614-May-14 6:24 
AnswerRe: Javascript click event handler Pin
yaswanth.1614-May-14 6:31
yaswanth.1614-May-14 6:31 
AnswerRe: Javascript click event handler Pin
Kornfeld Eliyahu Peter14-May-14 6:57
professionalKornfeld Eliyahu Peter14-May-14 6:57 
GeneralRe: Javascript click event handler Pin
yaswanth.1614-May-14 7:01
yaswanth.1614-May-14 7:01 
Questionhow I can use a variable passed by parameter in a javascript function in a lambda expression? Pin
Francisco Cruz8-May-14 9:09
Francisco Cruz8-May-14 9:09 
QuestionDate formatting - Charts Pin
miss7868-May-14 5:49
miss7868-May-14 5:49 
AnswerRe: Date formatting - Charts Pin
thatraja9-May-14 3:48
professionalthatraja9-May-14 3:48 
GeneralRe: Date formatting - Charts Pin
miss78612-May-14 3:37
miss78612-May-14 3:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.