Problem customize the height of column bar - amcharts4

The column bar is too small. And I couldn't adjust their height. The screen shot is attached here: https://prnt.sc/p09hj9.
I have tried all the methods of column series at https://www.amcharts.com/docs/v4/reference/columnseries/.
am4core.ready(function() {
// Create chart instance
var chart = am4core.create("historical_monthly_chart_range", am4charts.XYChart);
// Push data into the charts
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.name = "Price Range";
valueAxis.title.text = 'Price (S$ psf)';
series.dataFields.dateX = "date";
series.dataFields.openValueY = "min";
series.dataFields.valueY = "max";
series.tooltipText = "{date} \n Maximum: {max} \n Average: {average} \n Minimum: {min} \n Volume: {value}";
// Setting the appearance
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.pointerOrientation = "vertical";
series.tooltip.label.minWidth = 40;
series.tooltip.label.minHeight = 40;
series.tooltip.label.textAlign = "left";
series.tooltip.label.textValign = "middle";
series.fillOpacity = 0.5;
series.tensionX = 0.8;
series.fill = am4core.color("#697e69");
var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "Minimum Price";
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "min";
series2.stroke = am4core.color("#697e69");
series2.tensionX = 0.8;
var series_average = chart.series.push(new am4charts.LineSeries());
series_average.name = "Average Price";
series_average.dataFields.valueY = "average";
series_average.dataFields.dateX = "date";
series_average.stroke = am4core.color("#000");
/* Bar chart series */
var barSeries = chart.series.push(new am4charts.ColumnSeries());
barSeries.dataFields.valueY = "value";
barSeries.dataFields.dateX = "date";
barSeries.fill = am4core.color("#000");
barSeries.columns.width = am4core.percent(60);
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.legend = new am4charts.Legend();
});

There is a bounty on this issue from AM charts however one workaround can be using scrollbar in Y axis like this following:
chart.scrollbarY = new am4core.Scrollbar();
This is not the best solution i agree but you can use it to slightly zoom with the buttons and scale and see
let me know if it works!

Related

Data is not distributed through out the whole x axis chart.js zoom plugin

I am loading data from the file that contain the time stamp and temperature reading.
Difference between two data can be same or some time it can be a month or so.
Can we update the x axis scale so it min and max value matches the data received.
call back function of the zoom plug in is
let timer;
function update_chart({ chart }) {
clearTimeout(timer);
timer = setTimeout(() => {
var { min, max } = chart.scales.x;
// console.log(min);
// console.log(max);
console.log("Min Location: ", chart.scales.x2.min);
console.log("Max Location: ", chart.scales.x2.max);
var file_min = chart.scales.x2.min;
var file_max = chart.scales.x2.max;
file_min = makeCorrection(file_min);
file_max = makeCorrection(file_max);
console.log("Zoom level", chart.getZoomLevel());
var total_sample = (file_max - file_min) / 116;
console.log("Totoal samples: ", total_sample);
var offset = (total_sample / 50) * 116;
offset = makeCorrection(offset);
console.log("Offfset: ", offset);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = [], y1 = [], y2 = [], y3 = [], y4 = [], y5 = [], y6 = [], y7 = [], y8 = [], y9 = [], y10 = [];
var tex = this.responseText;
if (tex[0] == ">") {
window.alert(tex);
}
else {
dataray = tex.split('\n');
//console.log(dataray);
dataray.forEach(element => {
dat = element.split(';');
if (dat.length > 5) {
x.push(dat[0]);
y1.push(dat[1]);
y2.push(dat[2]);
y3.push(dat[3]);
y4.push(dat[4]);
y5.push(dat[5]);
y6.push(dat[6]);
y7.push(dat[7]);
y8.push(dat[8]);
y9.push(dat[9]);
y10.push(dat[10]);
}
});
if (x.length > 10)
{
myLineChart.data.labels = x;
myLineChart.data.datasets[0].data = y1;
myLineChart.data.datasets[1].data = y2;
myLineChart.data.datasets[2].data = y3;
myLineChart.data.datasets[3].data = y4;
myLineChart.data.datasets[4].data = y5;
myLineChart.data.datasets[5].data = y6;
myLineChart.data.datasets[6].data = y7;
myLineChart.data.datasets[7].data = y8;
myLineChart.data.datasets[8].data = y9;
myLineChart.data.datasets[9].data = y10;
myLineChart.stop();
myLineChart.update('none');
}
else
{
console.log("Not enoguh data to plot.....");
}
}
}
};
xhttp.open("GET", "/getfile?s=" + file_min + "&e=" + file_max + "&ge=" + offset, true);
xhttp.send();
}, 100);
}
when chart load it looks like this
enter image description here
after zooming in it looks like this
enter image description here

