Can google charts treemap customize the borders of boxes? - css

I know this is very trivial but there is nothing in the documentation. I am using google charts treemap for monitoring something. If all the parent level rectangles are green, the distinct boxes aren't much clear because they are just divided by very thin white line. Can we customize the borders of each rectangle, like black line or increasing the width among each rectangle.

You can provide your own css, just keep in mind the chart is svg.
To change the border color, something like this should work.
rect {
stroke: black;
stroke-width: 2;
}
See following example...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
new google.visualization.TreeMap(document.getElementById('chart_div')).draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
},
packages:['treemap']
});
rect {
stroke: black;
stroke-width: 2;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Aggregating Column Values In Kusto

How do I transform kusto data that looks like this:
let fauxData = datatable (OrgName:string, Status:string, EastUS:long, SouthCentralUS:long, WestUS2:long)
['Apple', 'Red', 50, 10, 90,
'Apple', 'Orange', 30, 30, 10,
'Apple', 'Yellow', 10, 0, 0,
'Apple', 'Green', 10, 60, 0,
'Ball', 'Red', 20, 20, 20,
'Ball', 'Orange', 30, 30, 30,
'Ball', 'Yellow', 0, 0, 0,
'Ball', 'Green', 50, 50, 50,
];
To look like this:
['Apple', 'ComboOfRedandOrange', 80, 40, 100,
'Apple', 'ComboOfGreenandYellow', 20, 60, 0,
'Ball', 'ComboOfRedandOrange', 50, 50, 50,
'Ball', 'ComboOfGreenandYellow', 50, 50, 50,
]
You can use next query to achieve your goal:
let fauxData = datatable (OrgName:string, Status:string, EastUS:long, SouthCentralUS:long, WestUS2:long)
['Apple', 'Red', 50, 10, 90,
'Apple', 'Orange', 30, 30, 10,
'Apple', 'Yellow', 10, 0, 0,
'Apple', 'Green', 10, 60, 0,
'Ball', 'Red', 20, 20, 20,
'Ball', 'Orange', 30, 30, 30,
'Ball', 'Yellow', 0, 0, 0,
'Ball', 'Green', 50, 50, 50,
];
fauxData
| extend combo = case(Status in ('Red', 'Orange'), 'ComboOfRedandOrange',
Status in ('Green', 'Yellow'), 'ComboOfGreenandYellow',
'Unknown')
| summarize sum(EastUS), sum(SouthCentralUS), sum(SouthCentralUS) by OrgName, combo
you could try something like this:
let T =
datatable(OrgName: string, Status: string, EastUS: long, SouthCentralUS: long, WestUS2: long)
[
'Apple', 'Red', 50, 10, 90,
'Apple', 'Orange', 30, 30, 10,
'Apple', 'Yellow', 10, 0, 0,
'Apple', 'Green', 10, 60, 0,
'Ball', 'Red', 20, 20, 20,
'Ball', 'Orange', 30, 30, 30,
'Ball', 'Yellow', 0, 0, 0,
'Ball', 'Green', 50, 50, 50,
]
;
let F = (statuses:dynamic)
{
T
| where Status in(statuses)
| summarize sum(EastUS), sum(SouthCentralUS), sum(WestUS2) by OrgName, Status = strcat("ComboOf", strcat_array(statuses, "And"))
}
;
union
F(dynamic(['Red', 'Orange'])),
F(dynamic(['Green', 'Yellow']))
| order by OrgName asc, Status asc

Amchart X axis position and fill to axis

I am using AmChartXY to draw graph areas, here is the fiddle:
https://jsfiddle.net/ap60fhsu/1/
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"autoMarginOffset": 20,
"dataProvider": [{
"ax": 0,
"ay": 0,
"bx": 0,
"by": 0,
}, {
"ax": 8,
"ay": 1,
"bx": 12,
"by": -2,
},
{
"ax": 32,
"ay": 9,
"bx": 35,
"by": -1,
},
{
"ax": 45,
"ay": 6,
"bx": 45,
"by": -2,
},
{
"ax": 60,
"ay": 2,
"bx": 60,
"by": -2,
},
{
"ax": 70,
"ay": 0,
"bx": 70,
"by": 0,
},
{
"ax": 75,
"ay": 0,
"bx": 72,
"by": 0,
},
{
"ax": 85,
"ay": 6,
"bx": 80,
"by": -1,
},
{
"ax": 90,
"ay": 0,
"bx": 90,
"by": 0,
}],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"dashLength": 1,
"id": "x",
"title": "X Axis"
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"id": "y",
"title": "Y Axis"
}],
"plotAreaBorderAlpha": 1,
"startDuration": 1,
"graphs": [ {
"balloonText": "x:[[x]] y:[[y]]",
"fillAlphas": 0.3,
"fillToAxis": "x",
"lineAlpha": 1,
"xField": "ax",
"yField": "ay",
"lineColor": "#FF6600"
}, {
"balloonText": "x:[[x]] y:[[y]]",
"lineAlpha": 1,
"fillToAxis": "x",
"fillAlphas": 0.3,
"xField": "bx",
"yField": "by",
"lineColor": "#FCD202"
}],
"marginLeft": 64,
"marginBottom": 60,
"chartScrollbar": {},
"chartCursor": {},
"export": {
"enabled": true,
"position": "bottom-right"
}
});
As you see I have negative values for Y axis, this makes the X axis fall down from Y=0 to Y=-4 and when I use fillToAxis: x, expecting that the graph fill areas will be areas bounded with graphs and X axis corresponding to the value Y=0, I get another result. How can I move the X axis to the Y=0, or at least get the fill area result as I expect?
Thanks in advance

