I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
Related
I am trying to take the data from an added layer and add it as the country-label on a stock map (in this case, Dark V 10).
Here is the code that allows me to add the data (EatPlace) from my added layer as a SEPARATE label (Works, but NOT what I want):
map.on('load', function() {
map.addSource('CEVectorSource', { //The link to your tileset
'type': 'vector',
'url': 'mapbox://xxxxx.xxxxxxxxxxxxxxxxxxx'
});
map.addLayer({
"id": "CountriesEatenNames",
"type": "symbol",
"source": "CEVectorSource",
"source-layer": "CEVectorsTileset",
"filter": ["all",["match", ["geometry-type"], ["Point"], true, false]],
"layout": {
"text-field": ['format',
['upcase', ['get', 'EatPlace']], { 'font-scale': .8 },
'\n', {},
['get', 'EatDate'], { 'font-scale': .6 }],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
//"text-allow-overlap": true,
"text-variable-anchor": ['top', 'bottom', 'left', 'right']
},
"paint": {
"text-color" : 'rgb(255, 221, 153)' // Text Color
}
});
});
Here is the code that lets me modify the labels I want to modify:
map.setLayoutProperty('country-label', 'text-field',
['get', 'name_en'])
Here is what has NOT worked:
map.setLayoutProperty('country-label', 'text-field',
['get', 'EatPlace'])
I have no luck combining these concepts. Any help would be divine.
If I understand you correctly, you have a country tileset of points, a places tileset of points, and you want to display for each country point a piece of text deriving from the places tileset.
That isn't going to work. How would Mapbox-GL-JS know which country point to associate with a given place point? You will need to find some way to combine them into one layer first.
I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/
I'm new to Firebase and I'm building my first app on it so thought I'd ask if my current plans for the app's data structure make sense.
I've read the Firebase blog posts and several answers on SO which have helped me understand the concept of "optimise for the way the data will be read". However, my data will be read in a few different ways and it feels like I may be over complicating things.
Background
The app is like a directory for businesses in multiple towns (schemes) to promote their upcoming events and offers. I think of the data hierarchy like this:
Scheme: A town (the app has multiple schemes)
Category: A group of businesses around a theme (e.g. shoe shops)
Business: An administrative organisation (handles billing etc). Each business can have multiple locations (shops in different towns).
Location: A shop in a town.
Event: Each location can promote events. An event can be promoted at multiple locations but not necessarily all of a business's locations.
Offer: Similar to an event but a different type of object.
Viewing the data
The app user can view the offer & event data in 5 ways:
specific to a business (e.g. Joe's shoes' offers)
for a scheme (e.g. all offers in a Smalltown)
for the whole app (e.g. all offers anywhere)
in a category in a scheme (e.g. all shoe offers in Smalltown)
in a category in the whole app (e.g. all shoe offers anywhere)
In addition, I need to make sure that an administrator from each business can see/edit all of their business's data via a CMS I'm also building.
My approach
This is the data structure I'm thinking of using:
root {
schemes{
scheme1{
name: "smalltown",
logo: "base64 data",
bgcolor: "#FF0000"
},
scheme2{...}
},
businesses{
business1{
name: "Joe's Shoes",
logo: "base64 data",
locations: {
location1: true,
location3: true,
location15: true
},
address_hq: {
street: "45 Acacia Avenue",
town: "Bigtown",
postcode: "BT1 1JS"
},
contact_hq: {
name: "Joe Simpson",
position: "Owner",
email: "joe#joesshoes.com",
tel: "07123 456789"
},
subscription: {
plan: "Standard",
date_start: "10/10/2015",
date_renewal: "10/10/2016"
},
owner: "james1"
},
business2{...}
},
locations{
location1{
name: "Joe's Shoes",
logo: "base64 data",
scheme: "scheme1",
events: {
event1: true,
event27: true
},
offers: {
offer1: true,
offer6: true
},
business: "business1",
owner: "james1"
},
location2{...}
},
events{
event1{
schemes: {
scheme1: true,
scheme4: true
},
locations{
location1: true,
location21: true
},
categories: {
shoes: true,
footwear: true,
fashion: true
},
business: "business1",
date: "5/5/2016",
title: "The History of Shoes",
description: "A fascinating talk about the way shoes have...",
image: "base64 data",
venue: {
street: "Great Hotel",
town: "Bigtown",
postcode: "BT1 1JS"
},
price: "£10"
},
event2{...}
},
offers{
offer1{
schemes: {
scheme1: true,
scheme4: true
},
locations{
location1: true,
location21: true
},
categories: {
shoes: true,
footwear: true,
fashion: true
},
business: "business1",
date_start: "5/5/2016",
date_end: "5/5/2016",
title: "All children's shoes Half Price",
description: "Get 50% off all children's shoes - just in time for the summer",
image: "base64 data",
},
offer2{...}
}
}
Here's a graphic of similar data structure in case it's easier to read:
My question is whether I need to denormalise the data further (repeat more data in more places) or is there a better way to think about this altogether?
It feels like I'm getting potential complications from having to keep data in sync without the ability to simply read from a single place (e.g. I'll need to use queries and indexes (?) to combine location and event data for scheme-wide event listings).
Any advice on making this data structure more efficient would be great.
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
I need some help related with jqPlot pie-chart value. Using the following data-set:
['XX01',77.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]
and this jqPlot option script:
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
the result is not showing all the available values. see the snapshot.
Can somebody help me about this? Waiting for any solution here... thanks!
Thank you for the response, Nandu.
I just figured it out yesterday, there is plugin's option for the data label, it is called dataLabelThreshold - jqPlot documentation. By default the value is 3, which mean that for any value below 3 won't be displayed. So the solutions just as simple as define the new threshold.
See this FIDDLE
$.jqplot('pieChart', [[['XX01',7.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]]],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
});
I think it is due to your data.I changed the first data from 77.28 to 7.28.It works fine.