I am using this code for making a geo chart and I am getting the country and popularity on mouse over ,
I want to display additional fields or string along with these values but in new line next to them..for example
Country : India
Popularity :100
Value:200
Share:100
How can I achieve this ? please help regarding this.
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
just go thorough this link
http://jsfiddle.net/SCjm8/44/
Related
so i want to make callback graph that can display the graph within theres two widget there (radio and selectbox), but i have some problem in here, the radio button (gender clasify) theres no change when i choose the gender, the graph still stay at same graph, and i want to input the selectbox with variable of the 'City' but theres somethin error message "DuplicateWidgetID"
this is my code:
with st.expander('Favorite product by Gender within city'):
column1, column2 = st.columns([3,1])
#Variables
#male_product = df[df['gender'] == 'Male'].groupby(['product_line','gender']).count()['quantity'].sort_values(ascending=False).reset_index()
#female_product = df[df['gender'] == 'Female'].groupby(['product_line','gender']).count()['quantity'].sort_values(ascending=False).reset_index()
#Callback
selected_gender = st.radio('What is your Gender:', ['Male', 'Female'], index = 0)
select_city = column2.selectbox('Select City', df.sort_values('City').City.unique())
male_product=px.histogram(df.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)
female_product=px.histogram(df.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)
if selected_gender == 'Male':
st.write('What men buy most!')
st.plotly_chart(male_product, use_container_width=True)
else:
st.write('What female buy most!')
st.plotly_chart(female_product, use_container_width=True)
and the display graph is
but theres will be error when i entry "select_city" to the code and theres will be notification like this:
thanks for your attention, and can someone help me.
This involves creating a dataframe with gender and city filters. I just created a sample data to demonstrate the solution.
Code
import streamlit as st
import plotly.express as px
import pandas as pd
data = {
'City': ['c1', 'c2', 'c3', 'c1', 'c3', 'c2', 'c1'],
'product_line': ['p1', 'p2', 'p3', 'p3', 'p2', 'p1', 'p4'],
'quantity': [8, 4, 3, 12, 5, 6, 4],
'gross_income': [250, 150, 300, 250, 300, 400, 500],
'gender': ['Male', 'Female', 'Male', 'Male', 'Female', 'Female', 'Male']
}
df = pd.DataFrame(data)
st.write(df)
with st.expander('Favorite product by Gender within city'):
column1, column2 = st.columns([3,1])
# Allow the user to select a gender.
selected_gender = st.radio('What is your Gender:', df.gender.unique(), index = 0)
# Apply gender filter.
gender_product = df[df['gender'] == selected_gender]
# Allow the user to select a city.
select_city = column2.selectbox('Select City', df.sort_values('City').City.unique())
# Apply city filter
city_gender_product = gender_product[gender_product['City'] == select_city]
# Use the city_gender_product dataframe as it has filters for gender and city.
fig = px.histogram(city_gender_product.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)
if selected_gender == 'Male':
st.write('What men buy most!')
else:
st.write('What female buy most!')
st.plotly_chart(fig, use_container_width=True)
Output
1. Initial view or Male/city c1
2. Male/c3
3. Female/c2
How do I best use data objects for React Google Charts so I can access more information than just the 2 co-ordinates values.
Example:
https://codesandbox.io/s/react-google-charts-trendline-k727v9
The data object is just an array with x/y values: price and mileage.
export const data = [
["mileage", "price", { role: "style" }],
[5000, 12700, "green"],
[10000, 11200, "red"],
[15000, 9800, "red"],
[20000, 9200, "green"],
[25000, 8000, "red"],
[30000, 7200, "green"],
[35000, 5400, "green"]
];
The real object I would like to use would have the same x/y values, but a number of more key/value pairs, e.g.:
export const data = [
["mileage", "price", 'status', 'url', 'age'],
[5000, 12700, 'sold', 'sth.com', 13],
[10000, 11200, 'sold', 'sth.com', 13],
[15000, 9800, 'sold', 'sth.com', 13],
[20000, 9200, 'sold', 'sth.com', 13],
[25000, 8000, 'sold', 'sth.com', 13],
[30000, 7200, 'sold', 'sth.com', 13],
[35000, 5400, 'sold', 'sth.com', 13]
];
First of all sth. likle this throws an error because the values are not all of the same type, numbers and strings in this case.
Secondly I would like to be able to access these additional values in my chart event function. E.g. Click on a node and not only access price and mileage but also display all the other data associated with this node.
Obviously I could filter my original data array, split it into two, then fit the pieces back together again when I need a bit of data. But is that really the way to go?
I have use Nivo Charts before. There you could have complex objects and simply define which keys should be used to paint the nodes and still access all other keys/values associated with a data object. So I would use "mileage" and "price to paint the dots" but still have all the other key/values accessible as part of the data object for anything else I may want to do with it. I have not been able to figure out how to do sth. similar with React Google Charts.
Also d3-shape allows you to draw a line specifying 2 key/value pairs as the coordinates from a data object that can have any number of key/value pairs, not just x/y, e.g.:
const lineGenerator = line()
.x((d) => xScale(d.data.myField))
.y((d) => yScale(d.data.myOtherField))
Thank you!
I wanted to create a dataframe by expanding the child list object along with parent objects.
Obviously trying pd.DataFrame(lst) does not work as it creates data frame with three columns only and keeps the child object as one column.
Is it possible to do this in one line instead of iterating through list to expand each child object? Thank you in advance.
I have a list object in python like this:
lst = [
{
'id': 'rec1',
'fields': {
'iso': 'US',
'name': 'U S',
'lat': '38.9051',
'lon': '-77.0162'
},
'createdTime': '2021-03-16T13:03:24.000Z'
},
{
'id': 'rec2',
'fields': {'iso': 'HK', 'name': 'China', 'lat': '0.0', 'lon': '0.0'},
'createdTime': '2021-03-16T13:03:24.000Z'
}
]
explected dataframe:
Use json_normalize:
df = pd.json_normalize(lst)
print (df)
id createdTime fields.iso fields.name fields.lat fields.lon
0 rec1 2021-03-16T13:03:24.000Z US U S 38.9051 -77.0162
1 rec2 2021-03-16T13:03:24.000Z HK China 0.0 0.0
I am using Python 2.7 and Pandas Profiling to generate a report out of a dataframe. Following is my code:
import pandas as pd
import pandas_profiling
# the actual dataset is very large, just providing the two elements of the list
data = [{'polarity': 0.0, 'name': u'danesh bhopi', 'sentiment': 'Neutral', 'tweet_id': 1049952424818020353, 'original_tweet_id': 1049952424818020353, 'created_at': Timestamp('2018-10-10 14:18:59'), 'tweet_text': u"Wouldn't mind aus 120 all-out but before that would like to see a Finch \U0001f4af #PakVAus #AUSvPAK", 'source': u'Twitter for Android', 'location': u'pune', 'retweet_count': 0, 'geo': '', 'favorite_count': 0, 'screen_name': u'DaneshBhope'}, {'polarity': 1.0, 'name': u'kamal Kishor parihar', 'sentiment': 'Positive', 'tweet_id': 1049952403980775425, 'original_tweet_id': 1049952403980775425, 'created_at': Timestamp('2018-10-10 14:18:54'), 'tweet_text': u'#the_summer_game What you and Australia think\nPlay for\n win \nDraw\n or....! #PakvAus', 'source': u'Twitter for Android', 'location': u'chembur Mumbai ', 'retweet_count': 0, 'geo': '', 'favorite_count': 0, 'screen_name': u'kaluparihar1'}]
df = pd.DataFrame(data) #data is a python list containing python dictionaries
pfr = pandas_profiling.ProfileReport(df)
pfr.to_file("df_report.html")
The screenshot of the part of the df_report.html file is below:
As you can see in the image, the Unique(%) field in all the variables is 0.0 although the columns have unique values.
Apart from this, the chart in the 'location' variable is broken. There is no bar for the values 22, 15, 4 and the only bar is for the maximum value only. This is happening in all the variables.
Any help would be appreciated.
I'm trying to make a chart like with c3.js.
For the bubble size I create an array for each "continent" holding the population as a factor to increase the bubble size. Also the country name is stored in the same manner.
When adding the data points to the chart as well as when adding the bubble sizes/country names to the array, the indices are the same. E.g. col_2[0] in the bubbleInfo array is "China". Also in the data columns col_2[0] and col_2_x[0] are 76 and 12000 which are the values for China.
However, in the section where I dynamically get the bubble radius/country name, the index I get from the function parameter is not the one of the col_2 arrays. Instead I get the index in the order in which the dots are spead along the x-Axis.
E.g. I add for x-Axis China (12000), India(5800), Indonesia(9000) in this order.
I'd expect to get index 1 for India, but I get index 0, because 5800 is the lowest of the x values.
Because of that I cannot properly map the indices on the bubble sizes/country names, since the indices are wrong.
Is this a bug and if so, how can I properly map the bubble sizes/country names then?
Here is the JSFiddle:
var chart_3_bubbleSize = {
"col_2": [10.0, 9.0, 3.9, 2.5, ],
"col_1": [3.0, 2.5, ],
"col_3": [2.5, 5.5, ],
};
...
var chart_3_bubbleInfo = {
"col_2": ["China", "India", "Indonesia", "Japan", ],
"col_1": ["Russia", "Germany", ],
"col_3": ["Mexico", "USA", ],
};
...
columns: [
['col_2', 76, 66, 71, 86],
['col_2_x', 12000, 5800, 9000, 36000],
['col_1', 72, 80.4],
['col_1_x', 25000, 40000],
['col_3', 76, 78],
['col_3_x', 16000, 50000],
],
...
point:
{
r: function(d)
{
/*d.index gives the index according to the order along the x-axis, which leads to wrong result, when trying to map to country names/bubble sizes*/
return 2 * chart_3_bubbleSize[d.id][d.index];
}
},
https://jsfiddle.net/51oLxqyt/1/
The first green bubble in the lower left corner should be India, but it has the label "China" and the bubble size of China, because China is at index 0 in the bubbleInfo and bubbleSize arrays.
There is an not documented attribute data.xSort = false, which keeps the original index, which makes it possible to map more dimension e.g. for scatter charts.
More info here: https://github.com/c3js/c3/issues/547#issuecomment-56292971