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?
Related
I have my own Typescript Blazeface version up and running. The predictions rectangle however does not show up on the video overlay canvas. Debugging shows that the x coordinates returned from the predictions are negative. Is this user error or some other subtle bug in my code?
The source code can be found in this Codepen:
https://codepen.io/g_debailly/pen/zYGQKOe
This is the predictions array:
[
{
"topLeft": [
-261.7025451660156,
218.29611206054688
],
"bottomRight": [
-429.23638916015625,
343.9468994140625
],
"landmarks": [
[
-309.3980703353882,
265.82969784736633
],
[
-374.39136600494385,
260.38822889328003
],
[
-341.75953893363476,
302.7327650785446
],
[
-344.2469654083252,
320.3148329257965
],
[
-280.4582414627075,
261.1372035741806
],
[
-415.7755718231201,
250.6269371509552
]
],
"probability": [
0.9908785223960876
]
}
]
I solved the problem by setting the argument const flipHorizontal = false in the call to model.estimateFaces().
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 am using angularjs and Google charts.
How to include zero values in Google Pie Chart? I am able to show it in the legend by including sliceVisibilityThreshold: 0
see screenshot to see what I already have
But what I want is to display it in both legend and in the chart: display zero value in pie chart like this
Is there any way to achieve what I want? I searched in Google forums but couldn't find any solution. Thanks in advance.
use the option for legend.position: 'labeled' to show a line for the zero values
legend: {
position: 'labeled'
},
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
"cols": [
{"label": "Country", "type": "string"},
{"label": "# of Devices", "type": "number"}
],
"rows": [
{"c": [{"v": "Canada"}, {"v": 0}]},
{"c": [{"v": "Mexico"}, {"v": 33}]},
{"c": [{"v": "USA"}, {"v": 34}]}
]
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
chart.draw(data, {
height: 400,
legend: {
position: 'labeled'
},
sliceVisibilityThreshold: 0,
width: 600
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Please see the plunker http://plnkr.co/edit/tO5IgK2Bcx5fDKXCkFgH?p=preview. Initially there are so many repetitions of x-ticks for the same data value. Then, when I select Date Range slider, main chart x-ticks are getting changed to some peculiar dates like 01/01/70, etc. Purposely I have given small data set. Even though the data is in standard format lineWithFocusChart is not working properly, how can fix this? Is it a bug in nvd3 lineWithFocusChart?
$scope.data = [
{
"values": [
{
"series": 0,
"y": 0.3,
"x": 1394841600000
},
{
"series": 0,
"y": 0.3,
"x": 1394928000000
}
],
"key": "ABC"
}
];
Note : I have commented large data set in my plunker. For large data set lineWithFocusChart is working fine.
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]]
}