CODEWITHSUNDEEP
c#google-visualization
Jiju John
Jiju John

Reputation: 821

how to hide a column from google visualization

I have used below code to show google chart, I want to show another graph when clicking on first graph and here need to pass the value ResourceId 

if (resourceDetails != null)
{
    dataTable.Columns.Add("ResourceName", typeof(string));
    dataTable.Columns.Add("ResourceId", typeof(int));
    dataTable.Columns.Add("Planned", typeof(float));
    dataTable.Columns.Add("Actual", typeof(float));

    foreach (var item in resourceDetails.Distinct().ToArray())
    {
        dt = GetIndividualData(item.ResourceId, projectId);

        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                DataRow row = dataTable.NewRow();
                row["ResourceName"] = item.ResourceName;
                row["ResourceId"] = item.ResourceId;
                row["Planned"] = float.Parse(dt.Rows[i]["Planned"].ToString());
                row["Actual"] = float.Parse(dt.Rows[i]["Actual"].ToString());

                dataTable.Rows.Add(row);
            }
        }
    }
    if (dataTable.Rows.Count > 0)
    {
        stringBuilder.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*]});
                                    google.setOnLoadCallback(drawChart);
                                    function drawChart() {
                                    var data = new google.visualization.DataTable();
                                    data.addColumn('string', 'ResourceName');
                                    data.addColumn('number', 'ResourceId');
                                    data.addColumn('number', 'Planned');
                                    data.addColumn({type: 'string', role: 'style'});
                                    data.addColumn('number', 'Actual');
                                    data.addColumn({type: 'string', role: 'style'});

                ");
        // data.addRows(" + dataTable.Rows.Count + ");

        for (int i = 0; i <= dataTable.Rows.Count - 1; i++)
        {

            if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"]))
            {
                stringBuilder.Append("data.addRow(['" + dataTable.Rows[i]["ResourceName"].ToString() + "'," + dataTable.Rows[i]["ResourceId"].ToString() + ", " + dataTable.Rows[i]["Planned"].ToString() + ",\'color:DeepSkyBlue\'," + dataTable.Rows[i]["Actual"].ToString() + ",\'color:green\']);");
            }
            else
            {
                stringBuilder.Append("data.addRow(['" + dataTable.Rows[i]["ResourceName"].ToString() + "', " + dataTable.Rows[i]["ResourceId"].ToString() + "," + dataTable.Rows[i]["Planned"].ToString() + ",\'color:DeepSkyBlue\'," + dataTable.Rows[i]["Actual"].ToString() + ",\'color:red\']);");
            }


        }

        stringBuilder.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));");
        stringBuilder.Append(" chart.draw(data, {width: 660, height: 500, title: 'Resource-Performance Graph',");
        stringBuilder.Append("legend: {position: 'none'},");
        stringBuilder.Append("hAxis: {title: 'Resource', titleTextStyle: {color: 'green'},slantedText:true},width:'645',colors: ['DeepSkyBlue','green'],");

        stringBuilder.Append("vAxis:{title: 'Effort (Hr)',titleTextStyle: {color: 'green'}}");




        stringBuilder.Append("});");


        stringBuilder.Append(" google.visualization.events.addListener(chart, 'onmouseover', function() {$('#chart_div').css('cursor','pointer');});");

        stringBuilder.Append(" google.visualization.events.addListener(chart, 'onmouseout', function() {$('#chart_div').css('cursor','default');});");

        stringBuilder.Append("google.visualization.events.addListener(chart, 'select', function() {");

        stringBuilder.Append("var selection = chart.getSelection();var row = selection[0].row;var col = selection[0].column;var rId = data.getValue(row, 1); var pid = '" + projectId + "'; var pname = '" + projectName + "'; var resId = '" + Convert.ToInt32((Session["ResourceId"])) + "';");

        stringBuilder.Append("location.href = '" + ConfigurationManager.AppSettings["SiteLink"].ToString() + "/IndividualGraph.aspx?pId=' + pid + '&pName=' + pname +'&pResId=' + rId ; ");

        stringBuilder.Append("});");

        stringBuilder.Append("}");
        stringBuilder.Append("</script>");
        lt.Text = stringBuilder.ToString().Replace('*', '"');

    }
}

here I have used ResouceId column to pass the value as a parameter, but it shows in chart as a column, how can I hide this column from showing?

Upvotes: 4

Views: 2547

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

You can use the DataView Class to hide columns 

var data = new google.visualization.DataTable();
data.addColumn('string', 'ResourceName');
data.addColumn('number', 'ResourceId');
data.addColumn('number', 'Planned');
data.addColumn({type: 'string', role: 'style'});
data.addColumn('number', 'Actual');
data.addColumn({type: 'string', role: 'style'});

var view = new google.visualization.DataView(data);
view.hideColumns([1]);  // array of column indexes to hide

However, it may make sense in this case to use a Row Property instead
which does not appear in the chart

You can define your own properties with
setRowProperty(rowIndex, name, value)
and
getRowProperty(rowIndex, name)

The DataTable Class also has methods for Column and Cell Properties

Upvotes: 1

Related Questions