Develop Reference

ColumnChart not show all string labels

I have The following problem related with ColumnChart (https://developers.google.com/chart/interactive/docs/gallery/columnchart).
If the label (when you mouse hover into any columns that looks like a tooltip) is set as a number, all 2000 items shows correctly. But if the label is set as a string it only shows 289 items in the chart and it is missing 1711 columns for an unknown reason.
I have this code (Label set with String, only shows 289 items instead of 2000):
http://jsfiddle.net/c809mbjx/11/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string' ,'Day');
data.addColumn('number', 'Matches');
var dataArray = []
let number = 2000
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,"aaa_"+i)
data.setCell(i,1,i);
}
//var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
And this code (Label set with Number and works correctly):
http://jsfiddle.net/c809mbjx/12/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number' ,'Day');
data.addColumn('number', 'Matches');
var dataArray = []
let number = 2000
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,i)
data.setCell(i,1,i);
}
//var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

we can use numbers on the x-axis and still display the string on the tooltip.
which can be accomplished by setting the last argument of the setCell method --> formattedValue
setCell(rowIndex, columnIndex, value, formattedValue)
the tooltip will display the formatted value by default.
so we provide the number as the value, and our own string as the formatted value.
data.setCell(i,0,i,"aaa_"+i);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number' ,'Day');
data.addColumn('number', 'Matches');
let number = 2000;
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,i,"aaa_"+i);
data.setCell(i,1,i);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
note: the version of google charts loaded using jsapi has been deprecated and should no longer be used.
instead, use loader.js, this will only change the load statement.
see above snippet...

google chart adding red line (avg)

I am trying to add a red line for avg using php so already got the value just not sure how to create the red line in this chart
my code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['id', 'AVG',],
['12',30635],['54/951',25294],['60',29459],['61',30375],['69',33683],['84/907',24753],['94',26092],['121',34589],['293',36305],['400/460',44068],['401/461',43907],['412/220',34667],['459',48254],['462',43613],['654',32764],['657',39062],['670',36084],['671',34099],['672',31909],['673',35626],['674',32898],['704',31877],['908',24972] ]);
var options = {
title: '2016 AVG',
'width':800,
'height':900,
hAxis: {
title: 'avg',
minValue: 0
},
vAxis: {
title: 'P.S.D'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

How to place chart top and bottom?

I want to display one of the chart underneath the other but for now only the 1st chart is showing and I can't seem to display the other chart at the bottom of it. Also, how do I make the chart align to the middle?
<section>
<html>
<div class="container"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["Copper", 8.94],
["Silver", 10.49],
["Gold", 19.30],
["Platinum", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Period: ASEAN 2Q F2F = 0 Dashboard",
'backgroundColor': 'transparent',
width: 600,
height: 400,
bar: {groupWidth: "70%"},
legend: { position: "right" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Number of calls made', 'Number of people'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: ASEAN2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>

You are calling '.load' method twice, which is incorrect.
Just comment below line for second chart and both chart will be loaded.
google.charts.load("current", {packages:["corechart"]});

Google Charts on select event redraw chart with new data

Hey to all i have the code below for a google pie chart that takes data from a jsontable and i want when i click a slice to redraw the chart based on the selection.
I have the code below and i'm at a loss how to proceed
<head>
<style>
div.absolute {
position: absolute;
top: 120px;
}
</style>
<link href="style.css" rel="stylesheet" />
<!--Auto refresh code -->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!--Load the Ajax API-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
title: 'Arrived Today (Email)',
width: '100%',
height: '100%',
sliceVisibilityThreshold: 0,
pieSliceText: 'percentage',
pieStartAngle: 100,
//is3D: 'true',
pieHole: 0.3,
slices: {
1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
5: {offset: 0.6},
},
//slices: {0: {color: 'green'}, 1: {color: 'blue'}},
pieSliceBorderColor: 'black',
legend: 'right',
legendTextStyle: {fontSize: 15},
pieSliceText: 'value' ,
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 14 ,
align:'right'
},
chartArea : { left: 35 }
};
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
var total = google.visualization.data.group(data,
[{
type: 'boolean',
column: 0,
modifier: function () {return true;}
}],
[{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]
);
document.getElementById("demo").innerHTML =total.getValue(0,1);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
var label1 = data.pieSliceText('label');
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
</script>
</head>
<body>
<h2 align="right"><font size="5">emails Arrived Today</font>
<div id="demo"></div>
</h2>
<div id="chart"></div>
</body>
thanks in advance for any help :)

function initChart() {
....
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}
function drawChart(data, options) {
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
Everything looks fine, except the scope of your variable data2.
You initiate it in your function initChart(), and then try to use it in a sub-function from drawChart().
Either you define your var data2 outside any javascript functions, or you pass it as a parameter when you call drawChart.

Animating column chart from google charts

I'm having trouble coming up with a function that will animate a single column bar inside of my chart when I use a slider going back and forth..left and right.. I have read the animation docs on the Google Charts API documentation, but I am having a hard time understanding what I need to do.
Here is my code so far. Where would I start in figuring out how to animate just one of my bars using a slider I have made in titanium? I call the function updateChart() from my app.js file using the evalJS function. I have verified it works, by doing a console.log when my slider goes back and forth. I just can't seem to wrap my head around it how to apply this to animating a single column bar. Any thoughts are appreciated.
Set up Google Charts on my html page.
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options =
{
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart() {
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
EDITED CODE:
<script type="text/javascript" src ="https://www.google.com/jsapi" > </script>
<script type="text/javascript ">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([['',5,'#000000'], ['',5,'#ffffff'],['',5,'#666666'],['', 5,'#cccccc']]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Slider Hook Code in separate file (app.js) Titanium Platform
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
chartView.evalJS("updateChart('" + e.value + "');");
});

You need to hook up an event listener for your slider that calls the updateChart function. The updateChart function should get the value from the slider and change the value in the DataTable, then cal the chart's draw method. How you hook up an event listener to the slider is going to depend on the library you are using for the slider. Here's some example code that assumes your slider object has a change method to set a change event handler and a `getValue method to get the value of the slider:
[edit: added in your slider code]
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Importance');
data.addColumn('number', 'Earning');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['',5,'#000000'],
['',5,'#ffffff'],
['',5,'#666666'],
['', 5,'#cccccc']
]);
var options = {
width: 200,
height: 240,
legend: {
position: 'none'
},
chartArea: {
backgroundColor: 'none'
},
bar: {
groupWidth: '100%'
},
animation: {
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
function updateChart(value) {
data.setValue(0, 1, value);
chart.draw(data, options);
}
// create slider
var sliderBarOne = Titanium.UI.createSlider({
top: '310',
left: '610',
min: '0',
max: '10',
width: '37%',
value: '5',
backgroundImage: 'assets/sliderBar.png'
});
sliderBarOne.addEventListener('change', function(e) {
updateChart(e.value);
});
chart.draw(data, options);
}