Java Script - Google charts - javascript

I am developing a dynamic google chart with asp.net , my problem is that when i pass Double values to google chart it parses the values to integer , even if the value is double , how can i view data as it is (double), here is my code
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 640.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, options2);
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, options3);
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options1);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>

The answer was easy just to add this line of code google.charts.Bar.convertOptions(
chart.draw(data, google.charts.Bar.convertOptions(options1));
The code will be like:
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 40.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options1));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>

Related

Google Charts: Hiding vertical bars on points

I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Line Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, '', 400, ''],
['2015', 1170, '', 460, ''],
['2016', 660, '', 1120, ''],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Which displays the following chart
Do you see those vertical gray lines on points? How can I hide them?
for the missing annotation values, use null instead of a blank string ''
['2014', 1000, null, 400, null],
we can also control the color of the vertical line pointing to the annotation,
otherwise known as the stem...
stem: {
color: 'transparent'
},
add above option within the annotations option...
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
['2014', 1000, null, 400, null],
['2015', 1170, null, 460, null],
['2016', 660, null, 1120, null],
['2017', 1030, '$1030', 540, '$540']
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
pointSize:0,
annotations: {
alwaysOutside: false,
stem: {
color: 'transparent'
},
textStyle: {
fontSize: 12,
color: '#000',
auraColor: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Google Charts Vertical Combo vhaxis

I have a Google Charts combo chart, I have configured the position of the chart vertically.
I could not add labels to the top and bottom values, nor could I display the values for the top.
How can I display the top and bottom values and also add a label, the label for the top values is 'percentage' and for the bottom values is 'USD'.
This is my actual code:
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {},
hAxis: {},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
I have this jsfiddle which is where I am testing what I need.
https://jsfiddle.net/cruano2/3gpsa9Lo/2/
are you trying to add axis titles?
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'percentage', 'total'],
['2004/05', 165, 938, 522, 998, 45, 614.6],
['2005/06', 135, 1120, 599, 1268, 88, 682],
['2006/07', 157, 1167, 587, 807, 97, 623],
['2007/08', 139, 1110, 615, 968, 15, 609.4],
['2008/09', 136, 691, 629, 1026, 66, 569.6]
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: {
position: 'bottom',
alignment: 'left'
},
title : 'material production',
vAxis: {title: 'Percentage'},
hAxis: {title: 'USD'},
height: 420,
orientation: 'vertical',
seriesType: 'bars',
series: {
0: {
pointSize: 5,
type: 'bars',
},
1: {
pointSize: 5,
type: 'bars'
},
2: {
pointSize: 5,
type: 'bars'
},
3: {
pointSize: 5,
type: 'bars'
},
4: {
pointSize: 5,
type: 'line'
},
5: {
pointSize: 5,
type: 'line'
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Interval columns add padding left/right to google line chart

I have an annoying problem. I'm creating a google line chart with an area-interval. As soon as I give the interval-columns the role: 'interval' the chart creates some sort of left and right boundary inside my linechart. How can I get rid of this?
This is my chart-code:
chartType: 'LineChart',
dataTable: {
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', p: {role: 'interval'}},
{id: 'i1', type: 'number', p: {role: 'interval'}}
],
rows: []
},
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindowMode: 'maximized'
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: blauw1,
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: blauw5},
fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
colors: [blauw1],
areaOpacity: 0.0,
}
};```
This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:
[without role: interval][1]
This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:
[with role: interval][2]
[1]: https://i.stack.imgur.com/zpT3D.png
[2]: https://i.stack.imgur.com/0x3XG.png
instead of using option --> hAxis.viewWindowMode: 'maximized'
use a distinct view window using the min and max dates from the data...
hAxis.viewWindow: data.getColumnRange(0)
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', role: 'interval'},
{id: 'i1', type: 'number', role: 'interval'}
],
rows: [
{c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
{c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
{c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
{c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
]
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: data,
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindow: data.getColumnRange(0)
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: 'cyan',
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: 'blue'},
//fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
//colors: [blauw1],
areaOpacity: 0.0,
}
});
chart.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Line Chart hAxis formatting problematic in Firefox

See image hAxis labels:
The hAxis labels are wrapping onto two lines, their values are, for example, 10.09 with no spaces. But on narrower screens its wrapping onto two lines, this is in Firefox.
In Chrome it works much better. This is how it looks in Chrome:
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
How can I improve the appearance of the Firefox version? Because at present its very hard to read
try setting the following option to 1 --> hAxis.maxTextLines
hAxis: {
maxTextLines: 1,
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['date', 'revenue'],
['10.01', 20],
['10.02', 30],
['10.03', 40],
['10.04', 50],
['10.05', 60],
['10.06', 70],
['10.07', 80],
['10.08', 90],
['10.09', 100],
['10.10', 120],
['10.11', 130],
['10.12', 150],
['10.13', 200],
['10.14', 220],
['10.15', 230],
['10.16', 240],
['10.17', 250],
['10.18', 260],
['10.19', 270],
['10.20', 280],
['10.21', 280],
['10.22', 290],
['10.23', 320],
['10.24', 340],
['10.25', 350],
['10.26', 360],
['10.27', 370],
['10.28', 380],
['10.29', 390],
['10.30', 400],
['10.31', 420]
]);
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
maxTextLines: 1,
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart set stroke-width of line chart to null

I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Categories