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?

回答1:

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

来源：https://stackoverflow.com/questions/36276350/how-to-hide-a-column-from-google-visualization

标签

google-visualization