graphaeljs error

I am using the graphaeljs library to display charts, at an ASP.NET MVC 4
I have copied this code from the graphaeljs website
<script src="scripts/raphael.js"></script>
<script src="scripts/g.raphael-min.js"></script>
<script src="scripts/g.bar-min.js"></script>
<script>
window.onload = function () {
var r = Raphael("holder"),
fin = function () {
this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
},
fout = function () {
this.flag.animate({ opacity: 0 }, 300, function () { this.remove(); });
},
fin2 = function () {
var y = [], res = [];
for (var i = this.bars.length; i--;) {
y.push(this.bars[i].y);
res.push(this.bars[i].value || "0");
}
this.flag = r.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
},
fout2 = function () {
this.flag.animate({ opacity: 0 }, 300, function () { this.remove(); });
},
txtattr = { font: "12px sans-serif" };
r.text(160, 10, "Single Series Chart").attr(txtattr);
r.text(480, 10, "Multiline Series Stacked Chart").attr(txtattr);
r.text(160, 250, "Multiple Series Chart").attr(txtattr);
r.text(480, 250, "Multiline Series Stacked Chart\nColumn Hover").attr(txtattr);
r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).hover(fin, fout);
r.hbarchart(330, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], { stacked: true }).hover(fin, fout);
r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);
var c = r.barchart(330, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], { stacked: true, type: "soft" }).hoverColumn(fin2, fout2);
};
</script>
But when I run at my browser, this message appears
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
c._engine.create raphael.js:11
c raphael.js:9
window.onload (index):92
I do not know what I do wrong, and I used the libraries exactly as they are. Can you please tell me, what might be my mistake?
Sorry, I don't see anything wrong with the code you posted.
I made a fiddle for you.
It is obviously an issue with the raphael.js file.
Be sure to include class="raphael" on your body tag, and a div with id="holder".
If that fails, try re-downloading raphael.js.

Tweening polygon Kinetic JS

Can I change the size of polygon wchich I defined by points?
var pierwszy = new Kinetic.Polygon({
points: [0, 0, 150, 0, 80, 150, 0, 150],
fillPatternImage: images.img1,
stroke: 'black',
strokeWidth: 5,
});
I have tried to just change points and add to tween atriubutes, but it doesn't work.
scaleX and scaleY work very well, but the background image is bluring.
Any ideas?
I don't know if this is useful for you,In my situation is ,I want to change the shape of the polygon with a tween:
poly1= new Kinetic.Polygon({
points: [0, 0, 150, 0, 80, 150, 0, 150],
fill: shadowLightColor,
stroke: '#bbbbbb',
strokeWidth: 1
});
layer.add(poly1);
poly1.tween = new Kinetic.Tween({
node: poly1,
duration: 1,
points: [0, 0, 300, 0, 200, 150, 0, 150],
easing: Kinetic.Easings.StrongEaseInOut
}).play();

Issue with datetime values and printing a spline plot between the data points

Anyone able to help with the following problem:
Trying to draw a chart with four data series, two of which are scatter and one is spline. Purpose of the spline is just to draw a line between specific spots on the chart, not joining all of them together. The following is my code so far:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
ordinal: false,
labels: {
formatter: function() {
return Highcharts.dateFormat('%H', this.value);
}
}
},
yAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
gridLineWidth: 0,
step: 1,
title: '',
labels: {
style: {
color: '#6D869F',
fontSize: '9px',
}
},
},
tooltip: {
formatter: function() {
return ''+
this.x +' cm, '+ this.y +' kg';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'sleep time',
marker: {
symbol: 'circle',
},
color: '#81c65b',
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6]]
},
{
name: 'wakeup time',
marker: {
symbol: 'circle',
fillColor: '#76a4fb',
},
data: [[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 2, 09, 30), 6]],
},
{
name: 'sleep time over average',
color: 'rgba(119, 152, 191, .5)',
marker: {
symbol: 'square',
fillColor: '#000',
},
data: [[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 1, 21, 20), 4]]
},
{
name: '',
legend: {
enabled: false,
},
color: '#d62a9c',
type: 'spline',
marker: {
enabled: false,
},
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 1, 21, 20), 4],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6],
[Date.UTC(2012, 1, 2, 09, 30), 6]]
}]
});
});
});
My problem now is, in the spline series, if I add a null between elements to prevent plotting the line between two points, the whole plot goes mayhem. The idea is to draw lines only so that points which are vertically on the same line get joined, eg. in this case "sleep time" and "wakeup time". For example,
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0], null,
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1], null,
[Date.UTC(2012, 1, 1, 23, 40), 2],
...
You may try out the code at this jsfiddle.
Try the following.
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 08, 15), null],
...
]
As you can see you have to pass an array which the first value have to be any date.
Demo

Resources