I am using Shield UI Chart where I have a chart with bars and some data.
dataSeries: [
{
seriesType: 'bar',
collectionAlias:'Total Visits',
data: [565000, 630400, 743000, 910200, 1170200, 1383000]
},
{
seriesType: 'bar',
collectionAlias: 'Unique Visits',
data: [152000, 234000, 123000, 348000, 167000, 283000]
}
]
The chart is woring fine, however when I try to use same data for range bar, there is nothing shown. Why is that? What could be the problem, since there are other chart types, where I just change the type and the data is displayed?
dataSeries: [
{
seriesType: 'rangebar',
collectionAlias:'Total Visits',
data: [565000, 630400, 743000, 910200, 1170200, 1383000]
},
{
seriesType: 'rangebar',
collectionAlias: 'Unique Visits',
data: [152000, 234000, 123000, 348000, 167000, 283000]
}
]
There is the possibility to just change the chart type and to have the data displayed in the now layout. However you need to consider where the data types are compatible or not. Bar charts are intended to show single values e.g. 1,2,3,4 and so on. While the range bar's data values come in pairs. Look at the code below:
{
seriesType: 'rangebar',
data: [[0.75, 0.79], [0.95, 1.03], [0.70, 0.79], [0.65, 0.70], [0.5, 0.69], [0.77, 0.89], [0.79, 0.87], [0.55, 0.89], [0.65, 0.99]]
}
Related
From reading the highcharts docs, I can't figure out which setting turns off the series labels on the charts. How can i remove the "Result" and "Target" labels?
series: [
{ label: { enabled: false } }
]
I am actually new to this highcharts . Been trying to render a line chart . I am facing issues while transforming the data returned by back-end to the data required by highcharts.
Can someone suggest me how to transform the below data object to the data required by line charts.Trying to plot a graph that compares current and previous values
Help would be appreaciated.
Object
{"data":
[
{"currentVal":3488,"prevVal":0,"timestamp":1554181200000},
{"currentVal":3453,"prevVal":3,"timestamp":1554481200000},
{"currentVal":3456,"prevVal":2,"timestamp":1554581200000}
]
}
As per the documnentaion the line charts data accepts the following structure.
"data": [
{
"name": "currentVal",
"data": [ 7,7,8]
},
{
"name": "prevVal",
"data": [1,6,7]
}
]
}
I would want the help in transforming the object that mentioned in the top
The simplest way to transform the object:
var obj = {
data: [{
"currentVal": 3488,
"prevVal": 3000,
"timestamp": 1554181200000
}, {
"currentVal": 3453,
"prevVal": 3123,
"timestamp": 1554481200000
}, {
"currentVal": 3456,
"prevVal": 3341,
"timestamp": 1554581200000
}]
};
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
name: "currentVal",
data: obj.data.map(elem => [
elem.timestamp, elem.currentVal
])
}, {
name: "prevVal",
data: obj.data.map(elem => [
elem.timestamp, elem.prevVal
])
}]
});
Demo:
https://jsfiddle.net/BlackLabel/y8efg4hx/1/
https://jsfiddle.net/BlackLabel/0fzjsuLw/1/
By using plotly, I am creating my analytics dashboard which has pie, bar and different kind of charts. I have a pie chart which has huge data and legends nearly more than 60. It's rendering properly in browser(bigger screen) problem is with the mobile screens. Chart legends are overlapping the actual chart.I am expecting to show chart as like below in mobile screens. Can anyone help me on this.
My Json looks like below.
{
"data": [{
"values": [1058,177,75,53,28,23,15,8,7,6,5,5,2,2,1,1,1,1,1,1,0],
"labels": ["Vision Corporation","Corporate Human Resources","Human Resources-West","Human Resources-East","Human Resources-Central","Recruiting-East","Human Resources","Recruiting-South","Payroll","Recruiting-West","Human Resources-South","Recruiting-Central","200-Human Resources","Direction des Ressources Humaines","Accounts Payable","Commercial Sales","Commercial Sales-West","Services-East","Vision Australia","Vision Industries","Others"],
"type": "pie",
"textposition":"inside"
}],
"linked": {
"layout": {
"legend":{
"orientation": "h",
"x": 1.02,
"xanchor": "center",
"y": 1.0,
"yanchor": "bottom"
},
"margin":{
"l": 0
}
}
}
}
Disclaimer: have not tried this on mobile. However, I had a similar issue on the browser (huge legend) - and the following did solve the issue:
You can control the size of the chart. By increasing the height property, you will leave more room for your legend.
Add a 'height' property under the 'layout' object, and play with the sizing to fit your data -
"layout": {
"height": 1000, ...
You can also add a width property if needed. See an example here (not in JSON, but the properties are clear).
I have a line chart with a margin between the lowest and highest price and the chart borders. I don't want the ticks touching the top and the bottom of the chart, so I used forceY to achieve that.
<nvd3-line-chart
data="sample_data"
id="sample_data"
height="350"
showXAxis="true"
forcey="{{y_axis_range}}"
showYAxis="true">
</nvd3-line-chart>
The data:
sample_data: [
{
key: "PRODUCT 1",
values: [ [ 0, 10.0 ] ]
},
{
key: "PRODUCT 2",
values: [ [ 0, 9.0 ] ]
}
],
y_axis_range: [ 8.0, 12.0 ]
The thing is, when I change the data, the graph seems to redraw correctly. The yAxis ticks are updated with highest values, but the values of the data, not the y_axis_range.
How to properly force the graph to have the tick range intended?
I am using angular-openlayers-directive to build my project.
I try to rewrite the example of geojson part cause I will get point information dynamically. So I made the source part of geojson inside instead of loading from json file. However, the position of my code is totally different as I expect.
The result suppose to show a point at that coordinate I set. But the point is like at the [0, 0]. If I change the to use loading from the json file, that will work.
I have no idea why the coordinate change so much. If anyone know the reason why, please let me know! I will appreciate that.
The following is my code:
source: {
type: "GeoJSON",
projection: 'EPSG:4326',
geojson: {
object: {
type: "FeatureCollection",
features: [{
type: "Feature",
id: "TWN",
properties: {
name: "Taiwan"
},
geometry: {
type: "Point",
coordinates: [25.038507, 121.525527]
}
}]
}
}
//url: 'json/ESP.geo.json'
}
The GeoJSON you've supplied is invalid. GeoJSON coordinates pairs are in the form of longitude/latitude, not latitude/longitude as you've used for Taiwan. Switch them and you'll be fine.
There is an error in the placement of the 'projection' attribute. The answer below shows the correct one.
source: {
type: "GeoJSON",
geojson: {
object: {
type: "FeatureCollection",
features: [{
type: "Feature",
id: "TWN",
properties: {
name: "Taiwan"
},
geometry: {
type: "Point",
coordinates: [25.038507, 121.525527]
}
}]
},
projection: 'EPSG:4326',
}
}