I'm working on highcharts to view my data.
And i would like to do a single chart with 2 lines inside, wich one lines as 1 y-axis.
I already implement the chart like this :
$.get("http://1001dev.com/Chahine/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
$('#EuropeActifs').highcharts({
yAxis: [{ // Primary yAxis
labels: {
format: '{value} M',
},
title: {
text: 'Actifs en € ',
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
labels: {
format: '{value}',
},
title: {
text: 'Nombre de parts',
}
}],
data: {
csv: csv
}
});
});
This is my CSV :
Date,Actifs en €,Nombre de parts
13/11/1998,461728.00,30286.50
11/12/1998,460454.00,30286.50
08/01/1999,499715.00,30286.50
05/02/1999,502512.00,30933.50
05/03/1999,502481.00,30933.50
02/04/1999,505413.00,31105.00
30/04/1999,519929.00,31105.00
28/05/1999,516903.00,31105.00
Obviously my CSV is longer than this. But u can see the idea i think.
I would like to have the data for Actifs en € associete to the y-axis Primary and the data for Nombre de parts associate to the y-axis Secondary
How can i do that ?
Thanks a lot for your help
Cheer
Jordan
You need to specify which yAxis you want the different series to be in, like this:
series: [{
yAxis: 1
}, {
yAxis: 0
}]
Working example based on your data: https://jsfiddle.net/ewolden/q489nsgw/2/
API on data: http://api.highcharts.com/highcharts/data
API on series.yAxis: http://api.highcharts.com/highcharts/series.line.yAxis
Related
I have a multiple header data frame and I succeeded to extract the column names by two functions.
I have comparison rows in my data every third line (that compares the two rows values before it) and contains one of the values: "Imporoved", "Not Improved" etc...
For example the table looks something like that:
measure1 | measure2
previouse 70 | 80
new 60 | 100
compare IMPROVED | SIGNIFICANT DEGRADED
I'm trying to add conditional formatting that will color a cell in a certain way if it equals to one of the options of the comparison values. The conditional formatting does not work in a way it does not raise an error but does not display any of the highlighting.
I tried the following code:
style_data_conditional=
[{
'if': {
'filter_query': '{{{col}}} = "SIGNIFICANT DEGRADED"'.format(
col=col),
'column_id': col
},
'backgroundColor': 'black',
'color': '#FF1616'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "NOT IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': 'CD7B05',
'color': '#D3C4AF'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': '82C729',
'color': '#F4FFE7'
} for col in columns_names
]
+
[
{
'if': {
'filter_query': '{{{col}}} = "SIGNIFICANT IMPROVED"'.format(
col=col),
'column_id': col
},
'backgroundColor': '8FFF0C',
'color': 'white'
} for col in columns_names
]
At first I had a problem with accessing the column names because of the multi headers, but I fixed it and "columns_names" is a list containing the actual columns names (for example columns_names = [['counter1', 'Average'],['counter1', 'max'],...]).
I don't know why the it won't display, the table remains white.
Will appreciate some help!
I would like to draw a line chart for a field raw_value and I've this code :
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
data: {
url: {
%context%: true
%timefield%: #timestamp
index: filebeat-*
body: {
size: 10000
_source: ["#timestamp","raw_value"]
}
}
format: {property: "hits.hits"}
}
transform: [
{calculate: "toDate(datum._source['#timestamp'])", as: "time"}
]
mark: circle
encoding: {
x: {field: "time", type: "temporal"}
y: {field: "_source.raw_value", type: "quantitative"}
}
}
it works well and I see the circles for each couple (time,raw_value), but if i want to draw a line to rely points and i replace circle by line, nothing appears on the chart.
Lines are only drawn between adjacent non-null points, so what you describe generally means that you have null y values in your data. You can fix this by filtering out undefined data before drawing your lines:
transform: [
{calculate: "toDate(datum._source['#timestamp'])", as: "time"},
{filter: "isDefined(datum._source.raw_value)"}
]
I am a beginner for highcharts. I was trying something and got stuck. My x axis has values repeated multiple times. Tooltip values should contain date and time as shown. but the thing i want to change is the x axis values. same value must be shown only once and not repeated everywhere where there is data.
X axis format must be DD-MMM and tooltip should be DD-MM-YY HH am/pm .
is this possible?
Here is my trial code
http://jsfiddle.net/j6oqcgp2/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
labels: {
formatter: function () {
y=(this.value).substring(1,6);
return y;
}
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function () {
y=(this.x).substring(0,15);
return y;
},
shared:false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [5,10,19,10,4,6,8]
}]
});
and this is how i want it to be
If your x-axis categories are going to be a predictable set of values (for example, four readings on each day), then you simply can add the tickInterval attribute to show a new axis label on when the day changes (see http://api.highcharts.com/highcharts/xAxis.tickInterval).
So, if you had four readings per day, you would add tickInterval: 4 to your x-axis options. This would show an axis label at every fourth reading, or, in this example, once per day.
If, however, your x-axis categories are not predictable (for example, any number of readings per day), you may want to look at this Highcharts demo, which shows a chart with irregular time periods: http://www.highcharts.com/demo/spline-irregular-time. In this demo, you'll see regular, non-repeating axis labels for whatever unit you're measuring (hours, days, etc.) and the data being plotted as frequently as it's recorded in the data.
I hope these examples and resources are helpful for you.
I am using jqplot through Primefaces and Have input to Bar Chart like this:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: {"03-05-2015": 10, "06-05-2015": 3}
When I pass this data as BarChartModel, I got data wrongly drawn on the chart.
The data follows the first series, as the Series 2 is drawn after the Series 1 dates. I've to convert the data to be as follows in order to get the chart drawn fine:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, *"03-05-2015": 0*, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: { *"01-05-2015": 0* , "03-05-2015": 10, "06-05-2015": 3}
Notice the data items between * and *.
Any advice here? (if using DateAxis helps?)
I had the same problem with LinearChartModel when I has not using DateAxis.
As a workaround, I filled my series with all possible data and then reordered the list. Urg!
Should work with BarChartModel too.
Using DateAxis you just need to add your date axis with the timestamp, like this:
serie.set(new Date().getTime(), new Double(123));
or this
serie.set("2015-09-08", new Double(123));
Put the DateAxis in your LineChartModel like this:
DateAxis axis = new DateAxis("Data da inspeção");
linearModel.setZoom(true);
linearModel.getAxes().put(AxisType.X, axis);
linearModel.setExtender("linhaSetor");
And format your date in the extender.js:
function linhaSetor() {
this.cfg.axes.xaxis.tickOptions = {
show : true,
angle : 45,
formatString : '%d/%m/%y %Hh'
};
}
You don't even need to put the data in order.
When I make a nokia reverse geocoding call for a lat long, it returns me two results (location with address) for a single lat long.
For eg. when I used the following query URL:
URL url = new URL("http://reverse.geocoder.cit.api.here.com/6.2/reversegeocode.json?prox=-53.31553,-68.64149999999998,1000&gen=1&mode=retrieveAddresses&app_id=oOnEEaBPJEG9JTqwTyjZ&app_code=WV2t5lCfD0NGpQMEjS2VBw");
I got the following result:
{
"Response":{
"MetaInfo":{
"Timestamp":"2013-11-15T10:52:24.684+0000"
},
"View":[
{
"_type":"SearchResultsViewType",
"ViewId":0,
"Result":[
{
"Relevance":1.0,
"Distance":615.1,
"MatchLevel":"street",
"MatchQuality":{
"Country":1.0,
"State":1.0,
"County":1.0,
"City":1.0,
"District":1.0,
"Street":[
1.0
],
"PostalCode":1.0
},
"Location":{
"LocationId":"Link_811555088_R",
"LocationType":"point",
"DisplayPosition":{
"Latitude":-53.3246228,
"Longitude":-68.6432568
},
"MapView":{
"TopLeft":{
"Latitude":-53.32214,
"Longitude":-68.64146
},
"BottomRight":{
"Latitude":-53.32497,
"Longitude":-68.65595
}
},
"Address":{
"Label":"257-CH, 6300000 Porvenir, Magallanes y La Antártica Chilena, República de Chile",
"Country":"CHL",
"State":"Magallanes y La Antártica Chilena",
"County":"Tierra del Fuego",
"City":"Porvenir",
"Street":"257-CH",
"PostalCode":"6300000",
"AdditionalData":[
{
"value":"República de Chile",
"key":"CountryName"
},
{
"value":"Magallanes y La Antártica Chilena",
"key":"StateName"
}
]
},
"MapReference":{
"ReferenceId":"811555088",
"SideOfStreet":"right",
"CountryId":"23488354",
"StateId":"23488754",
"CountyId":"23489032",
"CityId":"23488149"
}
}
},
{
"Relevance":1.0,
"Distance":627.0,
"MatchLevel":"street",
"MatchQuality":{
"Country":1.0,
"State":1.0,
"County":1.0,
"City":1.0,
"District":1.0,
"Street":[
1.0
],
"PostalCode":1.0
},
"Location":{
"LocationId":"Link_925101778_L",
"LocationType":"point",
"DisplayPosition":{
"Latitude":-53.32497,
"Longitude":-68.64146
},
"MapView":{
"TopLeft":{
"Latitude":-53.32145,
"Longitude":-68.64146
},
"BottomRight":{
"Latitude":-53.32497,
"Longitude":-68.62151
}
},
"Address":{
"Label":"Ruta Complementaria I, 9420 Río Grande, Argentina",
"Country":"ARG",
"State":"Tierra del Fuego",
"County":"Río Grande",
"City":"Río Grande",
"Street":"Ruta Complementaria I",
"PostalCode":"9420",
"AdditionalData":[
{
"value":"Argentina",
"key":"CountryName"
},
{
"value":"Tierra del Fuego",
"key":"StateName"
}
]
},
"MapReference":{
"ReferenceId":"925101778",
"SideOfStreet":"left",
"CountryId":"23294156",
"StateId":"23294735",
"CountyId":"3458765894026227595",
"CityId":"23294619"
}
}
}
]
}
]
}
}
Two locations are obtained. First giving the country as Chile and the next giving the country as Argentina. Which is the correct result ?
As I can see from the api response, the API itself does not know the answer. Look at this block:
"MatchQuality":{
"Country":1.0
}
The same country match quality in both results. If you look at this address at google maps - you will see that it is very close to the border. Given that borders are not very precise on maps, it's easy to see why it does not know what country it is.
So, you have two options here:
Pick first one.
Decide by distance to nearest object. You have two objects found nearby, and the one with smaller distance is in Chile. So you can pick it then with high chance that it's right.