We are trying to show horizontal and vertical lines in google chart. For this we need to use hAxis and vAxis attribute.
But hAxis.format does not have any format for month, So how we can show vertical line?
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', ],
['Jan', 1000],
['Feb', 1170],
['Mar', 660],
['Apr', 1030]
]);
var options = {
title: '',
hAxis: {
title: 'Year',
minValue: 0,
titleTextStyle: {
color: '#333'
},
gridlines: {
color: '#f3f3f3',
count: 5
},
format: 'MMM'
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 5
}
}
};
JsFiddle
And here is year jsFiddle which is showing both lines( horizontal and vertical )
Working Fiddle
Yes there is, but it is not so straight forward.
First thing you should know is that there is no option to create vertical lines for a major column of type string. So we need to use a column type of number for example and fix the labels later.
To do that we define the datatable like this:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Month');
data.addColumn('number', 'Sales');
data.addRows([
[{v: 0, f:'Jan'}, 1000],
[{v: 1, f:'Feb'}, 1170],
[{v: 2, f:'Mar'}, 660],
[{v: 3, f:'Apr'}, 1030]
]);
Where we set number values but also string labels for the Month axis.
With just this and the format attribute removed, we would get vertical lines but numbers instead of the strings for the x axis labels, which is not what we want.
To fix this we can set hAxis ticks to force the correct labels in the plot.
var options = {
title: '',
hAxis: {
title: 'Month',
titleTextStyle: {
color: '#333'
},
baseline: 0,
gridlines: {
color: '#f3f3f3',
count: 4
},
ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 5
}
}
};
Hereby the complete working fiddle: http://jsfiddle.net/j29Pt/417/
Related
Here is my code. Please help merge the two charts into one chart.
I am trying to merge the first dataset from the data table with the one in image collection on the same axis.
The idea is to merge demand and the supply.
//feature collection for Aoi
var table =ee.Geometry.Polygon(
[[[37.55303819518035, 0.3541521362992195],
[37.55303819518035, 0.33389645906159726],
[37.596554354237966, 0.33389645906159726],
[37.596554354237966, 0.3541521362992195]]], null, false);
//external dataset
var myTable = {
cols: [
{id: 'name', label: 'month', type: 'string'},
{id: 'name', label: 'demand', type: 'number'},
{id: 'name', label: 'supply', type: 'number'}],
rows: [
{c: [{v: 'Jan'}, {v: 38253956}]},
{c: [{v: 'Feb'}, {v: 10978102}]},
{c: [{v: 'Mar'}, {v: 12030632}]},
{c: [{v: 'Apr'}, {v: 908340}]},
{c: [{v: 'May'},{v: 303074}]}
],
};
//defining the header
var header = ui.Label(' Demand Curve', {fontSize: '30px', color: 'black',fontWeight: 'bold'});
print(header)
var chart = new ui.Chart(myTable, 'LineChart');
chart.setSeriesNames([' Demand'])
chart.setOptions({
title: 'Demand Curve',
hAxis: {title: 'Date', titleTextStyle: {italic: false, bold: true},gridlines: {count: 27}},
vAxis: {
title: ' Demand',
titleTextStyle: {italic: false, bold: true}
},
lineWidth: 1,
colors: [ 'FF0000'],
curveType: 'line',
maxPixels:90e9
});
print(chart);
//---End Of the external data--------
//Getting image collection data fir the ndvi
Map=ui.Map();
var s2a = ee.ImageCollection('COPERNICUS/S2_SR')
.filter(ee.Filter.date('2019-01-01', '2019-03-31'))
.select('B1','B2','B3','B4','B5','B6','B7','B8','B8A','B9','B11','B12')
.filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 10))
.sort('system:time_start')
.map(function(s2a){return s2a.clip(table)})
// .set('system:time_start',date_start)
// .set('system:time_end',date_end)
// .sort('DATE_ACQUIRED');
Map.setCenter (37.577717495842506,0.3597340638009545,5);
var subndvi = s2a.map(
function(image) {
var ndvi = image.normalizedDifference(['B8', 'B4']).rename('NDVI')
var ndvi2 =ndvi.gt(0.18).and(ndvi.lte(0.22)).clip(table)
.copyProperties(image,['system:time_start','system:time_end','system:index'])
var ndvi3 = ndvi.gt(0.22).and(ndvi.lte(0.27))
.copyProperties(image,['system:time_start','system:time_end'])
return ndvi2
})
var ndviChart = ui.Chart.image.series(subndvi, table, ee.Reducer.mean(), 1000);
ndviChart.setOptions({
title: 'NDVI(Supply Curve)',
vAxis: {title: 'NDVI', maxValue: 1},
hAxis: {title: 'Date', format: 'MM-yy', gridlines: {count: 7}},
maxPixels:90e9,
});
print(ndviChart)
//-----End Of Ndvi Data--------
The below image shows the two charts from the code above.
enter image description here
The following code will probably do something what you need:
var monthlyDemand = ee.List([
38253956, // jan
10978102, // feb
12030632, // mar
908340, // apr
303074, // may
0, // jun
0, // jul
0, // aug
0, // sep
0, // oct
0, // nov
0 // dec
])
var s2a = ee.ImageCollection('COPERNICUS/S2_SR')
.filter(ee.Filter.date('2019-01-01', '2019-03-31'))
.select('B1','B2','B3','B4','B5','B6','B7','B8','B8A','B9','B11','B12')
.filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 10))
var subndvi = s2a.map(function(image) {
var ndvi = image.normalizedDifference(['B8', 'B4']).rename('NDVI')
var ndvi2 = ndvi.gt(0.18).and(ndvi.lte(0.22))
var demand = monthlyDemand.get(ee.Number(image.date().getRelative('month', 'year')).int())
return ndvi2.addBands(ee.Image.constant(demand).float().rename('demand'))
.copyProperties(image, ['system:time_start'])
})
var ndviChart = ui.Chart.image.series(subndvi, aoi, ee.Reducer.mean(), 1000).setOptions({
title: 'NDVI(Supply Curve)',
vAxis: {
title: 'NDVI',
maxValue: 1
},
hAxis: {
title: 'Date',
format: 'MM-yy',
gridlines: { count: 7 }
},
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 }
},
maxPixels:90e9,
});
print(ndviChart)
https://code.earthengine.google.com/1efd62e93e075cceec00e5f148414681
You have two variables "myTable" and "subndvi". The data type for the former is a table whereas for the second you have used ui.Chart.Image.series(). Table chart and image collection charts are different. Either you have to download your image collection point data and merge them manually in MS excel and re-upload to GEE, the new data will have three variables columns supply and demand at their respective dates.
This is how data looks from the two charts
enter image description here
This is how the data should look like
enter image description here
and when you reupload to GEE, use feature by feature chart and it should get you these results. Make sure to normalize your y-axis data.
enter image description here
var chart_1 = ui.Chart.feature.byFeature({
features: ndvi_demand,
}).setOptions({
series:{
0: {color:'red', targetAxisIndex: 0 },
1: {color:'green', targetAxisIndex: 1 },
}
})
print(chart_1)
Code Link:
https://code.earthengine.google.com/25261edeb9ee44ac1c3ba545e4498d71
And I used a feature collection chart rather than Image Collection one. Lots of approaches Just waned to give you insight on what's happening in background.
best regards
Muddasir Shah
I try to custom vertical axis max and min value in google chart but nothing change.
I follow references from https://developers.google.com/chart/interactive/docs/gallery/combochart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', '実績（件数）');
data.addColumn('number', '体調');
data.addRows([['03/19',2,5],['03/20',3,4],['03/21',3,3]]);
var materialOptions = {
seriesType: 'bars',
interpolateNulls: true,
series: {
0: {axis: '実績（件数）'},
1: {axis: '体調', targetAxisIndex:1, type:'line'}
},
height: 400,
vAxis: {
0: {
minValue: 0,
maxValue: 5.5
},
1: {
minValue: 1,
maxValue: 6
}
}
};
var materialChart = new google.visualization.ComboChart(chartDiv);
materialChart.draw(data, materialOptions);
I add isStacked: true like bellow
vAxis: { minValue: 0, maxValue: 5.5 }
isStacked: true,
I have sometimes series where the values are all zero. When I apply a ColumnChart the figure is all empty, not showing that there are actually zero values.
How can I display the bars even when the values are zero?
I tried the following options:
{
type: options.type,
cssStyle: options.cssStyle,
data: {},
options: {
chartArea:{width:'80%'},
pointsVisible: true,
lineWidth: 4,
curveType: "none",
fontName: "Open Sans",
fontSize: 10,
colors: options.colors,
isStacked: "false",
fill: 10,
displayExactValues: true,
vAxis: {viewWindowMode:'explicit', minValue: -1, viewWindow: {min:0}, gridlines: {"color": "#f2f2f2", "count": 2}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
hAxis: {gridlines: {"color": "#f2f2f2"}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
legend: {position: 'bottom', alignment: 'center', textStyle: options.textStyle},
}
a bar will only be displayed if the value is not equal to zero
however, using object notation, we can provide the value (v:) and the formatted value (f:)
using the following, the bar will display, but when hovered, the tooltip shows a value of zero
{v: 0.1, f: '0'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var data = google.visualization.arrayToDataTable([
['x', 'y'],
['A', {v: 0.1, f: '0'}],
['B', 2],
['C', 3],
['D', 4]
]);
google.visualization.events.addListener(chart, 'ready', function () {
chart.setSelection([{row: 0, column: 1}]);
});
chart.draw(data, {
tooltip: {
trigger: 'both'
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
In your code, test for zero values and convert that to .1 or whatever is appropriate for your scale.
function vAxisTest (vAxis) {
let scale = .1; //
if(vAxis === 0) {
vAxis = scale;
return scale;
}
else { return vAxis; }
}
There's too much padding on either side of the area chart and minPadding/maxPadding doesn't work with categories.
I want the area chart to start and end without any padding.
My code is below:
http://jsfiddle.net/nx4xeb4k/1/
$('#container').highcharts({
chart: {
type: 'area',
inverted: false
},
title: {
text: 'Too Much Padding On Either Side'
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Data Point'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b> points'
},
series: [{
name: 'Visits',
data: [
["Monday", 58],
["Tuesday", 65],
["Wednesday", 55],
["Thursday", 44],
["Friday", 56],
["Saturday", 65],
["Sunday", 69]
],
dataLabels: {
enabled: false,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}',
y: 10,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
A colleague of mine solved this very situation for some of my charts. Their solution was to remove the type: 'category' from the x-axis (making it a linear type instead) and instead replace the axis labels from an array.
Here's what's been changed:
First, I added an array of your x-axis labels.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday","Sunday"];
Next, I updated your series values to hold only the y-axis values.
series: [{
name: 'Visits',
data: [58, 65, 55, 44, 56, 65, 69],
Then, for your x-axis, I included a formatter function to pull in the labels from the array as substitutes for the default linear values.
xAxis: {
labels: {
formatter: function(){
return categoryLabels[this.value];
}
}
},
Lastly, I updated the tooltip options to show the values from the labels array.
tooltip: {
formatter: function () {
return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0);
}
},
I updated your fiddle with this tweaks: http://jsfiddle.net/brightmatrix/nx4xeb4k/4/
I hope you'll find this solution as useful as I have!
According to API, the default value of highcharts.xAxis.tickmarkPlacement is between and this is why the point of each category drops between two ticks on xAxis in your chart.
By setting highcharts.xAxis.tickmarkPlacement to on and playing around the value of highcharts.xAxis.min and highcharts.xAxis.max like this, you should be able to achieve what you want.
You can declare the min / max values to fix the problem.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
//....
xAxis: {
min: 0.49,
max: categoryLabels.length - 1.49,
categories: categoryLabels,
type: 'category'
},
Example:
http://jsfiddle.net/fo04m7k7/
Folks,
I was trying to create a Column Chart using google chart API and I am having lots of issue in getting Y-AXIS line.
I understand x-axis is string that is why vertical grid line is not coming but Y-axis line must come. I am marking in RED as of now this line is not coming.
I have following code.
function drawChartSecond(resp) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Activity');
data.addColumn('number', 'Hours');
data.addRows([
['Work', 11],
['Eat', 2 ],
['Commute', 2 ],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title : '',
legend: {
position: 'right',
alignment: 'center'
},
tooltip: {
isHtml: true
},
hAxis: {
title: 'Activity',
titleTextStyle: {
color: 'Black',
fontSize : '12',
fontName : 'Arial'
},
baselineColor: '#CCCCCC'
},
chartArea : {
left: '8%',
top: '8%',
height:'70%',
width:'100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
chart.draw(data, options);
}
The only way to get that baseline is to use a chart with a continuous axis. You can use a DataView to convert your data to appropriately formatted numbers, and use the hAxis.ticks option to re-label the axis tick marks so it looks correct:
function drawChartSecond(resp) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Activity');
data.addColumn('number', 'Hours');
data.addRows([
['Work', 11],
['Eat', 2 ],
['Commute', 2 ],
['Watch TV', 2],
['Sleep', 7]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row + 1, f: dt.getValue(row, 0)};
}
}, 1]);
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push({v: i + 1, f: data.getValue(i, 0)});
}
var options = {
title : '',
legend: {
position: 'right',
alignment: 'center'
},
tooltip: {
isHtml: true
},
hAxis: {
title: 'Activity',
titleTextStyle: {
color: 'Black',
fontSize : '12',
fontName : 'Arial'
},
baselineColor: '#CCCCCC',
ticks: ticks
},
chartArea : {
left: '8%',
top: '8%',
height:'70%',
width:'100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartdivsecond'));
chart.draw(view, options);
}
see working example: http://jsfiddle.net/asgallant/6mXkv/