I have a js file that graphs a function with all the necessary parameters. I wish to do something like this in html:
<script src="js/index2.js" value = {{GraphData}}></script>
the js file looks something like this
var chart = AmCharts.makeChart("chartdiv", {
"graphs": [{
"id": "g3",
"valueAxis": "v1",
...
}],
"Data" = {{GraphData}}
})
Is there a way to transfer the graph data to the js file?
There's a fundamental misunderstanding here about the function of the script tag. "value" is not a valid attribute of the HTML script tag, which is used to import the text contents of a JavaScript file into your HTML file.
To achieve what you want, you can simply remove:
<script src="js/index2.js" value = {{GraphData}}></script>
and replace it with what you want imported:
var chart = AmCharts.makeChart("chartdiv", {
"graphs": [{
"id": "g3",
"valueAxis": "v1",
...
}],
"Data" = {{GraphData}}
})
More info on the HTML script tag here and here.
If you want to keep this script external, then you can use it to define a function that takes {{GraphData}} as an argument like this:
function graphData(gd) {
var chart = AmCharts.makeChart("chartdiv", {
"graphs": [{
"id": "g3",
"valueAxis": "v1",
...
}],
"Data" = gd
});
}
and then call that function in your HTML file like this:
<script src="js/index2.js"></script>
<script>
graphData({{GraphData}})
</script>
Related
I currently have an on-page script.
<script type='text/javascript' data-shl-lottie-script="1614423430104">
LottieInteractivity.create({
"mode": "scroll",
"player": "[data-shl-player='1614423430104']",
"container": "#first",
"actions": [
{"visibility": [0,1],"type": "seek","frames": [0,100]},
{"visibility": [0,1],"type": "seek","frames": [100,300]}
]
});
</script>
I want to be able to interactively manipulate this script to add (or remove) additional actions. I'm already using Regex to manipulate both the "mode" and "container". Other than using Regex (love and hate), is there some way that I'm overlooking for easily manipulating the actions section of this script using JS? I feel like the actions are just an array of objects, but I can only get them as a string and can't figure out if it is possible to convert them for manipulation and then add them back into the script on page.
Just replace the object
<script>
const myObject = {
"mode": "whatever",
"player": "[data-shl-player='1614423430104']",
"container": "#first",
"actions": [{
"visibility": [1110, 1],
"type": "seek",
"frames": [0, 100]
},
{
"visibility": [0, 1111],
"type": "seek",
"whatever": [100, 300]
}
]
}
myObject.mode="something else"
</script>
<script type='text/javascript' data-shl-lottie-script="1614423430104">
LottieInteractivity.create(myObject);
</script>
I am having a json object like the one below which I am reading from an xml file. I can see on the alert that the json obj is being displayed.
Now that I have the json object I am trying to bind against a Bootstrap datatable like in this example
How to load JSON data into Bootstrap table?
Whatever I tried the bootstrap table won't get populated. I think is because my json object contains the "book", which is the object name while the example from the link above has just a Json array. However I tried to do book.author and it still not working.
This is my plnk attempt, if anyone can have a look and tell what I am doing wrong would be great. https://plnkr.co/edit/h9islDjHyz6Sxkhl
{
"book": [
{
"author": "Gambardella, Matthew",
"title": "XML Developer's Guide",
"genre": "Computer",
"price": "44.95",
"publish_date": "2000-10-01",
"description": "An in-depth look at creating applications \n with XML.",
"id": "bk101"
},
{
"author": "Ralls, Kim",
"title": "Midnight Rain",
"genre": "Fantasy",
"price": "5.95",
"publish_date": "2000-12-16",
"description": "A former architect battles corporate zombies, \n an evil sorceress, and her own childhood to become queen \n of the world.",
"id": "bk102"
}
]
}
var $table = $('#table');
var mydata = "";
//read data from XML
$.get('hello.xml', function(xml) {
var json = $.xml2json(xml);
console.log(json);
// This part is for displaying the json result in this example
var jsonAsString = JSON.stringify(json, null, 2);
setJsonVal(jsonAsString);
});
//set mydata variablle with the json obj from XML
function setJsonVal(value){
mydata = value;
alert(value)
}
$(function () {
$('#table').bootstrapTable({
data: mydata
});
});
You need to use JSON.parse() to convert the value to json and then you can access the book by using .book.
function setJsonVal(value){
mydata = JSON.parse(value).book;
alert(value)
$('#table').bootstrapTable({
data: mydata
});
}
I'm beginning to use html charts to display data coming from json files. Up until five days ago, I very rarely did anything with html charts. But now that's all I do.
So I'm using an anychart chart, and I've been trying to find a way to populate the chart with a 'json` file.
After much trial-error, I was able to somewhat separate the data and move it to a json file. The problem is that the file's not completely json string.
As you can see, MyFile.json has the json string and some chart components. I would like my json file to be only json data; everything else should be in the html, another javascript, or anywhere else. But it cannot be in the json file.
In other words, MyFile.json should only include this:
{"x": "January","value": 10000},{"x": "February","value": 12000}, {"x": "March","value": 18000}]
Is this possible? Any help is appreciated. Thanks.
Here's MyFile.json:
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
And here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('MyFile.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
If I understood your question correctly... There might be a way within Anycharts to do this in a better way (like assign an object as the "settings" then assign a different one wit the "data"), but here's one way that you could implement this yourself:
JSON file:
[{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
AJAX request in javascript file:
$(document).ready(function(){
$.getJSON('MyFile.json', function(data) {
var wrapper = {
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": data // adding the ajax response data
}],
"container": "container"
}
};
anychart.fromJson(wrapper).draw();
});
});
You can embed json data in a html element using data-* attributes.
One approach is to append each chart into the container first and then set jquery data with the series.
$.getJSON('MyFile.json', function (charts) {
for (var i = 0, len = charts.length; i < len; i++) {
$('#container').append('<div id="chart_' + i + '"></div>');
$('chart_' + i).data('series', charts[i].series.data);
}
});
I was trying to assign value to a javascript variable in django. I need the value of javascript variable like.
var chartData = [{
section: "Czech Republic",
attempted: 301.90
}, {
section: "Ireland",
attempted: 201.10
}];
In my django view I am using the following code to generate and render the json data.
i = 0
chart1Data = []
while(i<len(totalSectionsJson)):
chart1Data.append({'section':totalSectionsJson[i].encode('utf8'),'attempted':sectionTotalAttempted[i]})
i = i+1
chart1DataExport = json.dumps(chart1Data)
In the template I am using var chartData = {{chart1Data|safe}}; to assign the javascript variable. But I am getting the data like
var chartData = [{"attempted": 0, "section": "section"}, {"attempted": 0, "section": "section2"}, {"attempted": 0, "section": "section3"}];
I need to eliminate the quotes from attempted and section. How can I do that?
I got a very simple txt file in JSON format:
{
"menu": "File1",
"bday": [
{
"name": "teo",
"date":"22"
},
{
"name": "john",
"date": "9"
},
{
"name": "maria",
"date": "15"
}
]
}
All I want is to just fetch the data and print them. Like:
teo : 22
john:9
...etc...
I don't care about this. I just want to fetch the data.
Your answer is plainly XMLHttpRequest, which is multi-browser compatible JavaScript without need for a library. You can always create your own library for some backward-compatibility.
Put the JSON in a file on your server (for example, data.js) and then use jQuery to fetch the file. Something like this:
var json;
$.getJSON("data.js", function(data){
json = data;
});