I am creating pie charts.
how to hide the selected pie slice by clicking legend. at present my legend select is having drilldown functionality. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Charts.aspx.cs" Inherits="Charts" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head id="Head1" runat="server"> <title></title> <style type="text/css"> button { color:#fff; background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%); background-repeat: repeat-x; padding: 5px 10px; font-size: 12px; font-weight:bold; line-height: 1.5; border-radius: 3px; cursor: pointer; border-color: #265a88; text-shadow: 0 -1px 0 rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075); } dropdown { color:#fff; background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%); background-repeat: repeat-x; padding: 5px 10px; font-size: 12px; font-weight:bold; line-height: 1.5; border-radius: 3px; cursor: pointer; border-color: #265a88; text-shadow: 0 -1px 0 rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075); } button:hover{ background-image: linear-gradient(to top,#337ab7 0,#265a88 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 1px rgba(0,0,0,.175); } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart", "table"], "callback": Pardrawchart }); // google.setOnLoadCallback(Pardrawchart); var firstClick = 0; var secondClick = 0; function Pardrawchart() { // google.charts.setOnLoadCallback(drawChart); $(document).ready(function () { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'Charts.aspx/GetData', // data: "{'charttype':" + (charttype) + "}", data: '{}', success: function (response) { drawChart(response.d); } }); }) function drawChart(dataValues) { var listbox = document.getElementById("charttypes"); var selIndex = listbox.selectedIndex; var selValue = listbox.options[selIndex].value; var selText = listbox.options[selIndex].text; var data = new google.visualization.DataTable(); // debugger; data.addColumn('string', 'Application Type'); data.addColumn('string', 'Provider Type'); data.addColumn('number', 'Provider Count'); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].Category, dataValues[i].ColumnName, dataValues[i].Value]); } var aggregateData = google.visualization.data.group(data, [0], [{ type: 'number', label: 'Value', column: 2, aggregation: google.visualization.data.sum }]); var topLevel = true; if (selValue == "Line") { var chart = new google.visualization.LineChart(document.querySelector('#chart')); } else if (selValue == "Column") { var chart = new google.visualization.ColumnChart(document.querySelector('#chart')); } else if (selValue == "Bar") { var chart = new google.visualization.BarChart(document.querySelector('#chart')); } else if (selValue == "Pie") { var chart = new google.visualization.PieChart(document.querySelector('#chart')); } else if (selValue == "Area") { var chart = new google.visualization.AreaChart(document.querySelector('#chart')); } else { var chart = new google.visualization.ColumnChart(document.querySelector('#chart')); } // var table = new google.visualization.Table(document.getElementById('container')); var options = { height: 600, width: 800 }; function draw(category) { if (topLevel) { // rename the title options.title = 'Top Level data'; // draw the chart using the aggregate data chart.draw(aggregateData, options); // var datanew = new google.visualization.DataTable(abcnew); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(aggregateData, { showRowNumber: true, width: '100%', height: '100%' }); } else { var view = new google.visualization.DataView(data); // use columns "Name" and "Value" view.setColumns([1, 2]); // filter the data based on the category view.setRows(data.getFilteredRows([{ column: 0, value: category }])); // rename the title options.title = 'Application Type: ' + category; // draw the chart using the view chart.draw(view, options); // var datanew = new google.visualization.DataTable(abcnew); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(view, { showRowNumber: true, width: '100%', height: '100%' }); } } google.visualization.events.addListener(chart, 'select', function () { var date = new Date(); var millis = date.getTime(); if (topLevel) { var selection = chart.getSelection(); // drill down if the selection isn't empty if (selection.length) { var category = aggregateData.getValue(selection[0].row, 0); topLevel = false; draw(category); } } else { // go back to the top topLevel = true; draw(); } }); draw(); } } //google.load('visualization', '1', { packages: ['corechart'], callback: drawChart }); </script> </head> <body> <form id="form1" runat="server"> <table id="Table2" cellspacing="2" cellpadding="1" width="9.5%" border="0" rules="none" style="border-collapse: collapse;"> <tr> <td colspan="1" align="left" style= "font-size: 15px;font-weight:bold;border-radius: 3px;border-color: #265a88; color:#fff;background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);">Chart Types: <select name="charttypes" id="charttypes" style= "font-size: 15px;font-weight:bold;border-radius: 3px;border-color: #265a88;" onchange="return Pardrawchart();"> <option value="Pie">Pie</option> <option value="Column">Column</option> <option value="Bar">Bar</option> <option value="Line">Line</option> <option value="Area">Area</option> </select> </td> </tr> </table> </form> <div id="buttons"></div><hr/> <div id="chart" style="width: 600px; height: 350px;"> </div> <div id="table_div"></div> </body> </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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e12f8179-2cde-48ab-91fd-54c44e68fb16%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
