I am having json file like this. It contains some data.
[{\"Frequency\":\"Building 1\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":46,\"Value1\":26,\"Value2\":22},{\"Name\":\"food\",\"Value\":32,\"Value1\":26,\"Value2\":12}]},{\"Frequency\":\"Building 2\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":48,\"Value1\":26,\"Value2\":23},{\"Name\":\"food\",\"Value\":34,\"Value1\":33,\"Value2\":12}]},{\"Frequency\":\"Building 3\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":57,\"Value1\":22,\"Value2\":24},{\"Name\":\"food\",\"Value\":42,\"Value1\":16,\"Value2\":11}]},{\"Frequency\":\"Building 4\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":59,\"Value1\":26,\"Value2\":33},{\"Name\":\"food\",\"Value\":44,\"Value1\":26,\"Value2\":35}]},{\"Frequency\":\"Building 5\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":62,\"Value1\":26,\"Value2\":11},{\"Name\":\"food\",\"Value\":48,\"Value1\":26,\"Value2\":3}]},{\"Frequency\":\"Building 6\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":62,\"Value1\":26,\"Value2\":21},{\"Name\":\"food\",\"Value\":47,\"Value1\":26,\"Value2\":24}]},{\"Frequency\":\"Building 7\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":58,\"Value1\":26,\"Value2\":22},{\"Name\":\"food\",\"Value\":43,\"Value1\":26,\"Value2\":22}]},{\"Frequency\":\"Building 8\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":48,\"Value1\":26,\"Value2\":2},{\"Name\":\"food\",\"Value\":34,\"Value1\":26,\"Value2\":33}]}]
I want to store this json file into dataset in d3.js. or
I have given all data are static into my code. I want to give these data from json file to d3.js can any one give me example.
my expected result is
dataset = JSON.parse("[{\"Frequency\":\"Building 1\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":46,\"Value1\":26,\"Value2\":22},{\"Name\":\"food\",\"Value\":32,\"Value1\":26,\"Value2\":12}]},{\"Frequency\":\"Building 2\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":48,\"Value1\":26,\"Value2\":23},{\"Name\":\"food\",\"Value\":34,\"Value1\":33,\"Value2\":12}]},{\"Frequency\":\"Building 3\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":57,\"Value1\":22,\"Value2\":24},{\"Name\":\"food\",\"Value\":42,\"Value1\":16,\"Value2\":11}]},{\"Frequency\":\"Building 4\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":59,\"Value1\":26,\"Value2\":33},{\"Name\":\"food\",\"Value\":44,\"Value1\":26,\"Value2\":35}]},{\"Frequency\":\"Building 5\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":62,\"Value1\":26,\"Value2\":11},{\"Name\":\"food\",\"Value\":48,\"Value1\":26,\"Value2\":3}]},{\"Frequency\":\"Building 6\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":62,\"Value1\":26,\"Value2\":21},{\"Name\":\"food\",\"Value\":47,\"Value1\":26,\"Value2\":24}]},{\"Frequency\":\"Building 7\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":58,\"Value1\":26,\"Value2\":22},{\"Name\":\"food\",\"Value\":43,\"Value1\":26,\"Value2\":22}]},{\"Frequency\":\"Building 8\",\"Data\":[{\"Name\":\"Medicine\",\"Value\":48,\"Value1\":26,\"Value2\":2},{\"Name\":\"food\",\"Value\":34,\"Value1\":26,\"Value2\":33}]}]");
inside the bracket my data should be come i dont know how to do this can any tell me how to do this.
before i tried this but it is not working.
d3.json("D3json.json", function(error, data) {
var datas = data;
})
here is my jsfiddle example: Click here to see the example
Thanks
Vinoth S
If I understood your question correctly, you are trying to dynamically load JSON data in contrast to having it hard-coded in your file.
Here is an example how to do it: http://bl.ocks.org/Jverma/887877fc5c2c2d99be10
In general, you have to execute the drawing part after you successfully loaded the data (within the callback function of d3.json())
I'm new to using Google's APIs and have been trying to figure out how to implement the Places Autocomplete API with Angular. I've never really worked with autocomplete in general. I do not have the jQuery library pulled into my project at the moment, but I believe I've seen some developers utilizing that inside the directive with element.autocomplete.
I did look for any existing directives that might help with this, and I've found: https://github.com/kuhnza/angular-google-places-autocomplete
After setting that up according to the documentation, I haven't been able to get it to work, and I also didn't see where I would set up the API key for it to function in the first place. I think the main error has to do with the API key, but I'm not positive.
From what I understood, Google's Docs mention to include the API key as a key parameter when pulling the places library. If I omit the key like in the directive's documentation, I get MissingKeyMapError. If I add the key like Google says, I get ApiNotActivatedMapError. At the same time, Google also says my API key is a server API key, and "This key should be kept secret on your server".
The line for pulling in the library that I'm referencing is: <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Doing a cURL request with my PHP backend or just in the browser provides me with the results. So now I'm just trying to understand how Autocomplete works and how I could get it work with AngularJS.
So yeah, I'm a bit confused on this whole topic. If anyone could point me in the right direction or point out what I may be misunderstanding, it'd be a great help!
You can create a Google API key for a specific domain and in this way you will be sure that no one else can use it on his page etc.
I've also implimented Google place directive using this api and we need API key to get API SDK.
<script src="https://maps.googleapis.com/maps/api/js?libraries=places?key=your_key"></script>
Here is directive code.
angular.module('app')
.directive('googlePlace', directiveFunction);
directiveFunction.$inject = ['$rootScope'];
function directiveFunction($rootScope) {
return {
require: 'ngModel',
scope: {
ngModel: '=',
details: '=?'
},
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
model.$setViewValue(element.val());
$rootScope.$broadcast('place_changed', scope.details);
});
});
}
};
}
You can use it like
<input type="text" google-place ng-model="venue.address_line_1" aria-label="search">
and then in controller, catch the place_changed event.
$scope.$on('place_changed', function (e, place) {
// do something with place
});
you can pass your api key right here in the script as params
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>
and after that if you see this error ApiNotActivatedMapError then it means that you need to activate the service google places in your google dev console
https://console.developers.google.com
under API Google Maps click more and you should see Google Places API Web Service click it and activate .
hope this helps
I'm messing around with Webix and the League of Legends API to see some champion data. The League API just gives you back giant JSON files that you can use to display data. However, I'm not sure what the best way to go about parsing these files for use in my data views are.
Here's my webix code for the datatable:
var leagueTable = {
rows: [
{
view: "template",
type: "header", template: "Champion Stats"
},
{
view: "datatable",
autoConfig: true,
url: RiotApiUrlUtility.getFindSummonerUrl("someSummoner")
}
]
};
The URL works and I get back the JSON I'm expecting. However, the JSON is structured such that the table doesn't display data how I want. (The table is rendered fine and it shows my summoner name from the json in the table, but the relevant data is nested further so the default parsing of the json doesn't know how to put it in the table).
I've looked through the documentation for webix and it might be the case that I have to use a DataProcessor, but the documentation is confusing without any concrete examples. I'm sure this operation must be pretty simple and I'm just missing something. Can anyone assist? Thanks.
Figured it out. I did:
webix.ajax().get(RiotApiUrlUtility.getFindSummonerUrl("aSummoner"),{
error:function(text, data, XmlHttpRequest){
alert("error");
},
success:function(text, data, XmlHttpRequest){
var data = JSON.parse(text);
$$('champDataTable').parse(data.aSummoner);
}
});
Lets say I want to use JSON code from one site, particular this one, "http://coinmarketcap.com/static/generated_pages/currencies/datapoints/boostcoin-main.json", to integrate it for my highcharts. As I have seen this has following values: x_min, x_max and price_data. How can I make highcharts on my site using this JSON data? Any help with this?
Look at this example and how it uses JSON code and notice how the JSON data should be, because it changes with every chart type: http://jsfiddle.net/highcharts/YWVHx/
$.getJSON('THE LINK TO YOUR FILE',
function(data) {
// Create the chart
$('#container').highcharts(
...
data : data,
...
);
});
EDIT: More information about working with data
I want to use JSON instead of MongoLab example shown on AngularJS website.
Here's the code from the website:
angular.module('mongolab', ['ngResource']).
factory('Project', function($resource) {
var Project = $resource('https://api.mongolab.com/api/1/databases' +
'/angularjs/collections/projects/:id',
{ apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
update: { method: 'PUT' }
}
);
Is there any way I could connect and put into JSON file available on my folder instead of hosting it to MongoLab?
Any response would be really appreciated!
You can look at this example:
Reading in JSON through Angular Resources Service
You want to return the Project variable from your factory
var Project = $resource('test.json', {} );
return Project;
then use it in the controller after you inject it:
Project.get(function(data){
$scope.bar = data.foo;
});
Update:
After looking thru the 1.1.3 angular-resource.js code, it looks like it always does an http request to get its data. Set up a simple RoR app with a REST interface for testing.
Or use plunker (like the linked question above) for complete remote testing.