I've got a chart displayed using Highcharts with data that spans about 6 days, defaulting the zoom to 1 day. However, it always zooms down to the last 24 hours entered (the zoom-bar is all the way to the right).
How can I have it default to zoom all the way to the left (to the earliest date entered)?
Code:
$('#container').highcharts('StockChart', {
rangeSelector:{
buttons : [{
type: 'day',
count: 1,
text: 'Day'
},
{
type: 'hour',
count: 6,
text: ' 6-Hour '
}],
selected : 0,
inputEnabled: false
},
title : {
text : 'Temperature'
},
series : [
{
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [[1422979200000, 27], [1422982800000, 27], [1422986400000, 27], [1422990000000, 27], [1422993600000, 28], [1422997200000, 28], [1423000800000, 29], [1423004400000, 29], [1423008000000, 29], [1423011600000, 29], [1423015200000, 29], [1423018800000, 28], [1423022400000, 28], [1423026000000, 28], [1423029600000, 27], [1423033200000, 26], [1423036800000, 27], [1423040400000, 27], [1423044000000, 29], [1423047600000, 28], [1423051200000, 27], [1423054800000, 27], [1423058400000, 26], [1423062000000, 26], [1423065600000, 25], [1423069200000, 24], [1423072800000, 22], [1423076400000, 22], [1423080000000, 21], [1423083600000, 19], [1423087200000, 18], [1423090800000, 17], [1423094400000, 17], [1423098000000, 16], [1423101600000, 15], [1423105200000, 14], [1423108800000, 14], [1423112400000, 13], [1423116000000, 13], [1423119600000, 11], [1423123200000, 11], [1423126800000, 11], [1423130400000, 12], [1423134000000, 12], [1423137600000, 13], [1423141200000, 14], [1423144800000, 14], [1423148400000, 14], [1423152000000, 14], [1423155600000, 13], [1423159200000, 12], [1423162800000, 11], [1423166400000, 10], [1423170000000, 9], [1423173600000, 9], [1423177200000, 8], [1423180800000, 8], [1423184400000, 7], [1423188000000, 7], [1423191600000, 7], [1423195200000, 6], [1423198800000, 6], [1423202400000, 6], [1423206000000, 7], [1423209600000, 7], [1423213200000, 9], [1423216800000, 13], [1423220400000, 16], [1423224000000, 20], [1423227600000, 23], [1423231200000, 26], [1423234800000, 27], [1423238400000, 28], [1423242000000, 28], [1423245600000, 27], [1423249200000, 27], [1423252800000, 26], [1423256400000, 26], [1423260000000, 26], [1423263600000, 25], [1423267200000, 25], [1423270800000, 25], [1423274400000, 25], [1423278000000, 24], [1423281600000, 24], [1423285200000, 24], [1423288800000, 24], [1423292400000, 24], [1423296000000, 24], [1423299600000, 25], [1423303200000, 26], [1423306800000, 28], [1423310400000, 29], [1423314000000, 31], [1423317600000, 31], [1423321200000, 32], [1423324800000, 32], [1423328400000, 32], [1423332000000, 31], [1423335600000, 30], [1423339200000, 29], [1423342800000, 28], [1423346400000, 28], [1423350000000, 28], [1423353600000, 27], [1423357200000, 27], [1423360800000, 26], [1423364400000, 26], [1423368000000, 26], [1423371600000, 26], [1423375200000, 25], [1423378800000, 25], [1423382400000, 25], [1423386000000, 25], [1423389600000, 26], [1423393200000, 27], [1423396800000, 27], [1423400400000, 28], [1423404000000, 28], [1423407600000, 28], [1423411200000, 28], [1423414800000, 26], [1423418400000, 24], [1423422000000, 22], [1423425600000, 21], [1423429200000, 20], [1423432800000, 19], [1423436400000, 18], [1423440000000, 17], [1423443600000, 16], [1423447200000, 16], [1423450800000, 15], [1423454400000, 14], [1423458000000, 14], [1423461600000, 13], [1423465200000, 12], [1423468800000, 12], [1423472400000, 13], [1423476000000, 15], [1423479600000, 17], [1423483200000, 18], [1423486800000, 19], [1423490400000, 20], [1423494000000, 21], [1423497600000, 21], [1423501200000, 20], [1423504800000, 19], [1423508400000, 18], [1423512000000, 17], [1423515600000, 16], [1423519200000, 15], [1423522800000, 15], [1423526400000, 14], [1423530000000, 14], [1423533600000, 13], [1423537200000, 13], [1423540800000, 12], [1423544400000, 12], [1423548000000, 12], [1423551600000, 12], [1423555200000, 12], [1423558800000, 13], [1423562400000, 16], [1423566000000, 18], [1423569600000, 20], [1423573200000, 22], [1423576800000, 24], [1423580400000, 25]],
color: "#43E043"
}]
});
});
Example: http://jsfiddle.net/8kg2vy46/
As you can see, the earliest date is "Feb 3, 16:00" but it defaults the zoom to start "Feb 9, 15:00".
Related
Objective: I have fetched in insights data from my Instagram account using Instagram Graph API. Below I have a JSON object (audience_insights['data'].
[{'name': 'audience_city',
'period': 'lifetime',
'values': [{'value': {'London, England': 1,
'Kharkiv, Kharkiv Oblast': 1,
'Jamui, Bihar': 1,
'Burdwan, West Bengal': 1,
'Kolkata, West Bengal': 112,
'Dhulian, West Bengal': 1,
'Argonne, Wisconsin': 1,
'College Park, Georgia': 1,
'Pakaur, Jharkhand': 1,
'Bristol, England': 1,
'Delhi, Delhi': 1,
'Gaya, Bihar': 1,
'Howrah, West Bengal': 1,
'Kanpur, Uttar Pradesh': 1,
'Jaipur, Rajasthan': 2,
'Panipat, Haryana': 1,
'Saint Etienne, Rhône-Alpes': 1,
'Panagarh, West Bengal': 1,
'Bhagalpur, Bihar': 1,
'Frankfurt, Hessen': 1,
'Riyadh, Riyadh Region': 1,
'Roorkee, Uttarakhand': 1,
'Harinavi, West Bengal': 1,
'Secunderabad, Telangana': 1,
'Mumbai, Maharashtra': 3,
'Patna, Bihar': 11,
'Obando, Valle del Cauca': 1,
'Jaunpur, Uttar Pradesh': 1,
'Sitamau, Madhya Pradesh': 1},
'end_time': '2022-03-24T07:00:00+0000'}],
'title': 'Audience City',
'description': "The cities of this profile's followers",
'id': '17841406112341342/insights/audience_city/lifetime'},
{'name': 'audience_country',
'period': 'lifetime',
'values': [{'value': {'DE': 1,
'IN': 144,
'GB': 2,
'UA': 1,
'FR': 1,
'CO': 1,
'SA': 1,
'US': 2},
'end_time': '2022-03-24T07:00:00+0000'}],
'title': 'Audience Country',
'description': "The countries of this profile's followers",
'id': '17841406112341342/insights/audience_country/lifetime'},
{'name': 'audience_gender_age',
'period': 'lifetime',
'values': [{'value': {'F.13-17': 1,
'F.18-24': 20,
'F.25-34': 5,
'M.13-17': 4,
'M.18-24': 79,
'M.25-34': 15,
'M.35-44': 1,
'M.45-54': 3,
'U.13-17': 4,
'U.18-24': 16,
'U.25-34': 2,
'U.45-54': 3},
'end_time': '2022-03-24T07:00:00+0000'}],
'title': 'Gender and Age',
'description': "The gender and age distribution of this profile's followers",
'id': '17841406112341342/insights/audience_gender_age/lifetime'}]
I wish to loop through this and create three data frames:
First that shows demographic and count.
| | Location | Count |
| ---- | -------------- | ----- |
| 0 | London, England | 1 |
Second would be a similar data frame with country and count.
And, finally the last would show the gender and category against the count.
So far, I've been able to extract the three dictionaries that I eventually need to convert to separate data frames. I've stored the dictionaries in a list all_data.
all_data = []
for item in audience_insight['data']:
data = item['values'][0]['value']
all_data.append(data)
df_location = pd.DataFrame(all_data)
all_data
[{'London, England': 1,
'Kharkiv, Kharkiv Oblast': 1,
'Jamui, Bihar': 1,
'Burdwan, West Bengal': 1,
'Kolkata, West Bengal': 112,
'Dhulian, West Bengal': 1,
'Argonne, Wisconsin': 1,
'College Park, Georgia': 1,
'Bristol, England': 1,
'Bikaner, Rajasthan': 1,
'Delhi, Delhi': 1,
'Gaya, Bihar': 1,
'Howrah, West Bengal': 1,
'Jaipur, Rajasthan': 1,
'Kanpur, Uttar Pradesh': 1,
'Panipat, Haryana': 1,
'Saint Etienne, Rhône-Alpes': 1,
'Panagarh, West Bengal': 1,
'Panchagan, Odisha': 1,
'Bhagalpur, Bihar': 1,
'Frankfurt, Hessen': 1,
'Riyadh, Riyadh Region': 1,
'Roorkee, Uttarakhand': 1,
'Harinavi, West Bengal': 1,
'Mumbai, Maharashtra': 3,
'Patna, Bihar': 11,
'Obando, Valle del Cauca': 1,
'Jaunpur, Uttar Pradesh': 1,
'Hyderabad, Telangana': 1,
'Sitamau, Madhya Pradesh': 1},
{'DE': 1, 'IN': 144, 'GB': 2, 'FR': 1, 'CO': 1, 'UA': 1, 'SA': 1, 'US': 2},
{'F.13-17': 1,
'F.18-24': 20,
'F.25-34': 5,
'M.13-17': 4,
'M.18-24': 79,
'M.25-34': 16,
'M.35-44': 1,
'M.45-54': 3,
'U.13-17': 4,
'U.18-24': 15,
'U.25-34': 2,
'U.45-54': 3}]
I want to be able to convert each of these dictionaries into a data frame such that the keys are in the first column and the values are in the second.
Thank you for your help!
Hello I have read few post before writing here.
Here i have a JSON like the below.
{'jsonrpc': '2.0', 'result':
{'trades':
[{'trade_seq': 339, 'trade_id': '71103925', 'timestamp': 1585866220152, 'tick_direction': 2, 'price': 0.091, 'iv': 266.73, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6821.89, 'direction': 'sell', 'amount': 0.1}, {'trade_seq': 338, 'trade_id': '71037635', 'timestamp': 1585847774328, 'tick_direction': 0, 'price': 0.122, 'iv': 200.56, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 7101.86, 'direction': 'sell', 'amount': 8.0},
{'trade_seq': 337, 'trade_id': '71023360', 'timestamp': 1585847012712, 'tick_direction': 0, 'price': 0.12, 'iv': 188.74, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 7089.71, 'direction': 'buy', 'amount': 1.0}, {'trade_seq': 336, 'trade_id': '71009013', 'timestamp': 1585843885138, 'tick_direction': 0, 'price': 0.0945, 'iv': 121.64, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6899.63, 'direction': 'buy', 'amount': 0.2},
{'trade_seq': 335, 'trade_id': '70994062', 'timestamp': 1585838997413, 'tick_direction': 1, 'price': 0.08, 'iv': 109.25, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6787.83, 'direction': 'buy', 'amount': 0.1}, {'trade_seq': 334, 'trade_id': '70991283', 'timestamp': 1585838566468, 'tick_direction': 0, 'price': 0.08, 'iv': 125.43, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6782.84, 'direction': 'buy', 'amount': 0.1},
{'trade_seq': 333, 'trade_id': '70990456', 'timestamp': 1585838539284, 'tick_direction': 0, 'price': 0.079, 'iv': 137.22, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6768.48, 'direction': 'buy', 'amount': 0.1}, {'trade_seq': 332, 'trade_id': '70990138', 'timestamp': 1585838532936, 'tick_direction': 0, 'price': 0.075, 'iv': 117.79, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6744.82, 'direction': 'buy', 'amount': 5.0},
{'trade_seq': 331, 'trade_id': '70988457', 'timestamp': 1585838152445, 'tick_direction': 0, 'price': 0.07, 'iv': 113.82, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6708.84, 'direction': 'buy', 'amount': 5.4}, {'trade_seq': 330, 'trade_id': '70982630', 'timestamp': 1585833578887, 'tick_direction': 2, 'price': 0.06, 'iv': 95.59, 'instrument_name': 'BTC-3APR20-6250-C', 'index_price': 6636.8, 'direction': 'buy', 'amount': 2.0}
],
'has_more': True
}, 'usIn': 1585982752359369, 'usOut': 1585982752359671, 'usDiff': 302, 'testnet': False}
Here i want to convert this json to pandas data frame and mainly i wish to get the pandas data frame of 'trades' like
trade_seq trade_id timestamp ... direction amount
Appreciate any easy method to do this conversion to pandas ,I am confused with this addition in the dictionary {'jsonrpc': '2.0', 'result':
{'trades':.
Appreciate your help
import pandas as pd
df = pd.DataFrame(j['result']['trades'])
Use json.json_normalize:
from pandas.io.json import json_normalize
df = json_normalize(d['result'], 'trades')
print (df)
trade_seq trade_id timestamp tick_direction price iv \
0 339 71103925 1585866220152 2 0.0910 266.73
1 338 71037635 1585847774328 0 0.1220 200.56
2 337 71023360 1585847012712 0 0.1200 188.74
3 336 71009013 1585843885138 0 0.0945 121.64
4 335 70994062 1585838997413 1 0.0800 109.25
5 334 70991283 1585838566468 0 0.0800 125.43
6 333 70990456 1585838539284 0 0.0790 137.22
7 332 70990138 1585838532936 0 0.0750 117.79
8 331 70988457 1585838152445 0 0.0700 113.82
9 330 70982630 1585833578887 2 0.0600 95.59
instrument_name index_price direction amount
0 BTC-3APR20-6250-C 6821.89 sell 0.1
1 BTC-3APR20-6250-C 7101.86 sell 8.0
2 BTC-3APR20-6250-C 7089.71 buy 1.0
3 BTC-3APR20-6250-C 6899.63 buy 0.2
4 BTC-3APR20-6250-C 6787.83 buy 0.1
5 BTC-3APR20-6250-C 6782.84 buy 0.1
6 BTC-3APR20-6250-C 6768.48 buy 0.1
7 BTC-3APR20-6250-C 6744.82 buy 5.0
8 BTC-3APR20-6250-C 6708.84 buy 5.4
9 BTC-3APR20-6250-C 6636.80 buy 2.0
I am trying to search a table where I have daily ranked keywords (SEO keywords). Therefore I have index on a key_id per keyword, and new position value per each keyword.
I would like to find out how I can select the keywords that have the greatest change in value?
MariaDB Table and data:
CREATE TABLE IF NOT EXISTS `daily_rank` (
`rankID` int(24) NOT NULL AUTO_INCREMENT,
`created` timestamp NULL DEFAULT current_timestamp(),
`key_id` int(100) NOT NULL DEFAULT 0,
`position` int(12) NOT NULL DEFAULT 0,
`keyword` varchar(50) NOT NULL DEFAULT '0',
PRIMARY KEY (`rankID`),
KEY `created` (`created`),
KEY `key_id` (`key_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3594 DEFAULT CHARSET=latin1;
INSERT INTO `daily_rank` (`rankID`, `created`, `key_id`, `position`, `keyword`) VALUES
(3594, '2019-10-09 17:59:07', 53, 4, 'SEO'),
(3595, '2019-10-09 17:59:07', 100, 3, 'agency'),
(3596, '2019-10-09 17:59:07', 397, 1, 'bureau marketing'),
(3597, '2019-10-09 17:59:07', 798, 7, 'marketing agency'),
(3598, '2019-10-09 17:59:07', 98, 8, 'search engine optimization'),
(3599, '2019-10-09 17:59:07', 346, 8, 'website optimization'),
(3600, '2019-10-09 17:59:07', 555, 9, 'agency'),
(3608, '2019-10-08 18:07:00', 53, 4, 'SEO'),
(3609, '2019-10-08 18:07:00', 100, 4, 'agency'),
(3610, '2019-10-08 18:07:00', 397, 3, 'bureau marketing'),
(3611, '2019-10-08 18:07:00', 798, 1, 'marketing agency'),
(3612, '2019-10-08 18:07:00', 98, 2, 'search engine optimization'),
(3613, '2019-10-08 18:07:00', 346, 2, 'website optimization'),
(3614, '2019-10-08 18:07:00', 555, 2, 'agency'),
(3615, '2019-10-07 18:07:22', 53, 4, 'SEO'),
(3616, '2019-10-07 18:07:22', 100, 6, 'agency'),
(3617, '2019-10-07 18:07:22', 397, 6, 'bureau marketing'),
(3618, '2019-10-07 18:07:22', 798, 6, 'marketing agency'),
(3619, '2019-10-07 18:07:22', 98, 4, 'search engine optimization'),
(3620, '2019-10-07 18:07:22', 346, 6, 'website optimization'),
(3621, '2019-10-07 18:07:22', 555, 6, 'agency'),
(3622, '2019-10-07 18:07:22', 53, 5, 'SEO'),
(3623, '2019-10-07 18:07:22', 100, 4, 'agency'),
(3624, '2019-10-07 18:07:22', 397, 5, 'bureau marketing'),
(3625, '2019-10-07 18:07:22', 798, 3, 'marketing agency'),
(3626, '2019-10-07 18:07:22', 98, 6, 'search engine optimization'),
(3627, '2019-10-07 18:07:22', 346, 3, 'website optimization'),
(3628, '2019-10-07 18:07:22', 555, 5, 'agency'),
(3629, '2019-10-06 18:07:44', 53, 1, 'SEO'),
(3630, '2019-10-06 18:07:44', 100, 2, 'agency'),
(3631, '2019-10-06 18:07:44', 397, 2, 'bureau marketing'),
(3632, '2019-10-06 18:07:44', 798, 1, 'marketing agency'),
(3633, '2019-10-06 18:07:44', 98, 1, 'search engine optimization'),
(3634, '2019-10-06 18:07:44', 346, 2, 'website optimization'),
(3635, '2019-10-06 18:07:44', 555, 2, 'agency'),
(3636, '2019-10-06 18:07:44', 53, 2, 'SEO'),
(3637, '2019-10-06 18:07:44', 100, 2, 'agency'),
(3638, '2019-10-06 18:07:44', 397, 3, 'bureau marketing'),
(3639, '2019-10-06 18:07:44', 798, 2, 'marketing agency'),
(3640, '2019-10-06 18:07:44', 98, 2, 'search engine optimization'),
(3641, '2019-10-06 18:07:44', 346, 1, 'website optimization'),
(3642, '2019-10-06 18:07:44', 555, 1, 'agency'),
(3643, '2019-10-06 18:07:44', 53, 1, 'SEO'),
(3644, '2019-10-06 18:07:44', 100, 2, 'agency'),
(3645, '2019-10-06 18:07:44', 397, 1, 'bureau marketing'),
(3646, '2019-10-06 18:07:44', 798, 3, 'marketing agency'),
(3647, '2019-10-06 18:07:44', 98, 2, 'search engine optimization'),
(3648, '2019-10-06 18:07:44', 346, 1, 'website optimization'),
(3649, '2019-10-06 18:07:44', 555, 3, 'agency'),
(3650, '2019-10-06 18:07:44', 53, 3, 'SEO'),
(3651, '2019-10-06 18:07:44', 100, 1, 'agency'),
(3652, '2019-10-06 18:07:44', 397, 2, 'bureau marketing'),
(3653, '2019-10-06 18:07:44', 798, 3, 'marketing agency'),
(3654, '2019-10-06 18:07:44', 98, 1, 'search engine optimization'),
(3655, '2019-10-06 18:07:44', 346, 2, 'website optimization'),
(3656, '2019-10-06 18:07:44', 555, 1, 'agency');
How do I query so I can get the latest position for the keywords, and the change from a given date, and order the result to show the keywords with the greatest change?
I imagine a table like this:
[Keyword] - [Todays Position] - [Position Change from yesterday]
where it is ordered by the biggest change descending
UPDATE:
When calculating max-min the todays position is within this calculation, and will skew the result somewhat.
And when viewing todays position, I would like to see the keywords that have had the biggest change in position since compared date.
I think this is what you want.
SELECT a.keyword, a.position as today_position, b.biggest_position_change_since_yesterday
FROM daily_rank a
JOIN
(SELECT keyword, MAX(position) - MIN(position) AS biggest_position_change_since_yesterday
FROM daily_rank
WHERE cast(created as date) >= ADDDATE(curdate(),-1)
GROUP BY keyword) b
ON b.keyword = a.keyword
AND cast(created as date) = curdate()
ORDER by biggest_position_change_since_yesterday desc;
keyword today_position biggest_position_change_since_yesterday
agency 9 7
agency 3 7
website optimization 8 6
marketing agency 7 6
search engine optimization 8 6
bureau marketing 1 2
SEO 4 0
Test Case:
DB<>FIDDLE
SELECT keyword, MAX(position) max_position,MIN(position) min_position FROM daily_rank GROUP BY keyword;
+----------------------------+--------------+--------------+
| keyword | max_position | min_position |
+----------------------------+--------------+--------------+
| agency | 9 | 1 |
| bureau marketing | 6 | 1 |
| marketing agency | 7 | 1 |
| search engine optimization | 8 | 1 |
| SEO | 5 | 1 |
| website optimization | 8 | 1 |
+----------------------------+--------------+--------------+
Im trying to fill a HighCharts Heatmap with data returned from an SQL Query.
What i have in the JS file is
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("php/all-counties-sales-data-box.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-box-combined',
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
},
yAxis: {
categories: ['Lucozade', 'Rockstar', 'Sprite', 'Monster', '7Up', 'Fanta', 'Coke'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per Shell',
borderWidth: 1,
data:
[[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [0, 5, 67], [0, 6, 67],
[1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [1, 5, 48], [1, 6, 48],
[2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52],
[3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16],
[4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115],
[5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120],
[6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96],
[7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30],
[8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84],
[9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91],
[10, 0, 47],
[11, 0, 47],
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
});
});
And what im trying to fill it with is data from the query
$sth = mysql_query("Select SUM(Profit) as profitSum From FactSales GROUP BY ShellType, SaleMonth");
$rows1 = array();
$rows1['profit'] = 'profitSum';
while($rr = mysql_fetch_assoc($sth)) {
$rows1['series'][] = $rr['profitSum'];
}
$result = array();
array_push($result,$rows1);
What do i actually need to change for the "series" data to be filled with the data returned from the sql query?
Heres the JSON response as requested
[{"profit":"profitSum","data":[1329230,1796743,1789417,1327813,1457103,1198845,1859826,1770589,1555410,1310369,2183499,1212897,6424306,6426002,6345153,6167415,6969392,5974880,6407699,6278843,6622002,5962102,5198177,5386392,72991,2321397,1751565,2029890,642041,1314314,1322492,1557859,1647784,1831767,1347480,1739353,1742597,1636006,1728247,1709689,1206645,1383206,1119153,1378317,1527356,1937898,1485322,1404498,1868629,1635265,1860456,1293870,1485349,2031389,1834402,1291372,1838382,1616009,781641,1421830,1763592,1279535,1123468,2024766,975863,1461843,1318585,1137336,1111721,1407705,2349652,1260858,1144070,1219659,1378615,1354139,2015115,1408858,2650864,1810850,1380157,1844909,2055306,1913532,1701963]}]
I am trying to create a dot chart(bubble chart) using gRaphael. But their documentation is not so clear on how to add hover effects when the user hovers on the dots.
Could any one pls suggest me some examples or give some help tips on the same.
Thanx in advance.
you have to use aDotChart.hoverDot() for registering a "dot hover listener". The following is the source code of example http://cancerbero.vacau.com/gwt/graphael4gwtGallery/?test=dot1 that do what you mention. It is Java code not javascript! but i think it can help you to make an idea of the javascript code:
double[] xs = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23};
double[] ys = {7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7,
6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6,
5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1};
double[] data = {294, 300, 204, 255, 348, 383, 334, 217, 114, 33, 44, 26, 41, 39,
52, 17, 13, 2, 0, 2, 5, 6, 64, 153, 294, 313, 195, 280, 365, 392, 340, 184,
87, 35, 43, 55, 53, 79, 49, 19, 6, 1, 0, 1, 1, 10, 50, 181, 246, 246, 220,
249, 355, 373, 332, 233, 85, 54, 28, 33, 45, 72, 54, 28, 5, 5, 0, 1, 2, 3,
58, 167, 206, 245, 194, 207, 334, 290, 261, 160, 61, 28, 11, 26, 33, 46, 36,
5, 6, 0, 0, 0, 0, 0, 0, 9, 9, 10, 7, 10, 14, 3, 3, 7, 0, 3, 4, 4, 6, 28, 24,
3, 5, 0, 0, 0, 0, 0, 0, 4, 3, 4, 4, 3, 4, 13, 10, 7, 2, 3, 6, 1, 9, 33, 32, 6,
2, 1, 3, 0, 0, 4, 40, 128, 212, 263, 202, 248, 307, 306, 284, 222, 79, 39, 26,
33, 40, 61, 54, 17, 3, 0, 0, 0, 3, 7, 70, 199};
String[] axisy = {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
String[] axisx = {"12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"};
DotOpts opts = new DotOpts();
opts.setSymbol("o");
opts.setMax(10);
opts.setHeat(true);
opts.setAxis("0 0 1 1");
opts.setAxisxlabels(axisx);
opts.setAxisylabels(axisy);
final DotChart c1 = getGPaper().dotchart(10, 10, 620, 260, xs, ys, data, opts);
c1.hoverDot(new DotHoverListener() {
#Override
public void hoverOut(DotContext ctx) {
if(tag!=null)
tag.remove();
}
#Override
public void hoverIn(DotContext ctx) {
tag = (GShape) getGPaper().tag(ctx.getX(), ctx.getY(), ctx.getValue()+"", 0, ctx.getR()+2).
insertBefore(ctx).show();
}
});
Thanks for your reply cancerbero.
Here is my java script solution,
dotChart.hover(function(){//onmouseover
dotChart.covers = r.set();
dotChart.covers.push(r.tag(this.x, this.y, this.value , 0, 10).insertBefore(this));
}, function(){//onmouseout
if(dotChart.covers!=null){
dotChart.covers.remove();
}
});
This has worked fine :)