render Image not outputting Shiny

output$plot <- renderImage({
outfile <- tempfile(fileext = '.png')
png(outfile, width = 400, height = 300)
venn.diagram(
x = list(
T = T,
I = I
),
main = "Venn Diagram ",
filename =outfile, output=TRUE,
lwd = 2,na = "remove",
fill = c("orange", "blue"),
alpha = c(0.5,0.5),
label.col = "black",
cex=1.5,
fontface = "plain",
cat.col = c("cornflowerblue", "pink"),
cat.cex = 1.5,
cat.fontfamily = "serif",
cat.fontface = "plain",
cat.dist = c(0.05, 0.05),
cat.pos = c(-20, 14),
cat.default.pos = "text",
scaled = FALSE
)
dev.off()
list(src = outfile,
contentType = 'image/png',
width = 400,
height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
I was trying plot a venn diagram using this code. But it only displays This is alternate text and not outputting any image on the app, Any Idea ?
Try to create a reactive graph as shown below
output$plot <- renderImage({
vennd <- reactive({venn.diagram(
x = list(
T = T,
I = I
),
main = "Venn Diagram ",
filename =outfile, output=TRUE,
lwd = 2,na = "remove",
fill = c("orange", "blue"),
alpha = c(0.5,0.5),
label.col = "black",
cex=1.5,
fontface = "plain",
cat.col = c("cornflowerblue", "pink"),
cat.cex = 1.5,
cat.fontfamily = "serif",
cat.fontface = "plain",
cat.dist = c(0.05, 0.05),
cat.pos = c(-20, 14),
cat.default.pos = "text",
scaled = FALSE
)
})
outfile <- tempfile(fileext = '.png')
png(outfile, width = 400, height = 300)
vennd()
dev.off()
list(src = outfile,
contentType = 'image/png',
width = 400,
height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
output$plot <- renderImage({
vennd <- reactive({venn.diagram(
x = list(
T = T,
I = I
),
main = "",
filename =outfile, output=TRUE,
lwd = 2,na = "remove",imagetype="png",
fill = c("orange", "blue"),
alpha = c(0.5,0.5),
label.col = "black",
cex=1.5,
fontface = "plain",
cat.col = c("cornflowerblue", "pink"),
cat.cex = 1.5,
cat.fontfamily = "serif",
cat.fontface = "plain",
cat.dist = c(0.05, 0.05),
cat.pos = c(-20, 14),
cat.default.pos = "text",
scaled = FALSE
)
})
outfile <- tempfile(fileext = '.png')
png(outfile, width = 500, height = 500,type="cairo")
vennd()
dev.off()
list(src = outfile,
contentType = 'image/png',
width = 500,
height = 500,
alt = "This is alternate text")
}, deleteFile = TRUE)
Need to add imagetype="png" and type="cairo" thank you #YBS

save order prestashop web service

I'm newbie with prestashop webservice, I'm trying to save orders in prestashop
database but i'm getting this error : table ps_orders doesn't exist, which is normal because prefix of my tables is different than ps_ :
here is my code :
define('DEBUG', true);
define('PS_SHOP_PATH', 'http://localhost/prestashop');
define('PS_WS_AUTH_KEY', 'CQP84L4R3GB6IV99E5WSP4JPSWXDYE1R');
require_once('./PSWebServiceLibrary.php');
try{
$webService = new PrestaShopWebservice(PS_SHOP_PATH, PS_WS_AUTH_KEY, DEBUG);
$xml = $webService->get( array('url' => PS_SHOP_PATH.'/api/carts?schema=blank') );
$resources = $xml->children()->children();
$id_currency = 3;
$id_lang = 2;
$id_product = 2571;
// $attribute_product =
$id_address = 8;
$qte_product = 1;
$id_customer = 3;
$id_carrier = 3;
$date_now = date('Y-m-d H:i:s');
$name_product = 'produit 111 ';
// $reference_product = ;
$price_product = 320;
$tax_inclu_product = 320;
$tax_excl_product = 320;
$order_module = 'cashondelivery';
$order_payment = 'Cash on delivery (COD)';
$total_paid = 355;
$total_paid_real = 355;
$total_products = $price_product;
$total_products_wt = $price_product;
$id_status = 5; // status de la commande : livré, en cours
$total_discounts =0;
$total_discounts_tax_incl = $total_discounts;
$total_discounts_tax_excl = $total_discounts;
$total_paid_tax_incl = 355;
$total_paid_tax_excl = 355;
$total_shipping = 35 ; //frais selon la ville de livraison
$total_shipping_tax_incl = $total_shipping;
$total_shipping_tax_excl = $total_shipping;
$xml->cart->id_currency = $id_currency;
$xml->cart->id_lang = $id_lang;
$xml->cart->associations->cart_rows->cart_row[0]->id_product = $id_product;
// $xml->cart->associations->cart_rows->cart_row[0]->id_product_attribute = $attribute_product;
$xml->cart->associations->cart_rows->cart_row[0]->id_address_delivery = $id_address;
$xml->cart->associations->cart_rows->cart_row[0]->quantity = $qte_product;
// Others
$xml->cart->id_address_delivery = $id_address;
$xml->cart->id_address_invoice = $id_address;
$xml->cart->id_customer = $id_customer;
$xml->cart->id_carrier = $id_carrier;
$xml->cart->date_add = $date_now;
$xml->cart->date_upd = $date_now;
// Adding the new customer's cart
$opt = array( 'resource' => 'carts' );
$opt['postXml'] = $xml->asXML();
$xml = $webService->add( $opt );
$id_cart = $xml->cart->id;
// ORDER
$xml = $webService->get(array('url' => PS_SHOP_PATH .'/api/orders/?schema=blank'));
// Adding dinamic and required fields
// Required
$xml->order->id_address_delivery = $id_address; // Customer address
$xml->order->id_address_invoice = $id_address;
$xml->order->id_cart = $id_cart;
$xml->order->id_currency = $id_currency;
$xml->order->id_lang = $id_lang;
$xml->order->id_customer = $id_customer;
$xml->order->id_carrier = $id_carrier;
$xml->order->module = $order_module;
$xml->order->payment = $order_payment;
$xml->order->total_paid = $total_paid;
$xml->order->total_paid_real = $total_paid_real;
$xml->order->total_products = $total_products;
$xml->order->total_products_wt = $total_products_wt;
$xml->order->conversion_rate = 1;
// Others
$xml->order->valid = 1;
$xml->order->current_state = 1;
$xml->order->total_discounts = $total_discounts;
$xml->order->total_discounts_tax_incl = $total_discounts_tax_incl;
$xml->order->total_discounts_tax_excl = $total_discounts_tax_excl;
$xml->order->total_paid_tax_incl = $total_paid_tax_incl;
$xml->order->total_paid_tax_excl = $total_paid_tax_excl;
$xml->order->total_shipping = $total_shipping;
$xml->order->total_shipping_tax_incl = $total_shipping_tax_incl;
$xml->order->total_shipping_tax_excl = $total_shipping_tax_excl;
// Order Row. Required
$xml->order->associations->order_rows->order_row[0]->product_id = $id_product;
//$xml->order->associations->order_rows->order_row[0]->product_attribute_id = $attribute_product;
$xml->order->associations->order_rows->order_row[0]->product_quantity = $qte_product;
// Order Row. Others
$xml->order->associations->order_rows->order_row[0]->product_name = $name_product;
// $xml->order->associations->order_rows->order_row[0]->product_reference = $reference_produc;
$xml->order->associations->order_rows->order_row[0]->product_price = $price_product;
$xml->order->associations->order_rows->order_row[0]->unit_price_tax_incl = $tax_inclu_product;
$xml->order->associations->order_rows->order_row[0]->unit_price_tax_excl = $tax_excl_product;
// Creating the order
$opt = array( 'resource' => 'orders' );
$opt['postXml'] = $xml->asXML();
$xml = $webService->add( $opt );
$id_order = $xml->order->id;
echo "Customer 1 : ".$id_customer." address: ".$id_address." cart: ".$id_cart." Order: .".$id_order;
} catch (PrestaShopWebserviceException $e) {
// Here we are dealing with errors
$trace = $e->getTrace();
if ($trace[0]['args'][0] == 404) echo 'Bad ID';
else if ($trace[0]['args'][0] == 401) echo 'Bad auth key';
else echo 'Other error<br />'.$e->getMessage();
}

iOS-Charts xAxis Labels cut off

I am using iOS-Charts to show a horizontal bar chart.
The x-Axis labels on the left are cut-off.
Only when I double tap on the chart, the correct sizing appears to happen and the labels are not cut off anymore.
Here's the code I'm using
func setChart(_ dataPoints: [(String,Int)], chart: HorizontalBarChartView) {
chart.noDataText = "No data available."
var dataEntries: [BarChartDataEntry] = []
let maxNumberEntries = dataPoints.count
var xAxisLabel: [String] = []
var counter:Int = maxNumberEntries-1
for _ in 0..<maxNumberEntries {
let dataEntry = BarChartDataEntry(x: Double(counter), yValues: [Double(dataPoints[counter].1)], label: dataPoints[counter].0)
dataEntries.append(dataEntry)
xAxisLabel.append(dataPoints[counter].0)
counter -= 1
}
xAxisLabel = xAxisLabel.reversed()
let chartDataSet = BarChartDataSet(values: dataEntries, label: "")
let chartData = BarChartData(dataSet: chartDataSet)
chart.data = chartData
chart.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
// disable zoom of chart
chart.pinchZoomEnabled = false
chart.scaleXEnabled = false
chart.scaleYEnabled = false
chart.chartDescription?.text = ""
chart.legend.enabled = false
// disable selection of bars
chartDataSet.highlightEnabled = false
chartDataSet.valueFont = NSUIFont.systemFont(ofSize: 10)
let numberFormatter = ValueFormatter()
chartData.setValueFormatter(numberFormatter)
// specify the width each bar should have
let barWidth = 0.8
chartData.barWidth = barWidth
let formato:BarChartFormatter = BarChartFormatter()
formato.strings = xAxisLabel
let xaxis:XAxis = XAxis()
_ = formato.stringForValue(Double(1), axis: xaxis)
xaxis.valueFormatter = formato
chart.xAxis.valueFormatter = xaxis.valueFormatter
let xAxis = chart.xAxis
xAxis.labelPosition = XAxis.LabelPosition.bottom // label at bottom
xAxis.drawGridLinesEnabled = false
xAxis.granularity = 1.0
xAxis.labelCount = maxNumberEntries
xAxis.labelRotationAngle = 0
// Don't show other axis
let leftAxis = chart.leftAxis
leftAxis.enabled = false
let rightAxis = chart.rightAxis
rightAxis.enabled = false
}
Any idea how to fix that?
Screenshots:
cut-off xAxis labels
after double tap the labels are not cut-off anymore
If you values are cut off even after notifyDataSetChanged, try offseting it like this:
mChart.extraTopOffset = 20
I solved this issue by calling
chart.fitScreen()
for every bar chart once all the data is passed.
HorizontalBarChart label cut issue solved you just only put this code in your chart setup:
chart.extraRightOffset = 30
If anyone has been struggling and answer did not help, once you set a chart with a new data, do not forget to call notifyDataSetChanged on chart, otherwise labels will be cut. That was my case.

Passing the lat, lng information to the google map script

I've have an index.html file that includes a gogglemap.js file to display a map of users location. Currently I am attempting to add the proper code to the index.html to pass the lat, lng info to the js file.
Here is filler content for the index file to show what I am attempting to do:
<h3><display user city></h3> <---- this needs to display users city and has filler text to show what I am trying to accomplish.
<div id="map"></div>
<script>var lat=12.356;var lng=-19.31;var country="User Country";var city="User City";</script> <----- seems like it is getting the lat/lng somehow before the index page loads and inserting this script into the index file?
Here is the js file code:
var styles = [{yourcustomstyle}]
var myLatlng = { lat: lat, lng: lng };
function initialize() {
var mapOptions = {
zoom: 12,
center: myLatlng,
styles: styles,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
var map = new google.maps.Map( document.getElementById('map'), mapOptions );
for (var a = 0; a < 6; a++) {
c = Math.random();
c = c * (0 == 1E6 * c % 2 ? 1 : -1);
d = Math.random()
d = d * (0 == 1E6 * d % 2 ? 1 : -1);
c = new google.maps.LatLng( lat + 0.08 * c + 0.052, lng + 0.2 * d + 0.08),
marker = new google.maps.Marker({
map: map,
position: c,
icon: 'marker.png'
});
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
document.body.appendChild( script );
}
window.onload = loadScript;