I'm using Google GeoChart to show how many orders we have had from different countries for a particular month. With the data I'm feeding it, I've got it working all correctly.
However, what I would like to know is if there is a way to show the country name on hover on those that are dataless.
For example, here's some sample data I have:
function drawMap() {
var mapdata = google.visualization.arrayToDataTable([
['Country', 'Orders'],
['United Kingdom', 20],
['Ireland', 10],
['France', 3],
['Spain', 3],
['Germany', 2],
['Norway', 1],
['Sweden', 1]
]);
var mapoptions = {
width: 980,
colorAxis: {minValue: 0, colors: ['#6ED0DF', '#3266CC']}
}
var mapchart = new google.visualization.GeoChart(document.getElementById('mapchart'));
mapchart.draw(mapdata, mapoptions);
}
As you can see from my sample data, I've got data for a number of European countries so when the map is rendered on the screen, it will show the country name when you hover over those above. However, when I hover over Belgium or Poland (for example), the map doesn't show the name of the country.
Is there a way to show this? Ideally, I don't want to list ALL countries in mapdata - is there a function I can run that will show the other countries names? Even if it has to say 0 or N/A for the data...
Just for reference, I'm using PHP to get the data we need to populate the map from a MySQL database.
Related
**
I used Google Pie chart using PHP MySQL. If I put my mouse on the
chart it only shows 2 column data from the row. But there are three
columns in that table & I want to show all the columns from the row. I
have written this code to show 3rd column but it doesn't work.
**
var data = google.visualization.arrayToDataTable([
['Problems', 'Sufferer', 'Solutions'],
<?php
while($row = $res->fetch_assoc()){
echo "['".$row['Problems']."',".$row['sum(Sufferer)'].", '".$row['Solutions']."'],";
}
?>
]);
How can I solve this problem? picture of my Pie Chart output example
Google Pie chart only supports 2 columns refer Google Pie Chart
The first one is the slice label and the second one is the slice value.
If you wish to add more information to your chart, you can make use of the tooltip which is displayed on hover.
For more information on columns and roles, refer Column Roles
By default only the slice label and slice value with percentage will be shown in the tooltip of the chart.
This can be customized by passing data in the below format
Data format
var data = google.visualization.arrayToDataTable([
['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
['Pepperoni', 33, "Most popular"],
]);
If you wish to customize the rendering of the tooltip, it can be achieved by passing HTML data as the content of the tooltip.
For more information on tooltips and customizing HTML content, refer Tooltips
Example
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
['Pepperoni', 33, "Most popular"],
['Hawaiian', 26, "Popular"],
['Mushroom', 22, "Somewhat popular"],
['Sausage', 10, "Less popular"]
]);
var options = {
title: 'Pizza Popularity'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
OK, i need to get csgo inventory with steam API . i use this url
https://api.steampowered.com/IEconItems_730/GetPlayerItems/v1key=$api_key&steamids=$steamid
and i use this url for access to all csgo items.
https://api.steampowered.com/IEconItems_730/GetSchema/v2
problem 1, is i cant understand the returned value in first url. there is no item name, image and ... .
this is how it will return
"id": 547938992,
"original_id": 547938992,
"defindex": 13,
"level": 1,
"quality": 4,
"inventory": 53,
"quantity": 1,
"rarity": 1,
"attributes":
problem 2, when is use second url to get all of csgo skins. it just returns vanilla skins. how can i get full skins like other websites : opskins , bitskins, csgolounge and .... .
I know there is alot of question like this in Stackoverflow but none of them answer the way i can understand.
and I am sorry for my poor English.
For my project I use another url for steam's API,
"http://steamcommunity.com/profiles/*insert steamId*/inventory/json/730/2"
You can try to use your steamID and paste it into your browser and you will see how the response looks like. This is what you will be working with.
If you make a request with this url you will get a response with a json object which have two parts. One part is called rgInventory(ie. data.rgInventory)and contains ids for each skin in the users csgo-inventory. The second part is called rgDescriptions(ie. data.rgDescriptions) and contains info/name/img url for each skin. To add the info to the skins the user have in rgInventory you need to compare the classId for each item on both the rgInventoryand rgDescriptions. The classIdis the id which decide which type of weapon it is, therefore the classid is not unique.
So what Im doing is using two for-loops, and compares the ids so I can add the item_url, market_name etc. To the rgInventory array which I then I send away as the callback. Like this (javascript):
var ids = getID(data.rgInventory);
var item = getItems(data.rgDescriptions);
for (var i = 0; i < ids.length; i++) {
for (var k = 0; k < item.length; k++) {
if (ids[i].classid == item[k].classid) {
ids[i].market_name = item[k].market_name;
ids[i].icon_url = item[k].icon_url;
ids[i].tradable = item[k].tradable;
}
}
}
So if the classids of both items is the same I will add the information I want to the variable "ids" which in this case is a copy of rgInventory. When the for-loops are done I send away the ids-variable as my callback.
Feel free to ask questions, and sorry if this is confusing. Remember to type the url I linked with your steam-profile in your browser and see the result.
Hope it helps!
I have a list of guests that I want to be able to use in the jQuery autocomplete but I can't seem to get the format correct. I'm using CakePHP 2.3.8 and have a list of guests sent from my controller to view. When I type into the text box, I get the following error
//in reference to source of the elements to populate the autocomplete list
Property 'source' of object [object Object] is not a function
I searched for this error on here, but I couldn't find anything related to converting a PHP array while also accounting for the index number of that item. I have a PHP array in the format of
echo "<pre>"; print_r($guest_list); echo "</pre>";
//results in the following, where the index is the guest's ID
array(
[1] => guest a,
[2] => guest b,
[3] => guest c
)
Keep in mind, the index refers to the guest's ID.
I used json_encode to convert the php $guests array which results in the following format
var guests = {"1":"guest a","2":"guest b","3":"guest c"};
I noticed in the documentation the source of the data is usually in a format like
var guests = [guest_a, guest_b, guest_c];
Keep in mind index refers to the guest's ID, so I need to use this number to make sure the correct guest is chosen, if there happens to be two guests with the same name
So, here's the javascript/jquery for the autocomplete box
var guests = <?php echo json_encode($guest_list); ?>;
$(function() {
$( "#guests_autocomplete" ).autocomplete({
source: guests
});
});
How can I properly format my guests array to work with autoComplete and still keep track of the guest's id?
use
var guests = ["<?php echo implode('","',$guest_list); ?>"];
instead of
var guests = <?php echo json_encode($guest_list); ?>;
and if guest names are unique you can use array_search to find id
I am using jqxdropdownlist.js for dropdown in PHP. While onchanging I need to redirect respective pages.
The probem is for example in my dropdown i have the following values.
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
];
// Create a jqxDropDownList
$("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 0, width: '200px', height: '25px' });
In that I want to choose "Café au lait" it should be in 2 in C series. While clicking C letter the drop down comes to 1st series of C that is Café Bombón after it will redirect to Café Bombón page. But I need to redirect to next series.
I am using the below code for Onchage function.
$("#jqxWidget").change(function(){
var val1=$("#jqxWidget").jqxDropDownList('getItem', args.index);
window.location.href=val1.value;
});
Thanks in advance.
Try using this way and see if this works for you:
// i think this will be your hidden input's id change event so
$("#jqxWidget").change(function(){
var val1=$(this).val();
window.location.href=val1;
});
Hello People here is my Google scattered chart code what I am using:
require '/lib/GoogleChart.php';
require '/lib/markers/GoogleChartShapeMarker.php';
require '/lib/markers/GoogleChartTextMarker.php';
$Variance=array();
$Emp_RecFactor=array();
$Emp_Id=array();
//$Emp_FirstName=array();
$EquityGraph=new EquityGraph();
$EquityGraph->Graph();
$DrawGraph=$EquityGraph->DrawGraph;
foreach($DrawGraph as $key=>$value)
{
$Variance[]=$value["Variance"];//for multiple values ,array
$Emp_RecFactor[]=$value["Emp_RecFactor"];//single value
$Emp_Id[]=$value["Emp_Id"];//single value
}
$_GET['Variance']=$Variance;
$_GET['Emp_RecFactor']=$Emp_RecFactor;
print_r($Emp_RecFactor);
$chart = new GoogleChart('lc', 500, 200);
// manually forcing the scale to [0,100]
$chart->setScale(0,100);
// add one line
$data = new GoogleChartData($Variance);
$chart->addData($data);
// customize y axis
$y_axis = new GoogleChartAxis('y');
$y_axis->setDrawTickMarks(false)->setLabels(array(-5,0,5));
$chart->addAxis($y_axis);
// customize x axis
$x_axis = new GoogleChartAxis('x');
$x_axis->setTickMarks(5);
$chart->addAxis($x_axis);
// add a shape marker with a border
$shape_marker = new GoogleChartShapeMarker(GoogleChartShapeMarker::CIRCLE);
$shape_marker->setSize(6);
$shape_marker->setBorder(2);
$shape_marker->setData($data);
$chart->addMarker($shape_marker);
// add a value marker
$value_marker = new GoogleChartTextMarker(GoogleChartTextMarker::VALUE);
$value_marker->setData($data);
$chart->addMarker($value_marker);
//~ header('Content-Type: image/png');
echo $chart->toHtml();
As you can see in the code I have used $Variance array passing to $data now I need to use one more array $Emp_RecFactor and I need to draw a graph between those two...
I also want to add mouse over feature to this so that if someone hovers over the selected point it should display different things for different selected points -how do I do that?
To draw a Google scattered chart between two arrays you have to use code as below
var data = google.visualization.arrayToDataTable([
['Age', 'Array1', 'Array2'],
[8, 12, 15],
[4, 5.5, 0],
[11, 0, 14],
[4, 9, 5],
[3, 3.5, 9],
[6.5, 7, 13]
]);
And it has a default tooltip to show the data while hovering the selected point. We can also customize Tooltip content by using html tags.
To view a working sample for this go to the site jqfaq.com(Sample) and a customization of Tooltip content go to the site jqfaq.com(customizing Tooltip)