I want to fill a specific road with a specific color using mapbox-gl js or at least getting the geojson data of that specific road. Is there any specific and efficient way to get that done?
Found a way around it.
At first, I generated geojson data of a specific road (Beverly Glen Blvd, San Fernando, CA, USA) using the http://geojson.io provided by mapbox.
After that, I added three properties to the properties object of that geojson data (id, name, color) and using that property named color to fill the road which I utilized using the mapbox-gl js get expression like this.
line-color": ["string", ["get", "color"]],
Here's the codepen demo.
map.on("load", function() {
map.addLayer({
id: "1",
type: "line",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
id: "1",
name: "Beverly Glen Blvd",
color: "#000000"
},
geometry: {
type: "LineString",
coordinates: [
[-118.44586461782454, 34.15044515309062],
[-118.44606578350066, 34.14968601019978],
[-118.44618380069733, 34.14921542697057],
[-118.44627767801283, 34.14880699411822],
[-118.4463205933571, 34.14861165596896],
[-118.44635546207427, 34.14842297664594],
[-118.44640910625458, 34.148209879491944],
[-118.44645202159882, 34.148043396966365],
[-118.44650834798811, 34.14780144177757],
[-118.44652980566025, 34.147717090264415],
[-118.44678997993468, 34.1466293921546],
[-118.44680070877074, 34.146573896977564],
[-118.4468087553978, 34.14652950080971],
[-118.44683825969695, 34.14650064328809],
[-118.44687312841414, 34.14647844518782],
[-118.44692945480347, 34.146436268781265],
[-118.44693750143051, 34.14638299329021],
[-118.4469187259674, 34.146307519620414],
[-118.44689458608627, 34.146229826066346],
[-118.44685971736908, 34.14617211080851],
[-118.4468302130699, 34.14610995587136],
[-118.44671756029128, 34.14576588307053],
[-118.44666659832001, 34.14569040884941],
[-118.4465754032135, 34.145561658551856],
[-118.44654053449631, 34.14537075257705],
[-118.44656199216844, 34.14531525657322],
[-118.44660490751268, 34.14522202320469],
[-118.44666928052901, 34.14508883249976],
[-118.4467738866806, 34.14492900337667],
[-118.44714134931564, 34.144345180538075],
[-118.44724595546721, 34.144167591041665],
[-118.44746589660645, 34.14389676634091],
[-118.44773143529893, 34.143637040197646],
[-118.44793260097505, 34.14342393097094],
[-118.44798624515533, 34.143344014872326],
[-118.44802916049957, 34.143264098698126],
[-118.44805866479874, 34.14320860131048],
[-118.44806134700775, 34.14311092581964],
[-118.44804793596266, 34.14301325021589],
[-118.44807475805283, 34.1428889356478],
[-118.44817131757735, 34.142729102362914],
[-118.44827055931091, 34.14261366702467],
[-118.44845294952391, 34.14240721496879],
[-118.44851195812225, 34.1422962190313],
[-118.4486970305443, 34.14189441251827],
[-118.4489169716835, 34.141448205256296],
[-118.44912618398665, 34.14101087545433],
[-118.44926834106445, 34.14073782067377],
[-118.44944804906845, 34.14037596623108],
[-118.44964385032654, 34.13998081052974],
[-118.4498342871666, 34.139616732854655],
[-118.44989329576491, 34.13949463328309],
[-118.4500166773796, 34.139245993610096],
[-118.45008373260498, 34.13912611350636],
[-118.45019906759262, 34.13890411286514],
[-118.45033317804337, 34.13872651193225],
[-118.4505772590637, 34.13841792942364],
[-118.45063894987106, 34.13832690846846],
[-118.45148384571075, 34.13721910898561],
[-118.45174133777618, 34.13687722004035],
[-118.45193445682526, 34.136628572665956],
[-118.45214903354643, 34.136368824181034],
[-118.45228046178816, 34.13627114078354],
[-118.45256745815279, 34.136073553566185],
[-118.45295637845992, 34.13591592747724],
[-118.45308512449263, 34.13582712391739],
[-118.45317900180817, 34.135698358589856],
[-118.45320314168929, 34.135449707746986],
[-118.45313072204591, 34.135205496385616],
[-118.45292419195174, 34.135010126788465],
[-118.45279544591902, 34.1349612843186],
[-118.45267742872237, 34.134919102162826],
[-118.45248430967332, 34.13490578147768],
[-118.45228046178816, 34.134932422845864],
[-118.45213294029236, 34.134919102162826],
[-118.45198541879654, 34.13490134124881],
[-118.45173329114914, 34.134819196973034],
[-118.45158040523529, 34.13473039226078],
[-118.45145970582962, 34.134619386239216],
[-118.45134437084197, 34.13446619769004],
[-118.45125585794449, 34.13432188938248],
[-118.45111370086669, 34.13414649895386],
[-118.45094203948973, 34.13403327202814],
[-118.4507355093956, 34.133933365791236],
[-118.45047533512115, 34.133895623404335],
[-118.45026612281798, 34.13390228382677],
[-118.45004886388779, 34.13394890676917],
[-118.44987988471985, 34.13402439147855],
[-118.44961971044539, 34.13421976335437],
[-118.4494024515152, 34.13435297119262],
[-118.44921737909316, 34.13439959388638],
[-118.44906449317932, 34.134415134778614],
[-118.44894379377365, 34.13439959388638],
[-118.44874262809753, 34.13434853093473],
[-118.44855487346649, 34.13422642375129],
[-118.44837516546251, 34.13379127671756],
[-118.44833225011824, 34.13368026946253],
[-118.44804257154463, 34.1329720397431],
[-118.4478548169136, 34.132505803773135],
[-118.4477823972702, 34.13242809752812],
[-118.44766169786453, 34.13231042793535],
[-118.44752490520476, 34.13224604261713],
[-118.44723254442214, 34.13208174882427],
[-118.4469884634018, 34.13191079413322],
[-118.4468087553978, 34.13174871988604],
[-118.44654858112334, 34.13159774633511],
[-118.4459102153778, 34.131324661138855],
[-118.44558298587798, 34.13124029317626],
[-118.44531476497652, 34.13119366873973],
[-118.44509482383728, 34.13114260385121],
[-118.44451010227205, 34.13101161116996],
[-118.4443598985672, 34.13095388551715],
[-118.44417750835417, 34.13088727894572],
[-118.4440889954567, 34.1308206723218],
[-118.44387710094452, 34.13070522071602],
[-118.44370543956757, 34.13064305440144],
[-118.44350159168245, 34.13060309031791],
[-118.44332456588745, 34.130583108269064],
[-118.44320386648177, 34.13058532849696],
[-118.44304293394087, 34.13062529258886],
[-118.44287663698196, 34.130665256661906],
[-118.4427237510681, 34.130762946538646],
[-118.4425950050354, 34.13085397564034],
[-118.4422704577446, 34.131053795275896],
[-118.4420558810234, 34.1311359432113],
[-118.44191908836363, 34.13113372299788],
[-118.44180643558501, 34.13113816342467],
[-118.44159185886383, 34.13111596128842],
[-118.44143897294997, 34.131095979360815],
[-118.44125390052795, 34.13109375914633],
[-118.44108492136003, 34.131095979360815]
]
}
}
]
}
},
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": ["string", ["get", "color"]],
"line-width": 3,
"line-opacity": 0.6
}
});
});
Good evening (CET),
I collect data, calculate a day sum, store the value in mySQL with a time stamp close to 24h of that day (like August 4, 23:59:30).
In a Highchart Column graph, the value will be shown on the August 5th. (You will see this be hovering over the bar, that the value doesn't fit to the xAxis.)
A working example is at http://jsfiddle.net/bg8yu3ft/
// data
var data = [ [1501624793000, 3389], [1501883993000, 4045], [1501970397000, 6572], [1502056798000, 5836], [1502143193000, 4736], [1502229588000, 6629], [1502315996000, 3981], [1502402391000, 4424] ]
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
}]
});
Looking forward to any advice to center the bar on the day it belongs to.
Assuming all your data is going to be in the same format (i.e. close to midnight) you can do it easily with pointplacement like this: fiddle. Depending on your timezone you might have to adjust the value a little.
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
pointPlacement: -1.2
}]
});
Another option would be to move the ticks, API.
You could change your x data to the closes full day then in the chart all will work fine and axis, point, tooltip will show x values as full days.
If you need to have precise day in the tooltip, then you could show it as an info. Demo: http://jsfiddle.net/BlackLabel/7uhdfcj4/
// data
var data = [
[1501624793000, 3389],
[1501883993000, 4045],
[1501970397000, 6572],
[1502056798000, 5836],
[1502143193000, 4736],
[1502229588000, 6629],
[1502315996000, 3981],
[1502402391000, 4424],
];
Highcharts.each(data, function(d, i) {
var realTime = d[0],
date = Highcharts.dateFormat('%Y:%m:%d:%H:%M:%S:%L', realTime).split(':'),
day = (+date[2]) + ((+date[3]) > 19 ? 1 : 0);
data[i].push(realTime);
data[i][0] = Date.UTC(+date[0], +date[1], day);
});
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
keys: ['x', 'y', 'realTime'],
tooltip: {
pointFormat: '{point.realTime: %Y.%m.%d %H:%M:%S}'
}
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
Need a hand deciphering the Highcharts methodology please.
I have input data that is a lot of records with three fields (timestamp, min, max) that I'd like to generate a plot from. Goal is to have two lines, one with max-vs-time and the other with min-vs.time, both on that one plot.
I got an arearange to work (fiddle here) but if I change the plot type to spline, I just get one line graph with min vs. time (i.e., it ignores the last data parameter).
Same thing happens when I mess with the Highcharts arearange example, so I'm guessing that my series is not defined correctly, but I'm not deciphering the right terminology to figure out how to ask the question yet I guess. Any help appreciated....
// data is timestamp,min,max for the day
// - this currently plots only the min for each day
// - intent is two lines, one for min and one for max
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
var options = {
chart: {
renderTo: 'container',
type: 'arearange'
},
title: {
text: 'historical temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'outsideTemp (F)'
}
},
legend: {
enabled: false
},
series: [{
legend: {
enabled: false
},
data: data
}]
};
$(document).ready(function () {
var chart1 = new Highcharts.Chart(options)
});
You need to create two separate series.
So this:
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
Will need to be two separate arrays, each with a single y value, and the same x values:
var data1 = [
[1186124400000, 57.2],
[1186210800000, 51.8],
[1186297200000, 53.8],
[1186383600000, 56.7],
[1186470000000, 59.0]
];
var data2 = [
[1186124400000, 75.6],
[1186210800000, 74.7],
[1186297200000, 74.8],
[1186383600000, 72.7],
[1186470000000, 76.1]
];
Updated Fiddle:
http://jsfiddle.net/jlbriggs/5q5HJ/12/
If your x values are at consistent intervals, you can use the pointStart and pointInterval properties and skip specifying the x values
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
Suppose i have a plot with two series one is OHLC and Line.I want to customize tool tip like for example i don't want to show to time stamp, Open and High value of OHLC series in tool tip and i want add some customized message to line series tool tip.
How to achieve customized tool tip in Highchart?
http://jsfiddle.net/ZZAR5/1/
$(function () {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
data: [
[1147996800000, 63.26, 64.88, 62.82, 64.51],
[1148256000000, 63.87, 63.99, 62.77, 63.38],
[1148342400000, 64.86, 65.19, 63.00, 63.15],
[1148428800000, 62.99, 63.65, 61.56, 63.34],
[1148515200000, 64.26, 64.45, 63.29, 64.33],
[1148601600000, 64.31, 64.56, 63.14, 63.55],
[1148947200000, 63.29, 63.30, 61.22, 61.22],
[1149033600000, 61.76, 61.79, 58.69, 59.77]
]
}, {
type: 'line',
data: [
[1147996800000, 63.26],
[1148256000000, 63.87],
[1148342400000, 64.86],
[1148428800000, 62.99],
[1148515200000, 64.26],
[1148601600000, 64.31],
[1148947200000, 63.29],
[1149033600000, 61.76]
]
}]
});
});
You can control the format of the tooltip using the formatter function in the tooltip block. For example:
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ' + point.y;
});
return s;
},
shared: true
},
This formats the tooltip using a header of the x value, and lists series name and y for each series. shared: true means the tooltip is shared between both series, appearing the same no matter which series you hover over.
There is plenty of documentation on the tooltips along with some examples here:
http://api.highcharts.com/highcharts#tooltip.formatter
and also here:
http://api.highcharts.com/highstock#tooltip.formatter