I am creating a QuickChart.io using Chart.JS within a PowerApps canvas and am having some issues with formatting. Everything works on the visualization (filtering, rendering, etc.) but I am trying to remove the gridlines and resize the display area but the formatting options are not showing up. Any idea what's causing this?
"https://quickchart.io/chart?c="&EncodeUrl("{
'type': 'bar',
'data': {
'labels': ["&Concat(Filter(Table2,Scenario=_code),"'"&'X-Axis'&"',")&"],
'datasets': [
{
'label': 'Dataset 2',
'backgroundColor': 'rgba(54, 162, 235, 0.5)',
'borderColor': 'rgb(54, 162, 235)',
'borderWidth': 1,
'data': ["&Concat(Filter(Table2,Scenario=_code),"'"&DataSet1&"',")&"]
}
]
},
'options':
{
'elements': {
'rectangle': {
'borderWidth': 2
}
},
'responsive': true,
'maintainAspectRatio': false,
'legend': {
'display': false
},
'grid': {
display: false
},
'title': {
'display': true,
'text': 'Revenue'
}
}
}")
Your config is invalid, there is no grid option in the root of the options.
Depending on if quick chart is using chartjs V2 or v3 you need to configure it in the scales section
V2: options.scales.xAxes[0].gridLines.display
V3: options.scales.x.grid.display
And then you replace x by y to remove the y grid
Related
I am trying to set the default properties for the spreadsheet, which I create by Google Sheets API.
I did everything according to the documentation for the API, but the newly created spreadsheet doesn't have these default values.
The only things it has are the titles of the spreadsheet and the sheet, the rowCount and columnCount. NO horizontalAlignment, no verticalAlignment, no wrap, no font, no font size, no borders.
Here are the default properties which I am trying to set.
# Spreadsheet body
sheet_body = {
'properties': {
'title': 'Test_Spreadsheet',
'defaultFormat': {
'horizontalAlignment': 'CENTER',
'verticalAlignment': 'MIDDLE',
'wrapStrategy': 'WRAP',
'textFormat': {
'fontFamily': 'calibri',
'fontSize': 14,
'bold': True
},
'borders': {
'top': {'style': 'SOLID', 'width': 1},
'right': {'style': 'SOLID', 'width': 1},
'bottom': {'style': 'SOLID', 'width': 1},
'left': {'style': 'SOLID', 'width': 1}
}
}
},
'sheets': [ {
'properties': {
'title': 'Total',
'gridProperties': {
'rowCount': 5,
'columnCount': 3
}
}
} ]
}
# Create spreadsheet
sheet = service.spreadsheets().create(body=sheet_body).execute()
Why they are not working???? Please, help.
Thanks
I tried different values without success.
I am trying to download pdf with jquery but when I download pdf it showing content
for that I have make below code
{
extend: 'pdfHtml5', title: 'Customer Sales Rep Sales Totals', orientation: 'landscape',
footer: true,
action: newPDFAction,
exportOptions: {
columns: ':visible',
order: 'applied',
modifier: {
pageMargins: [ 0, 0, 0, 0 ], // try #3 setting margins
margin: [ 10,0 ], // try #4 setting margins
alignment: 'center'
},
body : {
margin:[10,0],
pageMargins: [ 0, 0, 0, 0 ],
alignment: 'center'
} // try #5 setting margins
,columns: [0,1,2,3,4,5,6,7] //column id visible in PDF
},customize: function (doc)
{
doc.content[1].table.widths = [ '15%', '15%', '10%','10%','10%', '15%', '15%' ,'10%'];
doc.content[1].borders = ['2px solid'];
doc.content[1].fillColor = '#ccc';
doc.content.splice(0,0);
}
}
I don't know why it is showing like this. html is showing properly while I am hitting this html in browser
can anybody help me in this?
I'm creating a heatmap of the United States and the designers want to "stop" the color from bleeding outside the US borders. So under Texas, the colors would reach the edge of the state and just stop.
Is this possible?
I tried creating another layer that included Mexico, Canada, and the Pacific/Atlantic Oceans, but heatmaps render after and I can't find out how to set a render priority, either.
edit: Here is an image that shows the desired effect:
And here is my code, minus some irrelevant data:
mapboxgl.accessToken = 'accessTokenString';
var map = new mapboxgl.Map({
container: 'map-heatmap',
style: 'mapbox://uri/for/styles',
center: [-95.922211, 37.881266],
zoom: 3.15,
minZoom: 3.15,
maxZoom: 3.15,
maxPitch: 0,
dragPan: false,
dragRotate: false
});
map.on('load', function() {
map.addSource('states', {
'type': 'geojson',
'data': '/path/to/us-states-contiguous.geojson'
});
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#F2F2F2'
}
});
map.addSource('mexico', {
'type': 'geojson',
'data': '/path/to/mexico.geojson'
});
map.addLayer({
'id': 'mexico',
'type': 'fill',
'source': 'mexico',
'layout': {},
'paint': {
'fill-color': '#fff'
}
});
map.addSource('heatmapCoordinates', {
'type': 'geojson',
data: {
"type": "FeatureCollection",
"features": {/* JSON coordinates */}
}
});
map.addLayer({
'id': 'myHeatmap',
'type': 'heatmap',
'source': 'heatmapCoordinates',
'layout': {},
'paint': {
'heatmap-weight': 1,
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0, 0, 0, 0)',
1,
'rgba(0, 183, 79, 1)',
],
'heatmap-radius': 100,
'heatmap-opacity': .5
}
}, 'mexico');
map.addLayer({
'id': 'state-borders',
'type': 'line',
'source': 'states',
'layout': {},
'paint': {
'line-color': 'rgba(43, 43, 43, .5)',
'line-width': .25
}
});
});
For some reason, the borders that I draw over the heatmap appear "on top" of it. But when I try a layer to "fill", (like with Mexico above), it won't appear over the heatmap gradients, always underneath.
So how would I be able to "clip" the heatmap's shading outside of the US borders to achieve the above image's desired effect?
Your heatmap renders above the clip polygons because you're adding it to the map afterwards.
You just need to change the order of the two addLayer() calls.
I need seperate labels mounted for example:
this is an Area Chart from Google Chart. is posible change distance of label to points?
Regards,
I Resolved it, only need add atribute "stem" to an annotations, i share the solution:
series: {
0: {
pointSize: 5,
annotations: {
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11
}
}
},
1: {pointSize: 5,
annotations: {
stem: { length: 20 },
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11,
}
}
},
}
The result:
I hope it help anyone,
Regards
I have a problem to show my Highchart in a container div.
In the .html file I have the next code:
<div class="col-md-12" style="margin-top:10px">
<div id="container" style="width:100%; height: 500px;"></div>
In my controller I have a function which I create the chart after doing query to the DB and to save the data in the variable media. The chart is created as follows:
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Media'
},
subtitle: {
text: '..'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Media'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Media: {point.y:.1f}'
},
series: [{
name: 'Population',
data: media,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
The "data" are received correctly, the problem is that when I click in a button to call this function and I try to show the chart, appears "http://localhost:8080/graphics#container" in my address bar but the chart doesn't appear till I click the button a second time.
I don't understand why is it happening this and how can I do to show the data in my "first click".
If anyone can help me I will be very grateful.
Thank you!
SOLVED
The probrlem was another function which I used to move the scroll. I deleted it and everything works fine!
The fuction was the following:
function downScroll(){
$location.hash('container');
call $anchorScroll()
$anchorScroll();
}