I want to load the Nativescript (RadCartesianChart) properties from external json file to my main xml file. How to call this RadCartesianChart property from an external json file?
The external json file should look like :
{
"title":"chart",
"chart-type":"Line",
"x-axis":"month",
"y-axis":"amount"
}
This is my current xml file:
<Page
loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:sd="nativescript-pro-ui/sidedrawer"
xmlns:chart="nativescript-pro-ui/chart"
>
<ActionBar title="MyApp" class="action-bar"/>
<StackLayout class="home-panel">
<Label textWrap="true" text="OVERVIEW" class="overview"/>
<Label textWrap="true" text="Sales Report" class="graph-desc"/>
<GridLayout class= "gLayout" rows="*" height="800px" width="1300px">
<chart:RadCartesianChart row="0">
<chart:RadCartesianChart.series class="Line">
<chart:LineSeries items="{{ categoricalSource }}" categoryProperty="{{ categoryProperty }}" valueProperty="{{ valueProperty }}">
<chart:LineSeries.horizontalAxis>
<chart:CategoricalAxis/>
</chart:LineSeries.horizontalAxis>
<chart:LineSeries.verticalAxis>
<chart:LinearAxis/>
</chart:LineSeries.verticalAxis>
</chart:LineSeries>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</GridLayout>
<GridLayout rows="*" xmlns:chart="nativescript-pro-ui/chart" height="800px" width="1300px">
<chart:RadPieChart row="0" allowAnimation="true" row="0">
<chart:RadPieChart.series>
<chart:PieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" items="{{ categoricalSource }}" valueProperty="Amount"
legendLabel="Department" />
</chart:RadPieChart.series>
<chart:RadPieChart.legend>
<chart:RadLegendView position="Right" title="Dep" offsetOrigin="TopRight" width="110" enableSelection="true" />
</chart:RadPieChart.legend>
</chart:RadPieChart>
</GridLayout>
</StackLayout>
As per https://docs.nativescript.org/core-concepts/data-binding
In your js file add
// Either import your JSON here or...
var OptionsModel = require("./test.json");
// call GetString to get it from server or external source.
// and add it to OptionsModel.
// All the variables you wish to import in the xml add it to pageBinding as an object.
// then you can use {{'options or model or whatever name you give'.'value you want to access inside it'}}
page.bindingContext = {
model: homeViewModel,
options: OptionsModel
};
In your xml add
{{ model.categoricalSource }} or {{options.title}} to access values
Related
How to send a sting text data from a python script to a specific HTML element. So that I can display it to users clearly and in a certain place using Flask Python library.
python script
#app.route('/services', methods=['POST', 'GET'])
def upload_image():
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No image selected for uploading')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
full_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
file.save(full_path)
# print('upload_image filename: ' + filename)
flash('Image successfully uploaded and displayed')
get_image(file.filename)
get_image_path()
data = 'render some text sting here'
print(data)
return render_template('services.html', filename=filename, dataToRender=data)
else:
flash('Allowed image types are -> png, jpg, jpeg, gif')
return redirect(request.url)
HTML
<form method="post" action="{{ url_for('upload_image') }}" enctype="multipart/form-data">
<label for="img" style="margin-bottom: 40px;font-size: 30px">choose image:</label>
<input type="file" onchange="preview(event)" autocomplete="off" required name="file"><br>
<img class="card-img-top" src="img/inttion.jpg" id="imgg" alt="Card image cap">
<p>
<input type="submit" value="Submit">
<h3>Your Recognition Result IS</h3>
<input type="text" name="result">
<h1>here is the result {{ dataToRender }}</h1>
</p>
</form>
To do what you are asking, you will have to make use of flask's ability to integrate with a templating engine (flask uses Jinja2 by default). This would look something like this:
In your main file with your routes in it, you will have to define a route on which you want to render a template
from flask import render_template
#app.route('/')
def index():
data = someFunction()
return render_template('index.html', dataToRender=data)
In another file called templates/index.html you will have to define the template and this is where you can dictate where the information that you provided will show up.
<!DOCTYPE html>
<title>Hello from Flask</title>
<h1>Hello {{ dataToRender }}!</h1>
I hope this helps. Flask also has some great documentation on the subject that can be found here
I have an amp page that is called on:
https://expample.amp.com?id=1234abc
(Not the real url.)
<amp-list src="https://some.external-url.com/?dataid=NEEDS_ID"
layout="responsive"
items="Result"
width="100"
height="100"
>
<template type="amp-mustache">
<p>{{FullName}}</p>
</template>
</amp-list>
I want my id query param to be injected into the src of the amp-list tag at NEEDS_ID.
I already checked the QUERY_PARAM docs but couldn't understand what exactly I'm supposed to do.
I've already tried src="https://some.external-url.com/?dataid=QUERY_PARAM(id)" but that didn't work.
Any pointers/references?
My silly-and-dumb solution to this was writing an EJS node server, that parses a <%= query.id %> in that url and then sends that page to the client. Is that the correct way to do it?
I do strongly suppose that the call to the Url independent to the AMP Page, results in valid json data.
If this is the case, you may face following problems:
CORS
your result data is somehow corrputed
As for me, this saved me a lot of time:
public function getData(){
echo header('Access-Control-Allow-Origin: https://amp-YOUR-SITE');
echo header('Access-Control-Allow-Credentials: true');
echo json_data;
}
https://expample.amp.com?slug=1234abc
<amp-list id="time"
layout="fixed-height"
height="18"
src="https://api.exemple.com/posts?slug=QUERY_PARAM(slug)"
binding="refresh"
data-amp-replace="QUERY_PARAM"
single-item
items=".">
<template type="amp-mustache">
<p>{{title}}</p>
<p>{{content}}</p>
</template>
</amp-list>
I'm trying to implement amp-list to allow a different currency depending on where the user is from. I've implemented the amp-list element and created a JSON file (which is a CORS url), containing the data using the correct syntax.
The amp-list however is not printing the data, and instead printing a blank space. The HTML template is:
<amp-list width="auto"
height="50"
layout="fixed-height"
src="/amp-price/57938">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
And the JSON response is:
{"items": [{"price": "\u00a321.59", "test": "test"}]}
But the rendered HTML is:
<amp-list width="auto" height="50" layout="fixed-height" src="/amp-price/57938" class="i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-layout" aria-live="polite" style="height: 50px;">
<template type="amp-mustache">
<p class="price"> - </p>
</template>
<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div></amp-list>
The JSON response has all the correct AMP headers, and I'm not getting any AMP errors in the console.
I've also followed the src link in the page source and it goes to the correct URL.
Is there something simple I'm missing?
I had the same problem and I tried almost everything. The amp-list in safari 10 doesn't load the json endpoint.
But the solution for me is to add credentials="include" into my amp-list tag:
the final amp-list:
<amp-list credentials="include" id="smallcartsList" width="auto" height="#HeightRequest" [height]="CurrentCartList.items.length == 0 ? 5 : 50 * CurrentCartList.items.length" media="(max-width: 1199px)" layout="fixed-height" binding="no" src="/API/CartList/GetCartsList" [src]="cartlistsource" template="cartlistdetail"> </amp-list>
Sebastian Benz is correct I have use the same code and working fine
Here is working url
HEAD JS
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
BODY HTML
<amp-list width="auto"
height="50"
layout="fixed-height"
src="https://jsonblob.com/api/jsonBlob/1f6f838d-25aa-11e8-8863-d99090d9ec78">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
JSON DATA LINK
I am stuck with this issue in Django: I want to download a file already existing on my server through a html form. The file to be downloaded is served through a function in views. My problem is with html form and passing the file name to view. How can I pass the name of the file from form toward view without having to select the file?
In html I have:
# 'content' keeps the name of the file to be downloaded
{% block content %}
{{content}}
<table>
<tr>
<td>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file"/>
<br />
<input type="submit" value="Download File" />
</form>
</td>
</tr>
</table>
{% endblock %}
When I select the file and press submit button, it works but I need a different behavior: the name of the file containing results (downloadable file) to be passed to views into a variable. The views will then serve it.
The view which handled the downloadable file:
def forecast(request):
if request.method == 'POST':
#handle_download_file(request.FILES['file'], str(request.FILES['file']))
print('request.method este: ',request.method)
RESULTS_filename = 'frcst_'+ str(request.FILES['file'])
#download('GET', RESULTS_filename)
file_path = os.path.join(os.path.relpath('forecast/'), RESULTS_filename)
print (file_path)
print(settings.MEDIA_ROOT)
with open(file_path,'rb') as fh:
response = HttpResponse(fh.read(), content_type="application/vnd.ms-excel")
response['content-disposition'] = 'attachment; filename='+RESULTS_filename
print(response)
return response
HttpResponseRedirect('/forecast/')
return render(request,'result_links.html',{'content':'frcst_history.csv'})
I'm trying to fetch and display some MongoDB documents in my Meteor app. I am trying to use the docs here as a basis for this.
The HTM I've added is this:
{{> placesLived}}
. . .
<template name="placesLived">
<table style="width:60%">
{{#each places}}
<tr>
<td>{{ts_city}}</td>
<td>{{ts_state}}</td>
<td>{{ts_yearin}}</td>
<td>{{ts_yearout}}</td>
</tr>
{{/each}}
</table>
</template>
...so that the entire .html file is now this:
<head>
<title>timeandspace</title>
</head>
<body>
<h1>A List of the Places I Have Lived</h1>
{{> addTimeSpaceForm}}
{{> placesLived}}
</body>
<template name="addTimeSpaceForm">
<form>
<label for="city">City</label>
<input type="text" name="city" id="city">
<br/>
<label for="state">State</label>
<input type="text" name="state" id="state">
<br/>
<label for="yearin">Year Arrived</label>
<input type="text" name="yearin" id="yearin">
<br/>
<label for="yearout">Year Departed</label>
<input type="text" name="yearout" id="yearout">
<br/>
<input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived">
</form>
</template>
<template name="placesLived">
<table style="width:60%">
{{#each places}}
<tr>
<td>{{ts_city}}</td>
<td>{{ts_state}}</td>
<td>{{ts_yearin}}</td>
<td>{{ts_yearout}}</td>
</tr>
{{/each}}
</table>
</template>
The Javascript I've added is this:
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
...so that the entire .js file is now this:
TimeAndSpace = new Mongo.Collection('timeAndSpace');
if (Meteor.isClient) {
Template.addTimeSpaceForm.events({
'submit form': function(event){
event.preventDefault();
var city = event.target.city.value;
var state = event.target.state.value;
var yearin = event.target.yearin.value;
var yearout = event.target.yearout.value;
Meteor.call('insertLocationData', city, state, yearin, yearout);
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
Meteor.methods({
'insertLocationData': function(city, state, yearin, yearout){
console.log('attempting to insert a record');
TimeAndSpace.insert({
ts_city: city,
ts_state: state,
ts_yearin: yearin,
ts_yearout: yearout
});
}
});
}
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
My notion of what is supposed to happen here is that the "placesLived" template is added to the page, which template calls the "places" function in the js file -- which returns all the TimeAndSpace documents -- and finally the "placesLived" template loops through those returned documents, placing each field in a "td"
However, saving these changes (which restarts the Meteor app) wreaks havoc in the Meteor field: the command prompt cast the following aspersions (not to be confused with asteroids) on me:
The Meteor machine is obviously not amused. What have I fouled in my code / what needs to change?
Your helper is running on the client & server. Put an isClient around it & you'll be fine.
Anytime you get pretty purple/blue colors on the console it means something is wrong with your server. When it says Template is not defined that tells you the server can't find something called Template.