Say I have a chart like this:
https://i.stack.imgur.com/iKgI0.png
I'd like the label for max x-axis value (currently 150) to always read 120 (the actual bar value will never exceed this)
I've tried a few different configuration options and unable to achieve what I'm looking for
try adding the following to the chart options...
hAxis: {
viewWindow: {
max: 120
}
}
fyi:
this option is not available for use with material charts...
google.charts.Bar
with
packages: ['bar']
as an alternative to material, you can use core chart...
google.visualization.BarChart
with
packages: ['corechart']
with the following option...
theme: 'material'
Related
I have never worked with charts before so I'm a little blind here,
I want to ask the guys who worked with charts enough to recommend me the library for building charts which allows to customize charts exactly like in my desig below
It would be good to use vue.js for this, so if you know such vue.js chart packages it would be perfect!
Check the design of the graph:
Pay attention - there's kind of changing chart line color (the part of line which is below is red and the one above is green)
Thank you guys a lot for any recommendation!
You can create that type of chart in a simple way by using Highcharts.
In case of any problems you can get help on support channels: https://www.highcharts.com/blog/support/
Highcharts also has officially supported vue wrapper, which can be useful in your case: https://www.npmjs.com/package/highcharts-vue
You can start from:
Highcharts.stockChart('container', {
series: [{
data: [...],
zones: [{
value: 0,
color: 'red'
}]
}],
navigator: {
enabled: false
},
rangeSelector: {
inputEnabled: false
},
scrollbar: {
enabled: false
},
legend: {
enabled: true
}
});
Live demo: http://jsfiddle.net/BlackLabel/vknsb7rw/
API Reference: https://api.highcharts.com/highstock/series.line.zones
I am working with a spreadsheet that contains multiple sheets. In every sheet there is 1 chart.
I am using Google Apps Script to get these specific charts, which is working perfectly for all types of charts, except for the 'Stepped Stacked Chart', not to confuse with the 'Stepped Chart'.
Example code to explain the issue:
function getCharts(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var steppedStackedSheet = ss.getSheetByName('chart_2');
var otherChart = ss.getSheetByName('chart_1');
Logger.log(steppedStackedSheet.getCharts()); // returns an empty array
Logger.log(otherChart.getCharts()); // returns an array [EmbeddedChart] - This is what i also expect to see in the steppedStackedSheet chart.
}
I am buidling a script that downloads the chart as an image, but it's strange that this specific chart is not being recognized as a chart.
Haven't found anything on Google but hopefully someone here has had a similar issue and/or a solution.
Here an example sheet, also including the script
Thanks in advance!
As described in this documentation,
For 100% stacking, the stacks of elements at each domain-value are rescaled such that they add up to 100%. The options for this are isStacked: 'percent', which formats each value as a percentage of 100%, and isStacked: 'relative', which formats each value as a fraction of 1. There is also an isStacked: 'absolute' option, which is functionally equivalent to isStacked: true.
You may use setStacked() which uses stacked lines, meaning that line and bar values are stacked (accumulated). By default, there is no stacking. The return type is EmbeddedColumnChartBuilder.
I am working with the project that need Google Annotation Chart to show my data. And I have a problem like below.
My problem:
I would like to show the reverse value on the Y-axis.
What I mean is: the bigger the value is down and vice versa (the smaller the value is up)
I try to test all the option at the support docs but it still did not work
https://developers.google.com/chart/interactive/docs/gallery/annotationchart
Option:
...
vAxis: {direction: -1} // This works on line chart but not annotation chart
...
or somethings like
...
max: -200000, // this won't work and it's just keep the value not minus
min: 200000
...
This is my test code that forked from the docs page
https://jsfiddle.net/lecaoquochung/dsmgL9wj/2/
Could anyone help me to answer my problem? (Could it be possible to reverse the Y-axis now and later?)
Thank you very much
Problem solved. I have updated the testcode chart
Solution: add the chart to the option (get support from Googler)
chart : {vAxis: {direction: -1}},
Memo: Wonder that something updated in the API or just syntax (Because there is no description for chart option on graph docs pages)
Hope this help for anyone meet the same problem.
We use leafletJS to show maps with round about 100 markers. Some of these markers are located on exact the same position. Marker2 is above Marker1 so Marker1 isn't visible. Is there a way to rotate Markers in a way that you can see there are more then one marker?
may be you should look at https://github.com/Leaflet/Leaflet.markercluster plugin
here demo - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
The drawback with walla's answer is that Leaflet.markercluster requires clustering, which may not be an option depending on your requirements i.e. you need to always display individual markers.
OverlappingMarkerSpiderfier-Leaflet (a bit of a mouthful) works well in this case and it's fairly well documented. It displays a 'spider' of markers on click only if they overlap i.e. if the zoom level increases so markers don't overlap, then it won't 'spider' on click, which is quite nice. Demo.
It's available as a NPM package but it isn't a proper ES module, so usage is a bit trickier than usual if you're expecting an ES module:
// Need to specifically import the distributed JS file
import 'overlapping-marker-spiderfier-leaflet/dist/oms';
// Note access to constructor via window object
// map refers to your leaflet map object
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener('click', (marker) => {
// Your callback when marker is clicked
});
// Markers need to be added to OMS to spider overlapping markers
markers.forEach((marker) => {
oms.addMarker(marker);
});
// Conversely use oms.removeMarker(marker) if a marker is removed
Alternatively there is a forked version (confusingly) called OverlappingMarkerSpiderfier that is a proper ES module so you can do:
import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);
However as of 24 Jan 2020 there's a fair bit of divergence based on commits between the two so YMMV.
FWIW I'm using the original.
If anyone is looking working sample for Angular below are the steps,
Install it via npm: npm i --save overlapping-marker-spiderfier-leaflet
Then import it into the component where you need it: import 'overlapping-marker-spiderfier-leaflet/dist/oms';
Add this line on top of the file where you import it: const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;
Add the oms markup like that: this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });
Add the markers to oms at the same place where you add your markers to the map so oms can track them properly this.oms.addMarker(marker);
xlm is already gave a complete answer. Thanks to him for that answer. But this is a slightly changed answer that worked for me in angular.
we had the same problem, follows the jsFiddle with the solution we found http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/
var marker1 = new google.maps.Marker({
position: myLatLng,
map: map,
icon: {
url: image,
size: new google.maps.Size(134,130), //different sizes
},
zIndex: 2, //different overlays
title: '1ยบ marker',
});
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Can someone help me create a simple vertical bar chart using google charts?
Im using new Google Chart Tools, and I want to create stacked bar chart format.
The Google Developers site gives some details on the bar chart format: https://developers.google.com/chart/interactive/docs/gallery/barchart
To make a normal bar chart stacked, you need to user the isStacked: true option. You can copy and paste the following code into the Chart Tools playground to see a working example:
http://code.google.com/apis/ajax/playground/?type=visualization
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
isStacked: true}
);
}
You might also be interested in a Stacked Area Chart, depending on what data you are trying to display.
There is also a question which gives an example of a stacked bar chart using the Chart Tools Image API: Bar chart in Javascript: stacked bars + grouped bars
Note that the Image Charts portion of Google Chart Tools was officially deprecated on the 20th April, 2012. Image charts will still work for a while as per Google's deprecation policy, but I recommend you concentrate on the interactive HTML5+SVG implementation described above.