Am trying to make a chart with the google pie chart but the stroke-width of thye slices are to thin and im trying to make them thicker.
the code bellow is what i am using but unfortunately it isnt working.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Sitio', 'Dinheiro'],
['Restaurantes', 8],
['Bares', 2],
['Discotecas', 7]
]);
// Optional; add a title and set the width and height of the chart
var options = {
width: '92%',
height: 550,
color: 'white',
backgroundColor: '#232220',
chartArea: { top: '3%', width: '70%', height: '80%' },
slice: {
backgroundColor: {strokeWidth:2}
},
legend: { position: 'bottom', textStyle: { color: 'white', fontSize: 16 } },
pieSliceBorderColor : "tranparent"
};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="height: 370px; width: 92%;"></div>
have searched around but its always about the color and not the width of the slices width so i wasnt able to change it
Looking through the configuration options for the google pie chart there is no option to set the stoke width of the slices.
You can however set the stroke width using css:
<style type="text/css">
path {
stroke-width: 2;
}
</style>
Related
I try to use blending mode between konvajs (https://konvajs.org/) and openlayers (https://openlayers.org/)
I have a map created with openlayers, then I use Overlay (https://openlayers.org/en/latest/examples/overlay.html) of openlayers to add canvas konvajs on over the map.
I've try:
property globalCompositeOperation of konvajs, but it works only with items in konvajs
css mix-blend-mode, but it all items in konvajs were stuck with the same mode, I want each items have different mode.
Is there any way to achieve this?
Here example code I tried with No.1 above:
https://codesandbox.io/s/cool-monad-ow21j?file=/main.js
To help investigate how OpenLayer and Konvajs canvas might interact I created the below snippet. This draws an Openlayer map element then adds a Konvajs canvas element. Both are positioned absolute so that they overlap. I threw in some simple rectangles with varying opacity to illustrate the possibility in case that was all you really require.
The image below shows the F12 inspector view of the elements. As we can see, label a points out that the OpenLayers element employs a dedicated canvas. Similarly, label b shows the Konvajs canvas.
The conclusion is that these elements are indeed separate HTML5 canvas elements. Therefore the question switches to 'is it possible to use blend mode across canvasses?'. Fortunately this has been asked before.
So, in answer to your question, 'Is there any way to achieve this [blend between OpenLayer and Konvajs] ?' the answer seems to be a definite maybe. However, looking at the potential approaches it would seem that you might lose some of the mouse/touch functionality of both of the canvas layers.
// Create the map element
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-1.1656, 51.0856]),
zoom: 15
})
});
// Create the Konva element
var stage = new Konva.Stage({container: 'container1', width: 600, height: 400});
var layer1 = new Konva.Layer();
stage.add(layer1);
var rect = new Konva.Rect({x: 100, y: 25, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true });
layer1.add(rect);
rect = new Konva.Rect({x: 200, y: 75, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.5 });
layer1.add(rect);
rect = new Konva.Rect({x: 300, y: 125, width: 100, height: 50, fill: 'magenta', stroke: 'black', draggable: true, opacity: 0.25 });
layer1.add(rect);
stage.draw();
.map {
height: 400px;
width: 100%;
}
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/build/ol.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id="map" class="map" style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>
<div id='container1' style="left: 0; top: 0; width: 600px; height: 400px; background-color: transparent; position: absolute;"></div>
Anybody help me to create a multi ring donut chart using google chart ?
https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
I need like following image with multilevel colors.
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
If you need more rings you need to replicate the logic of the first pie hole, but your code will grow kkkk.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.8;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['c#', 30],
['python', 30],
['javascript', 30],
['sql server', 30],
['php', 30],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
Im using google column chart in my application in my chart i need to remove the tiny space between my blue and grey bars and also to format the y axis values. Please suggest me, how to remove that tiny gap between them. My Chart
Code for the chart
google.load("visualization", "1", {packages: ["columnchart"]});
var datum=[];
datum=[[2,15,25]];
var data = google.visualization.arrayToDataTable([['column1', 'column2', 'column3']].concat(datum), false);
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
// vAxis: {minValue: 0, maxValue: maxValue, ticks: tick, format: '$'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
Updated
How to remove the yaxis line and need to format the y axis value like $10, $15, $30. Is there any way to do that in column chart package. The link i'have refered to do the chart is this
You can add the following to your options object: bar: {groupWidth: '100%'}.
This will remove the gap between your gray and your blue bar.
All options are also listed in the documentation.
First off, don't use the old version of the ColumnChart; it is deprecated and doesn't offer any features that the newer version doesn't also have. Load it like this:
google.load('visualization', '1', {packages: ['corechart']});
To format the axis values, you need to use the vAxis.format option:
var options = {
legend: {position: 'none'},
colors: ['3399FF', 'C0C0C0'],
tooltip: {trigger: 'none'},
vAxis: {
format: '$#'
}
};
How do I set chartArea opacity? Here is a piece of my code... any ideas would be helpful. Thanks!
// Column Chart
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'In Millions'],
['2010', 178.7],
['2011', 211.693],
['2012', 199.3]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"",
width:400, height:400,
colors:['#89a7bf', '#b19237', '#698322', '#bf855d', '#196364', '#CCCCCC', '#D64646', '#8E468E'],
legend: {position: 'bottom', width:"250", textStyle: {fontSize: 10}},
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
I'm sorry, the option areaOpacity is only available in the following charts:
Visualization: Geochart
Visualization: Area Chart
Visualization: Combo Chart
Visualization: Bubble Chart
Visualization: Motion Chart
Visualization: Stepped Area Chart
For the above charts, google says:
The default opacity of the colored area under an area chart series,
where 0.0 is fully transparent and 1.0 is fully opaque. To specify
opacity for an individual series, set the areaOpacity value in the
series property.
I want to put google gauge in vertical alignment. This is my javascript code (it's copy paste from google playground)
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('menu2'));
chart.draw(data, options);
}
</script>
And this is my html div
<div id="menu2"></div>
and css
#menu2
{
background-color:#FFD700;
height:570px;
width:150px;
float:right;
}
any idea?
I just added inline style to div in which gauge will load. Ans removed all width height options from script given my google.
Here is the fiddle: http://jsfiddle.net/NB3Eg/
You can play with its html & css here https://code.google.com/apis/ajax/playground/?type=visualization#gauge