I want to modify this jsfiddle code.
I don't want to get data from json/xml, but I want to put it manually like this:
this is a part of my code I didn't continued cause I lost it and it's complicated
{
name: 'Air pressure',
color: Highcharts.getOptions().colors[2],
data: [1020.5, 0, 0, 0, 0, 1009.5, 1015.5, 1010.5, 1001.5, 1001.5],
marker: {
enabled: false
},
shadow: false,
tooltip: {
valueSuffix: ' hPa'
},
dashStyle: 'shortdot',
yAxis: 2
}
For all things I want to get just 5 values for all data.
Datetime, Precipitation, Temperature, Air pressure ....
This is an example of data entered manually, not from a server or somethings.
At the end, I want to do this to know where I can put my data because I have it but I don't know where I can put it.
At the end of JavaScript code you can find function(xml).
Inside it you can write console.log(xml) and then check in console (Developer Tools) what is the structure of the data.
If you do want to change the code of the demo, then you would have to write your data in the same format.
You can look in code to see what exactly is needed, because not all data is used. Based on that you can disable ajax call and create data object manually.
Example: http://jsfiddle.net/qLynjzds/
Example of how data can look to work in the demo (2 points):
var xml = {
credit: {
link: {
'#attributes': {
url: "http://www.yr.no/place/United_Kingdom/England/London/" //link for credits
}
}
},
location: {
country: "Country",
name: "City"
},
forecast: {
tabular: {
time: [{
'#attributes': {
from: "2015-05-28T14:00:00",
to: "2015-05-28T15:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "17"
},
},
precipitation: {
'#attributes': {
value: "0"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1013.8"
},
}
}, {
'#attributes': {
from: "2015-05-28T15:00:00",
to: "2015-05-28T16:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "15"
},
},
precipitation: {
'#attributes': {
value: "1"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1010.8"
},
}
}]
}
}
};
Related
I have this problem where every time a user hovers there mouse pointer over my map of the USA, the map renders again. (Visually, it flashes on the screen and it looks terrible).
This is because I have an 'entityRolloever' event which causes a state variable to change.
entityRollover: function(event, data){
setHoveredState(data.label)
}
How I understand it is, when a React component (i.e. my map) changes state, it re-renders.
But what I want is, when a user hovers over a U.S. State, I want the state that is being hovered over to show up in a separate text box (without the whole map re-rendering).
I have searched around, and I have found some other React hooks which could solve this. They are useRef, useMemo, and useCallback. However, I'm not sure how they would solve my problem as I have never used them before.
If you want to recreate my problem, create a basic React app
npx create-react-app
Install the following packages
npm i fusioncharts react-fusioncharts fusionmaps
Then grab the code in my jsfiddle and paste it into 'App.js'
https://jsfiddle.net/cmascardo5/s8trame5/
There are a couple of ways to resolve this issue. I chose to replace useState() hook with useRef() since it matches your case perfectly.
useState() is a hook used in functional components to re-render components on state change, but in your case this is NOT something that we want. We want to track the updates without re-rendering the components. To achieve this, we use useRef(). When we use useRef() for the updates it will not fire re-rendering unlike useState().
In your code, I commented out the {hoveredState} you had to avoid re-rendering. Then I created a p element and ref it with useRef(). Then on the entityRollove method, I update the innerText of the referenced p element. This way we are tracking the updates without re-rendering. It is simpler to see the code, I did comment on the lines I added: (paste it in your App.js)
import React from 'react';
import './App.css';
import ReactFC from 'react-fusioncharts';
import FusionCharts from 'fusioncharts';
import FusionMaps from 'fusioncharts/fusioncharts.maps';
import USA from 'fusionmaps/maps/fusioncharts.usa';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import { Grid, Paper } from '#material-ui/core';
import { useState } from 'react';
import { useRef } from 'react';
ReactFC.fcRoot(FusionCharts, FusionMaps, USA, FusionTheme);
export default function App({}) {
const [hoveredState, setHoveredState] = useState('All States');
let test1 = 'test';
// const hoveredState =useRef("All states");
// Here we are using UseRef() to get a reference to an element we want to use to show each State's names
const paragraphEl = useRef(null);
const colorrange = {
minvalue: '20',
code: '#00A971',
gradient: '1',
color: [
{
minvalue: '20',
maxvalue: '40',
code: '#EFD951',
},
{
minvalue: '40',
maxvalue: '60',
code: '#FD8963',
},
{
minvalue: '60',
maxvalue: '80',
code: '#D60100',
},
],
};
const data = [
{
id: 'HI',
value: '70.0',
},
{
id: 'DC',
value: '52.3',
},
{
id: 'MD',
value: '54.2',
},
{
id: 'DE',
value: '55.3',
},
{
id: 'RI',
value: '50.1',
},
{
id: 'WA',
value: '48.3',
},
{
id: 'OR',
value: '48.4',
},
{
id: 'CA',
value: '59.4',
},
{
id: 'AK',
value: '26.6',
},
{
id: 'ID',
value: '44.4',
},
{
id: 'NV',
value: '49.9',
},
{
id: 'AZ',
value: '60.3',
},
{
id: 'MT',
value: '42.7',
},
{
id: 'WY',
value: '42.0',
},
{
id: 'UT',
value: '48.6',
},
{
id: 'CO',
value: '45.1',
},
{
id: 'NM',
value: '53.4',
},
{
id: 'ND',
value: '40.4',
},
{
id: 'SD',
value: '45.2',
},
{
id: 'NE',
value: '48.8',
},
{
id: 'KS',
value: '54.3',
},
{
id: 'OK',
value: '59.6',
},
{
id: 'TX',
value: '64.8',
},
{
id: 'MN',
value: '41.2',
},
{
id: 'IA',
value: '47.8',
},
{
id: 'MO',
value: '54.5',
},
{
id: 'AR',
value: '60.4',
},
{
id: 'LA',
value: '66.4',
},
{
id: 'WI',
value: '43.1',
},
{
id: 'IL',
value: '51.8',
},
{
id: 'KY',
value: '55.6',
},
{
id: 'TN',
value: '57.6',
},
{
id: 'MS',
value: '63.4',
},
{
id: 'AL',
value: '62.8',
},
{
id: 'GA',
value: '63.5',
},
{
id: 'MI',
value: '44.4',
},
{
id: 'IN',
value: '51.7',
},
{
id: 'OH',
value: '50.7',
},
{
id: 'PA',
value: '48.8',
},
{
id: 'NY',
value: '45.4',
},
{
id: 'VT',
value: '42.9',
},
{
id: 'NH',
value: '43.8',
},
{
id: 'ME',
value: '41.0',
},
{
id: 'MA',
value: '47.9',
},
{
id: 'CT',
value: '49.0',
},
{
id: 'NJ',
value: '52.7',
},
{
id: 'WV',
value: '51.8',
},
{
id: 'VA',
value: '55.1',
},
{
id: 'NC',
value: '59.0',
},
{
id: 'SC',
value: '62.4',
},
{
id: 'FL',
value: '70.7',
},
];
// };
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: 'maps/usa',
caption: 'Average Temperature of US States',
subcaption: '1979 - 2000',
entityfillhovercolor: '#F8F8E9',
numbersuffix: '°F',
showlabels: '1',
borderthickness: '0.4',
theme: 'fusion',
entitytooltext:
'<b>$lname</b> has an average temperature of <b>$datavalue</b>',
renderAt: 'chart-container',
width: '700',
height: '500',
colorrange: colorrange,
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Average Temperature of US States',
subcaption: '1979 - 2000',
entityfillhovercolor: '#F8F8E9',
numbersuffix: '°F',
showlabels: '1',
borderthickness: '0.4',
theme: 'fusion',
entitytooltext:
'<b>$lname</b> has an average temperature of <b>$datavalue</b>',
// "animation":0,
// "defaultAnimation":0
},
colorrange: colorrange,
data: data,
},
events: {
preRender: function (event, data) {
// code to be executed before the chart is re-rendered
},
postRender: function (event, data) {
// code to be executed after the chart is re-rendered
},
entityRollover: function (event, data) {
console.log('test..' + data.label);
// Here we get a reference to the paragraph element and set its innerText to be the state's name we are hovering on
paragraphEl.current.innerText = data.label;
},
},
}).render();
});
return (
<Grid container spacing={2}>
<Grid item xs={9}>
<div id="chart-container"></div>
</Grid>
<Grid item xs={3}>
// we create a p element that will hold state's name on hover
<p ref={paragraphEl}></p>
{/* {hoveredState} */}
</Grid>
</Grid>
);
}
im working on network graph highcharts
each node should have a new child but it should not merge with another subnode if its has the same name, like child1, child2, child3, pointing to subchild1,for each individual we should have the individual nodes pointing to each one
fiddle link -> https://jsfiddle.net/GnanaSagar/36k2wmry/1/
You can also use the formatter function for data labels:
series: [{
dataLabels: {
enabled: true,
format: undefined,
formatter: function() {
if (this.key.indexOf('subchild') >= 0) {
return 'subchild1'
}
return this.key
}
},
data: [...,
{
from: 'child1',
to: 'subchild1'
},
{
from: 'child2',
to: 'subchild2'
},
{
from: 'child3',
to: 'subchild3'
}
]
}]
Live demo: https://jsfiddle.net/BlackLabel/n4gd8v3r/
API: https://api.highcharts.com/highcharts/series.networkgraph.dataLabels.formatter
So apparently series.networkgraph.nodes works.
series: [{
dataLabels: {
enabled: true
},
data: [
{from: 'parent', to: 'child1'},
{from: 'parent', to: 'child2'},
{from: 'parent', to: 'child3'},
{from: 'child1', to: 'subchild1.1'},
{from: 'child2', to: 'subchild2.1'},
{from: 'child3', to: 'subchild3.1'}
],
nodes: [{
id: 'subchild1.1',
name: 'subchild1'
},
{
id: 'subchild2.1',
name: 'subchild1'
},
{
id: 'subchild3.1',
name: 'subchild1'
}
]
}]
jsFiddle: https://jsfiddle.net/9g42nqza/ (I have to comment out some of your original code because it was throwing error).
This question already has answers here:
How to sort an array of integers correctly
(32 answers)
Javascript sort an array of objects based on numeric key
(4 answers)
Sorting in JavaScript: Shouldn't returning a boolean be enough for a comparison function?
(2 answers)
Closed 4 years ago.
I am trying to sort an array of objects by attribute inside object and js is not sorting it well. This is the code that I used and the array that I am trying to sort:
const json = [
{ code: '40828',
distance: { text: '2.3 km', value: 2309 },
duration: { text: '14 mins', value: 831 },
},
{ code: '43343',
distance: { text: '35.4 km', value: 35432 },
duration: { text: '1 hour 27 mins', value: 5242 },
},
{ code: '40539',
distance: { text: '26.1 km', value: 26134 },
duration: { text: '1 hour 38 mins', value: 5885 },
},
{ code: '4840',
distance: { text: '2.3 km', value: 2340 },
duration: { text: '17 mins', value: 1044 },
},
{ code: '32725',
distance: { text: '6.2 km', value: 6218 },
duration: { text: '34 mins', value: 2011 },
},
{ code: '39608',
distance: { text: '3.6 km', value: 3620 },
duration: { text: '22 mins', value: 1299 },
},
{ code: '50913',
distance: { text: '4.7 km', value: 4707 },
duration: { text: '35 mins', value: 2112 },
},
{ code: '43879',
distance: { text: '10.1 km', value: 10065 },
duration: { text: '49 mins', value: 2938 },
},
{ code: '35606',
distance: { text: '3.0 km', value: 2965 },
duration: { text: '19 mins', value: 1168 },
},
{ code: '4377',
distance: { text: '4.5 km', value: 4524 },
duration: { text: '24 mins', value: 1439 },
},
{ code: '41519',
distance: { text: '23.9 km', value: 23940 },
duration: { text: '1 hour 5 mins', value: 3872 },
}
]
console.log(json.sort((a, b) => a.duration.value > b.duration.value));
I am trying to sort it by distance.value and I am getting this result:
[ { code: '39608',
distance: { text: '3.6 km', value: 3620 },
duration: { text: '22 mins', value: 1299 } },
{ code: '40828',
distance: { text: '2.3 km', value: 2309 },
duration: { text: '14 mins', value: 831 } },
{ code: '4840',
distance: { text: '2.3 km', value: 2340 },
duration: { text: '17 mins', value: 1044 } },
{ code: '35606',
distance: { text: '3.0 km', value: 2965 },
duration: { text: '19 mins', value: 1168 } },
{ code: '4377',
distance: { text: '4.5 km', value: 4524 },
duration: { text: '24 mins', value: 1439 } },
{ code: '32725',
distance: { text: '6.2 km', value: 6218 },
duration: { text: '34 mins', value: 2011 } },
{ code: '50913',
distance: { text: '4.7 km', value: 4707 },
duration: { text: '35 mins', value: 2112 } },
{ code: '43879',
distance: { text: '10.1 km', value: 10065 },
duration: { text: '49 mins', value: 2938 } },
{ code: '41519',
distance: { text: '23.9 km', value: 23940 },
duration: { text: '1 hour 5 mins', value: 3872 } },
{ code: '43343',
distance: { text: '35.4 km', value: 35432 },
duration: { text: '1 hour 27 mins', value: 5242 } },
{ code: '40539',
distance: { text: '26.1 km', value: 26134 },
duration: { text: '1 hour 38 mins', value: 5885 } } ]
So everything in the result array looks good (and sorted well) except the first element, and I am trying to understand why? Value 831 should be first in an array but for some reason is second and first is 1299. Can anyone explain that maybe I am doing something wrong?
Thanks in advance 🍻
You're close, but your sort is slightly off. The sort doesn't look for a boolean return type, it looks for integers. So you need to rework it like this: json.sort((a,b) => a.distance.value - b.distance.value);
JS Sorts data based on ASCII. Please find below updated code.
console.log(json.sort((a, b) => a.duration.value - b.duration.value))
I use telerik scheduler in html+js. My code is:
$(document).ready(function () {
kendo.culture("pl-PL");
$("#scheduler").kendoScheduler({
date: new Date("2016/3/4"),
startTime: new Date("2016/3/4 07:00"),
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month"
],
timezone: "Europe/Warsaw",
dataSource: {
batch: true,
transport: {
read: {
url: "../Meetings/Read",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "ID",
fields: {
ID: { from: "MeetingID" ,type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
});
Like you see I've changed culture of scheluder (date and time format, names of days, months etc.) and timezone. All of my tasks are disappear. If I removed first line (kendo.culture("pl-PL")) tasks will be shown.
How can I work with changing culture and timezone in the same time? It's even posiible?
Edit
My sample value returned by controller is:
{"MeetingID":1,"Start":"2016-03-01T08:30:00","End":"2016-03-01T07:30:00","Title":"Testowe","Description"
:"ASD","OwnerID":1,"IsAllDay":false,"RecurrenceRule":"","RecurrenceID":1,"RecurrenceException":"","StartTimezone"
:"","EndTimezone":""}
Have you Included the file kendo.timezones.min.js ?
If not then you have to add (in your header html section)the following line
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.timezones.min.js"></script>
You can find a working sample here http://dojo.telerik.com/udAyo
I have already tried changing the data (null to some out of range number) and toying with colorAxis min and mas and color stops and while that works if it where a single map, it does not work for what I am doing.
I really need to be able to hang code on a click event.
Thanks
https://jsfiddle.net/alex_at_pew/nbz9npyg/5/
$(function () {
// Instantiate the map
$('#container').highcharts('Map', {
plotOptions: {
map: {
events: {
mouseOver: function (e) {
console.log(e);
}
}
}
},
chart : {
borderWidth : 1
},
title : {
text : 'Nordic countries'
},
subtitle : {
text : 'Demo of drawing all areas in the map, only highlighting partial data'
},
legend: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: -100,
to: 1,
color: '#C40401',
name: 'pseudonull(1s are the new null)'
}],
},
series : [{
name: 'Country',
mapData: Highcharts.maps['custom/europe'],
data: [
{
code: 'DE',
value: 1
}, {
code: 'IS',
value: 2
}, {
code: 'NO',
value: 2
}, {
code: 'SE',
value: 2
}, {
code: 'FI',
value: 2
}, {
code: 'DK',
value: 2
}
],
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
if (this.point.value > 1) {
return this.point.name;
} else if(this.point.value == 1) {
return 'this is "null"';
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
}
}]
});
});
I am not very sure about what you try to achieve, but from my understanding, you want to attach click events to countries with NULL values.
I have created this example here: http://jsfiddle.net/on6v5vhr/
Apparently, if a country has a NULL value, it won't be able to have click events, but what I've done is to simulate this behaviour so I went through these steps:
Process your data and give all the null value the same particular value (France was null so I gave it the value of -999)
{code: 'FR', value: -999}
Show datalabels only for the countries that have a value and that values is different than -999
formatter: function() {
if (this.point.value && (this.point.value !== -999)) {
return this.point.name;
}
}
Show tooltip only for the countries that have a value different than -999
tooltip: {
formatter: function() {
if (this.point.value !== -999) {
return this.point.name;
} else {
return false;
}
}
}
Manually set the color same as the NULL color for all countries that have the value of -999
colorAxis: {
dataClasses: [{
from: -100,
to: 1,
color: '#C40401',
name: 'pseudonull(1s are the new null)'
}, {
from: -999,
to: -999,
color: 'rgba(0,0,0,0)',
name: 'No data'
}],
}