Skip to content

Instantly share code, notes, and snippets.

@RedhatPH8
Created November 22, 2019 20:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RedhatPH8/e578060cd5466967ee7b4556ad30db2f to your computer and use it in GitHub Desktop.
Save RedhatPH8/e578060cd5466967ee7b4556ad30db2f to your computer and use it in GitHub Desktop.
Delivery Status Card
<div class="ui grid">
<div class="ui row"></div>
<div class="one wide column"></div>
<!--Delivery Status-->
<div class="ui card" style="width: 700px;">
<style>div.google-visualization-tooltip { position:fixed !important; top:29px !important;left:400px !important; z-index:+1; width:150px; height: 150px;}</style>
<div id="hidden_div" style="display:none;"></div>
<div id="visible_div" style="width: 600px; height 300px;">
</div>
<!--End Delivery Status-->
</div>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawTooltipCharts);
// Set up data for visible chart.
var primaryData = [
['Open', 246],
['Closed', 396],
['Logged', 117],
['Staged', 48]
];
// Set up data for your tooltips.
var tooltipData = [
['Year', 'Open', 'Closed', 'Logged',
'Staged'],
['JAX01', 100, 90, 41, 0],
['JAX04', 90, 100, 32, 0],
['BIR1', 24, 120, 37, 26],
['BIR3', 32, 86, 17, 22]
];
var primaryOptions = {
title: 'Delivery Status',
//legend: 'none',
tooltip: {isHtml: true, trigger: 'selection'} // This MUST be set to true for your chart to show.
};
var tooltipOptions = {
title: 'Open/Closed/Logged/Staged',
pieSliceText: 'value',
height: '130px',//legend: 'none'
};
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.PieChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Highest Recent Viewership');
// Add a new column for your tooltips.
data.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.PieChart(visibleDiv);
primaryChart.draw(data, primaryOptions);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link href="https://gist.github.com/RedhatPH8/af7db5b873ec61125d735bb4da330afc" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment