select dropdown and change google visulization chart's value in codeigniter - javascript

This is the timeline_chart.php file,when i select project in my drop down the value should be changed over here,please help me out!!
I have created show-hide div using jquery but its not working
<!--Div that will hold the pie chart-->
<div id="chart_div" ></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
google.load('visualization', '1', {'packages':['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var time =<?php echo $time_count; ?>;
var money = <?php echo $money_count; ?>;
var hour = <?php echo $hour_count; ?>;
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Time', time],
['Hours', money],
['Money', hour]
]);
var options = {
width: 300, height: 150,
greenFrom: 0, greenTo: 100,max:200,min:0,redFrom:151,redTo:200,
yellowFrom:101, yellowTo: 150,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>

Related

how to add links to google pie chart slices and send that variable to new page once clicked

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var jsvar = '<?=$count?>';
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Rating'],
['Good', <?php echo $count; ?>],
['Average', <?php echo $count1; ?>],
['Bad', <?php echo $count2; ?>],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Windoek' , 'width':400, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
window.open("table.php?myvar=" + encodeURI(selection));
});
I would like to get the selected task header and send it to new page ......
Example , If someone clicks the bad pie chart slice , The variable Bad and Title of pie chart should be send via link to new page for processing ....if someone selects Good than the variable Good with title of pie chart send to new page

How to set Google Charts scales/intervals?

How can I set the intervals on Google Charts?
I don't know if that's how it's called, but, in the image, they are the 200k, 400k and so on.
Since some of my values are pretty small, I need to create intervals at each 5k or so.
How can I set this using Google Charts?
The code I'm using is down here:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart4);
function drawChart4() {
var data = google.visualization.arrayToDataTable([
<?php echo $dados; ?>
]);
var options = {
chart: {title: <?php echo "'".str_replace('_', ' ', $subtitulo)."'" ?>,
},bars: 'horizontal',
width: 1250,
height: 350,
colors: ['#4c4c4c','#07bb27']
};
var chart = new google.charts.Bar(document.getElementById('column_horizontal'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}

Can I access values generated by google charts

Currently I pass variables to the api like so:
<script type="text/javascript">
mobileNav();
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
//Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Attendance');
data.addRows([
['Present', <?php echo $present; ?>],
['Absent', <?php echo $absent; ?>],
['Directed Study', <?php echo $directed; ?>],
['Medical Certificate', <?php echo $medical; ?>],
['Self Certificate', <?php echo $selfcert; ?>],
['Authorised Absence', <?php echo $authorised; ?>],
]);
// Set chart options
var options = {'title':'Your Attendance'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
I get the results and everything is good. I would like to access the % values generated by the pie chart. Is there a way this can be achieved?
If you want to access on your values generated by your pie chart , you need to retrieve data on your dataTable().
You need to use getFormattedValue method.
Documentation :
DataTable API : https://developers.google.com/chart/interactive/docs/reference#DataTable
Method : getFormattedValue(rowIndex, columnIndex)

Pass Array from Php to External JavaScript to draw a Pie chart

This is my php file it contains three arrays and I am passing these three arrays to external JavaScript file called ss.js to draw pie chart. If I directly declared array in external JavaScript file it shows the pie chart but when I passing array from php it simply showing nothing. I tried but I can't figure out the error part.
code.php
<?php
$a = array("Apple","Orange","Grape");
$dataArray = array("Task","Hours Per Day");
$arr1 = array("Work","Eat","Commute","Watch TV","Sleep");
$arr2 = array(11,2,2,2,7);
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var jArray =<?php echo json_encode($dataArray); ?>;
var jArray1 =<?php echo json_encode($arr1); ?>;
var jArray2 =<?php echo json_encode($arr2); ?>;
</script>
<script type="text/javascript" src="ss.js">
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
ss.js
google.load("visualization", "1", {
packages: ["corechart"]
});
function drawData() {
for (var n = 0; n < jArray2.length; n++) {
jArray.push([jArray1[n], parseInt(jArray2[n])]);
}
var data = new google.visualization.arrayToDataTable(jArray);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawData);

retrieve data from mongodb and visualize it with google charts

I'd like to retrieve data from database (mongodb) and with those data i'd like to draw à pie chart using google charts. in a first case i have a collection called user and each user has a boolean attribute called (paid), i'd like to count how many paid users and free users and basing on those results i will draw a pie chart with the percentage of each kind of users
this my try i tried with for a long time but i'dont arrive to show the chart,
thanks :)
<?php
$connection = new MongoClient();
$collection = $connection->pato->user;
$cursor = $collection->find();
$cursor = $collection->find(array("paid"=>true));
$x=$cursor->count();
$cursor = $collection->find(array("paid"=>false));
$y=$cursor->count();
$myurl[]="['Option','Value']";
$myurl[]=[['Free users', $y],['Paid users', $x]];
?>
<html>
<head>
<!--Load the AJAX API-->
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
// Set chart options
var options = {'title':'User statistics',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('userStatsDiv'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}</script>
<body>
<div id="usageStatsDiv" style="width:700; height:500"></div>
</body>
</html>
I think your problem is with your JSON:
var data=google.visualization.arrayToDataTable([
<?echo(implode(",",$myurl));?>
]);
It looks like you're trying to build the JSON string yourself. Let PHP do the work for you instead - use json_encode instead, like this:
var data=google.visualization.arrayToDataTable([
<?php echo json_encode($data); ?>
]);
You'll need to build your $data array so that it gives you the correct elements, but I think you'll find that the end result is cleaner and easier to understand.

Categories