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]}]
Related
I am converting a nested json file having more than 100 records into a flattend csv file. The sample json file is shown below:
sampleJson = {
'record1':
{
'text':[ ['A', 'fried', 'is', 'a', 'nice', 'companion', '.'],
['The', 'birds', 'are', 'flying', '.']],
'values':[ [0, 1, 0, 0],
[1, 1, 0, 1]],
'pairs':[ [0, 2],
[2, 1]]
},
'record2':
{
'text':[ ['We', 'can', 'work', 'hard', 'together', '.'],
['Let', 'the', 'things', 'happen', '.'],
['There', 'is', 'always', 'a', 'way', 'out', '.']],
'values':[ [0, 1, 0, 0],
[0, 1, 1, 1],
[1, 1, 0, 1]],
'pairs':[ [0, 2],
[3, 4],
[2, 1]]
},
..... 100 records
}
The csv structure i want from this nested json is:
record1, A friend is a nice companion., 0, 1, 0, 0, [0, 2]
, The bids are flying., 1, 1, 0, 1, [2, 1]
record2, We can work hard together., 0, 1, 0, 0, [0, 2]
, Let the things happen., 0, 1, 1, 1, [4, 3]
, There is always a way out., 1, 1, 0, 1, [2, 1]
record3,
....... upto 100 records
I used the following code to flatten the nested file:
def flatten_json(y):
out = {}
def flatten(x, name=''):
if type(x) is dict:
for a in x:
flatten(x[a], name + a + '_')
elif type(x) is list:
i = 0
for a in x:
flatten(a, name + str(i) + '_')
i += 1
else:
out[name[:-1]] = x
flatten(y)
return out
flatIt = flatten_json(sampleJson)
df= pd.json_normalize(flatIt)
df.to_csv('outPutFile.csv', encoding='utf-8')
print(df)
I am getting a long list of columns with a structure like record1.text, record1.values, record1.pairs, record2.text and so on with one row and also each word of the sentences in the text is in a separate column.
I will appreciate some help.
Thanks..
You can use this example to parse the Json to dataframe:
import pandas as pd
sampleJson = {
'record1':
{
'text':[ ['A', 'fried', 'is', 'a', 'nice', 'companion', '.'],
['The', 'birds', 'are', 'flying', '.']],
'values':[ [0, 1, 0, 0],
[1, 1, 0, 1]],
'pairs':[ [0, 2],
[2, 1]]
},
'record2':
{
'text':[ ['We', 'can', 'work', 'hard', 'together', '.'],
['Let', 'the', 'things', 'happen', '.'],
['There', 'is', 'always', 'a', 'way', 'out', '.']],
'values':[ [0, 1, 0, 0],
[0, 1, 1, 1],
[1, 1, 0, 1]],
'pairs':[ [0, 2],
[3, 4],
[2, 1]]
},
}
all_data = []
for k, v in sampleJson.items():
texts, values, pairs = v['text'], v['values'], v['pairs']
for t, val, p in zip(texts, values, pairs):
all_data.append({
'record': k,
'text': ' '.join(t),
'pairs': p,
**{'val_{}'.format(i): val_ for i, val_ in enumerate(val, 1)}
})
df = pd.DataFrame(all_data)
print(df)
Prints this dataframe:
record text pairs val_1 val_2 val_3 val_4
0 record1 A fried is a nice companion . [0, 2] 0 1 0 0
1 record1 The birds are flying . [2, 1] 1 1 0 1
2 record2 We can work hard together . [0, 2] 0 1 0 0
3 record2 Let the things happen . [3, 4] 0 1 1 1
4 record2 There is always a way out . [2, 1] 1 1 0 1
Since last weeks update in Google Spreadsheets, this code is not working properly anymore. Only when a user ENTERS data, timestamp appears, when a user PASTE data, nothing happens.
This is the code we use:
function onEditSwapsheet(e) {
var s = e.source.getActiveSheet(),
sheets = ["5B","10B","15B","20B","25B","30B","35B","40B","50B","60B","70B","80B","90B","100B" ],
watchCols = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100, 102, 104, 106, 108, 110,],
offsetCol = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
sheetInd = sheets.indexOf(s.getName()),
colInd = watchCols.indexOf(e.range.columnStart);
if (sheetInd === -1 || colInd === -1 ) return;
e.range.offset(0, offsetCol[colInd])
.setValue(!e.value ? null : Utilities.formatDate(new Date(), "GMT+0100", "HH:mm dd/MM"))
}
Well i have a issue somewhere in my code, this is not my cup of tea to say to fix this. Ive ran through this with a fine tooth brush practically to no luck, and thought someone could tell me where on my code im doing wrong on. Code error is this once again Error: Parse error on line 176:
...1, "furnace": 1, }, "ItemListCrates"
---------------------^
Expecting 'STRING', got '}
{
"ItemListBarrels": {
"rifle.ak": 4,
"ammo.handmade.shell": 1,
"ammo.pistol": 2,
"ammo.pistol.fire": 2,
"ammo.pistol.hv": 2,
"ammo.rifle": 3,
"ammo.rifle.explosive": 2,
"ammo.rifle.incendiary": 2,
"ammo.rifle.hv": 2,
"ammo.rocket.basic": 4,
"ammo.rocket.fire": 4,
"ammo.rocket.hv": 4,
"ammo.shotgun": 4,
"ammo.shotgun.slug": 2,
"antiradpills": 1,
"apple": 1,
"arrow.hv": 1,
"axe.salvaged": 2,
"barricade.concrete": 1,
"barricade.metal": 1,
"barricade.sandbags": 1,
"barricade.stone": 1,
"barricade.wood": 1,
"barricade.woodwire": 1,
"tool.binoculars": 1,
"black.raspberries": 4,
"bleach": 1,
"blueberries": 4,
"bone.club": 1,
"bucket.water": 1,
"tool.camera": 1,
"can.beans": 1,
"can.tuna": 1,
"candycane": 1,
"ceilinglight": 1,
"chair": 1,
"chocholate": 1,
"door.double.hinged.metal": 1,
"door.double.hinged.toptier": 1,
"door.double.hinged.wood": 1,
"door.hinged.toptier": 1,
"door.closer": 1,
"dropbox": 1,
"explosive.satchel": 4,
"explosive.timed": 4,
"explosives": 4,
"floor.grill": 1,
"floor.ladder.hatch": 1,
"fridge": 1,
"furnace.large": 1,
"gates.external.high.stone": 1,
"gates.external.high.wood": 1,
"gears": 2,
"burlap.gloves": 1,
"glue": 1,
"granolabar": 1,
"grenade.beancan": 4,
"fun.guitar": 1,
"hammer.salvaged": 2,
"hat.beenie": 1,
"hat.boonie": 1,
"bucket.helmet": 1,
"hat.candle": 1,
"hat.cap": 1,
"coffeecan.helmet": 2,
"hat.miner": 1,
"hatchet": 2,
"hazmatsuit": 3,
"hoodie": 2,
"icepick.salvaged": 2,
"jacket.snow": 1,
"jacket": 1,
"ladder.wooden.wall": 1,
"lantern": 1,
"largemedkit": 2,
"locker": 1,
"longsword": 1,
"mace": 1,
"machete": 1,
"mailbox": 1,
"map": 1,
"mask.balaclava": 1,
"mask.bandana": 1,
"metal.facemask": 1,
"metal.plate.torso": 1,
"metalblade": 2,
"metalpipe": 2,
"mining.quarry": 1,
"burlap.trousers": 1,
"pants": 1,
"roadsign.kilt": 3,
"pants.shorts": 1,
"pickaxe": 2,
"pistol.eoka": 1,
"pistol.revolver": 2,
"planter.large": 1,
"planter.small": 1,
"propanetank": 1,
"target.reactive": 1,
"riflebody": 3,
"roadsign.jacket": 2,
"roadsigns": 2,
"rope": 1,
"rug.bear": 1,
"rug": 1,
"salvaged.cleaver": 1,
"salvaged.sword": 1,
"weapon.mod.small.scope": 1,
"scrap": 1000,
"searchlight": 1,
"semibody": 2,
"sewingkit": 1,
"sheetmetal": 1,
"shelves": 1,
"shirt.collared": 1,
"shirt.tanktop": 1,
"shoes.boots": 1,
"shotgun.waterpipe": 2,
"guntrap": 1,
"shutter.metal.embrasure.a": 1,
"shutter.metal.embrasure.b": 1,
"shutter.wood.a": 1,
"sign.hanging.banner.large": 1,
"sign.hanging": 1,
"sign.hanging.ornate": 1,
"sign.pictureframe.landscape": 1,
"sign.pictureframe.portrait": 1,
"sign.pictureframe.tall": 1,
"sign.pictureframe.xl": 1,
"sign.pictureframe.xxl": 1,
"sign.pole.banner.large": 1,
"sign.post.double": 1,
"sign.post.single": 1,
"sign.post.town": 1,
"sign.post.town.roof": 1,
"sign.wooden.huge": 1,
"sign.wooden.large": 1,
"sign.wooden.medium": 1,
"sign.wooden.small": 1,
"weapon.mod.silencer": 1,
"weapon.mod.simplesight": 1,
"small.oil.refinery": 1,
"smallwaterbottle": 1,
"smgbody": 2,
"spear.stone": 1,
"spikes.floor": 1,
"spinner.wheel": 1,
"metalspring": 1,
"sticks": 2,
"surveycharge": 2,
"syringe.medical": 3,
"table": 1,
"techparts": 3,
"smg.thompson": 2,
"tshirt": 1,
"tshirt.long": 1,
"tunalight": 1,
"wall.external.high.stone": 1,
"wall.external.high": 1,
"wall.frame.cell.gate": 1,
"wall.frame.cell": 1,
"wall.frame.fence.gate": 1,
"wall.frame.fence": 1,
"wall.frame.netting": 1,
"wall.frame.shopfront": 1,
"wall.window.bars.metal": 1,
"wall.window.bars.toptier": 1,
"wall.window.bars.wood": 1,
"water.catcher.large": 1,
"water.catcher.small": 1,
"water.barrel": 1,
"waterjug": 1,
"water.purifier": 1,
"furnace": 1,
},
"ItemListCrates": {
"rifle.ak": 4,
"ammo.handmade.shell": 1,
"ammo.pistol": 2,
"ammo.pistol.fire": 2,
"ammo.pistol.hv": 2,
"ammo.rifle": 3,
"ammo.rifle.explosive": 2,
"ammo.rifle.incendiary": 2,
"ammo.rifle.hv": 2,
"ammo.rocket.basic": 4,
"ammo.rocket.fire": 4,
"ammo.rocket.hv": 4,
"ammo.shotgun": 4,
"ammo.shotgun.slug": 2,
"antiradpills": 1,
"apple": 1,
"arrow.hv": 1,
"axe.salvaged": 2,
"barricade.concrete": 1,
"barricade.metal": 1,
"barricade.sandbags": 1,
"barricade.stone": 1,
"barricade.wood": 1,
"barricade.woodwire": 1,
"tool.binoculars": 1,
"black.raspberries": 4,
"bleach": 1,
"blueberries": 4,
"bone.club": 1,
"bucket.water": 1,
"tool.camera": 1,
"can.beans": 1,
"can.tuna": 1,
"candycane": 1,
"ceilinglight": 1,
"chair": 1,
"chocholate": 1,
"door.double.hinged.metal": 1,
"door.double.hinged.toptier": 1,
"door.double.hinged.wood": 1,
"door.hinged.toptier": 1,
"door.closer": 1,
"dropbox": 1,
"explosive.satchel": 4,
"explosive.timed": 4,
"explosives": 4,
"floor.grill": 1,
"floor.ladder.hatch": 1,
"fridge": 1,
"furnace.large": 1,
"gates.external.high.stone": 1,
"gates.external.high.wood": 1,
"gears": 2,
"burlap.gloves": 1,
"glue": 1,
"granolabar": 1,
"grenade.beancan": 4,
"fun.guitar": 1,
"hammer.salvaged": 2,
"hat.beenie": 1,
"hat.boonie": 1,
"bucket.helmet": 1,
"hat.candle": 1,
"hat.cap": 1,
"coffeecan.helmet": 2,
"hat.miner": 1,
"hatchet": 2,
"hazmatsuit": 3,
"hoodie": 2,
"icepick.salvaged": 2,
"jacket.snow": 1,
"jacket": 1,
"ladder.wooden.wall": 1,
"lantern": 1,
"largemedkit": 2,
"locker": 1,
"longsword": 1,
"mace": 1,
"machete": 1,
"mailbox": 1,
"map": 1,
"mask.balaclava": 1,
"mask.bandana": 1,
"metal.facemask": 1,
"metal.plate.torso": 1,
"metalblade": 2,
"metalpipe": 2,
"mining.quarry": 1,
"burlap.trousers": 1,
"pants": 1,
"roadsign.kilt": 3,
"pants.shorts": 1,
"pickaxe": 2,
"pistol.eoka": 1,
"pistol.revolver": 2,
"planter.large": 1,
"planter.small": 1,
"propanetank": 1,
"target.reactive": 1,
"riflebody": 3,
"roadsign.jacket": 2,
"roadsigns": 2,
"rope": 1,
"rug.bear": 1,
"rug": 1,
"salvaged.cleaver": 1,
"salvaged.sword": 1,
"weapon.mod.small.scope": 1,
"scrap": 700,
"searchlight": 1,
"semibody": 2,
"sewingkit": 1,
"sheetmetal": 1,
"shelves": 1,
"shirt.collared": 1,
"shirt.tanktop": 1,
"shoes.boots": 1,
"shotgun.waterpipe": 2,
"guntrap": 1,
"shutter.metal.embrasure.a": 1,
"shutter.metal.embrasure.b": 1,
"shutter.wood.a": 1,
"sign.hanging.banner.large": 1,
"sign.hanging": 1,
"sign.hanging.ornate": 1,
"sign.pictureframe.landscape": 1,
"sign.pictureframe.portrait": 1,
"sign.pictureframe.tall": 1,
"sign.pictureframe.xl": 1,
"sign.pictureframe.xxl": 1,
"sign.pole.banner.large": 1,
"sign.post.double": 1,
"sign.post.single": 1,
"sign.post.town": 1,
"sign.post.town.roof": 1,
"sign.wooden.huge": 1,
"sign.wooden.large": 1,
"sign.wooden.medium": 1,
"sign.wooden.small": 1,
"weapon.mod.silencer": 1,
"weapon.mod.simplesight": 1,
"small.oil.refinery": 1,
"smallwaterbottle": 1,
"smgbody": 2,
"spear.stone": 1,
"spikes.floor": 1,
"spinner.wheel": 1,
"metalspring": 1,
"sticks": 2,
"surveycharge": 2,
"syringe.medical": 3,
"table": 1,
"techparts": 3,
"smg.thompson": 2,
"tshirt": 1,
"tshirt.long": 1,
"tunalight": 1,
"wall.external.high.stone": 1,
"wall.external.high": 1,
"wall.frame.cell.gate": 1,
"wall.frame.cell": 1,
"wall.frame.fence.gate": 1,
"wall.frame.fence": 1,
"wall.frame.netting": 1,
"wall.frame.shopfront": 1,
"wall.window.bars.metal": 1,
"wall.window.bars.toptier": 1,
"wall.window.bars.wood": 1,
"water.catcher.large": 1,
"water.catcher.small": 1,
"water.barrel": 1,
"waterjug": 1,
"water.purifier": 1,
"rocket.launcher": 4,
"flamethrower": 2,
"flameturret": 2,
}
}
There is no comma allowed after the last item of a Json-object:
"water.purifier": 1,
"furnace": 1, //<--Remove this comma
},
"flamethrower": 2,
"flameturret": 2,//<--Remove this comma
}
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".
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 :)