Can we have chart select event and Legend select event seperatly
28 views
Skip to first unread message
Gur
Mar 21, 2017, 12:06:10 AM3/21/17
to Google Visualization API
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>
Reply all
Reply to author
Forward
0 new messages