i have google sankey diagram
google.load('visualization', '1.1', {packages: ['sankey']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ],
[ 'Z', 'H', 4 ],
]);
// Sets chart options.
var options = {
width: 600,
sankey: {
node: {
interactivity: true
}
}
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
I've set option - node interactivity: true, which does following thing: When you click on the node, it highlights paths which goes into this node and which goes from this node.
But the case is, I want to highlight whole path. For example in my snippet, if you click node 'A', it must highlight also 'Z' - 'H' path. Is it possible to do such thing? Thank you in advance.
Related
I would like to set the color of y-axis tick labels in Chart.js bar and line charts based on the numeric label value. Specifically, I'd like negative values to be rendered red. Additionally rather than displaying "-1", "-2", etc., I'd like to override to display "(1)", "(2)", etc.
I've seen examples for changing tick labels based on index / position, but not conditionally based on the label value. Thanks in advance for any guidance.
You can define the scriptable option scales.x.ticks.color as an array of colors that depend on the corresponding data value each. The following definition for example shows red tick labels for every bar of a value less than 10.
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
For further information, consult Tick Configuration from the Chart.js documentation.
Please take a look at below runnable code and see how it works.
const data = [4, 12, 5, 13, 15, 8];
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset',
data: data,
}]
},
options: {
responsive: false,
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
I need to get paging information of the legends. As shown in below image we have paging for legends.so, we need to get current selected page and number of page information.
click here for image
since there are no configuration options,
you'll have to inspect the SVG element which contains the information,
once the 'ready' event fires
see following working snippet...
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var message = document.getElementById('msg_div');
google.visualization.events.addListener(chart, 'ready', getLegendPage);
google.visualization.events.addListener(chart, 'select', getLegendPage);
function getLegendPage() {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
if (text.getAttribute('text-anchor') === 'middle') {
var legendPages = text.innerHTML.split('/');
message.innerHTML = 'Selected Legend page is ' + legendPages[0] + ' of ' + legendPages[1];
}
});
}
chart.draw(google.visualization.arrayToDataTable([
['Task', 'Hours'],
['A', 19.2],
['B', 30.8],
['C', 50.0],
['D', 19.2],
['E', 30.8],
['F', 50.0],
['G', 19.2],
['H', 30.8],
['I', 50.0],
['J', 19.2],
['K', 30.8],
['L', 50.0],
['M', 19.2],
['N', 30.8],
['O', 50.0]
]), {
height: 400,
chartArea: {
top: 24
},
legend: 'top',
pieHole: 0.4,
width: 400
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="msg_div"></div>
I have two series/columns fileSize and output Target.
Is it possible two display only output Target in the legend and hide fileSize?
you can use the visibleInLegend configuration option
just assign to the series number
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['File', 'fileSize', 'output Target'],
['a', 10, 15],
['b', 12, 18],
['c', 14, 21],
['d', 16, 24]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {
legend: {
position: 'bottom'
},
series: {
0: {
visibleInLegend: false
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
i am new to google charts i want to make a graph for cricket rate rate and wicket that should look something like this
i have searched google and found out that i might do it with the help of annotations and i have written this code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
[1, 6, null, null],
[2, 6, null, null],
[10, 2, null, null],
[20, 3.2, null, 'Shoaib Malik'],
[21, 3, '2', 'Shahid Afridi'],
[30, 4, null, null],
[40, 5, 'B', 'This is Point B'],
[50, 6, null, null],
]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
};
new google.visualization.LineChart(document.getElementById('chart_div')).
draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and this is the output of the code:
now the problem is that i want to show circle like the first image instead of text 2,B
i cant do it using pointSize because i want circle where wicket falls, not where the over ends...
can any1 tell me how to do this ? either i can replace text with circle or any other way out
You can't replace the text if you want to use the annotation functionality (as the text is what is generated by the annotations). You could use an overlapping data series to show only certain points. Here's an example that shows an overlapping series (I removed the annotations for simplicity, but you can still use them if you want to):
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn('boolean', 'Wicket falls');
data.addRows([
[1, 6, false],
[2, 6, false],
[10, 2, true],
[20, 3.2, false],
[21, 3, true],
[30, 4, true],
[40, 5, false],
[50, 6, false]
]);
// create a DataView that duplicates points on the "Run Rate" series where "Wicket falls" is true
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'number',
label: data.getColumnLabel(2),
calc: function (dt, row) {
// return the value in column 1 when column 2 is true
return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
}
}]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
series: {
0: {
// put any options pertaining to series 0 ("Run-rate") here
},
1: {
// put any options pertaining to series 1 ("Wicket Falls") here
pointSize: 6,
lineWidth: 0
}
}
};
new google.visualization.LineChart(document.getElementById('chart_div')).
// use the view instead of the DataTable to draw the chart
draw(view, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});
See working example here: http://jsfiddle.net/asgallant/saTWj/
I have a template:
{{#people}}
<div style="background-color: **gray/white**;"><span>{{name}}</span>: <span>{{title}}</span></div>
{{/people}}
Is there a way to set that background-color without passing it in from my controller? This is purely display and I do not feel that it belongs in my controller as a result, so would like to avoid naming colors there if possible.
As I mentioned in the comment, Mustache can not solve this, however I found a mustache.js-specific way:
var template = '{{#people}}'
+' <div style="background-color: {{color}}"><span>{{name}}</span>: <span>{{title}}</span></div>'
+'{{/people}}'
var data = {
people: [
{name: 'a', title: 'b'},
{name: 'c', title: 'd'},
{name: 'e', title: 'f'},
{name: 'g', title: 'h'},
{name: 'i', title: 'j'},
],
color: function() {
return window.divcolor = window.divcolor == 'gray' ? 'white' : 'gray'
}
}
Mustache.to_html(template, data)