Forum Discussion
google charts in share point
Hi Team ,
I am created google charts (stacked column chart ) but i want to add link each item in a column if i clicked that item new page/new window will be opened
9 Replies
how to add link to stacked column chart each item if i clicked this each item new file /new page will be opened plese suggest me
The topic looks like a duplicate of this one.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Hello suhasini,
You need to assign a mouse click event handler to handle click event.
After that, you need to create an iframe element.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Ignat Vilesov,
Thank you for your reply I am new to share point i don't have that much idea please suggest me the steps i import the excel data into sharepoint list if i clicked the each item that file will be opened in below i attached my code.
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null;
function loadGoogleLibAndDraw(){google.charts.load('visualization', '1', {packages: ['corechart']});
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('customListName').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'DM');
data.addColumn('number', 'Offshore');
data.addColumn('number', 'Onsite');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Title'));
row.push(listItem.get_item('Offshore'));
row.push(listItem.get_item('Onsite'));data.addRow(row);
}
var options = {
chart: {
title: 'Head count',
},
isStacked: true,
colors: [
'#FF8080',
'#8080FF',
'#FF0000',
'#0000FF']
};
var barChart = new google.visualization.ColumnChart(document.getElementById('BarChart'));
barChart.draw(data, options);
}
function onFailedCallback(sender, args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body onload="loadGoogleLibAndDraw()">
<form name="metricsform" id="metricsform">
<input id="customListName" name="customListName" value="count" type="hidden"/>
</form>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 700px; height:500px;"></div>
</div>
</body>
</html>I have a few question to understand the use case:
- Are you implementing custom visual?
- Do you want to use Google Charts with custom visual?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
