Currently, I'm using a back end process to create a JSON file for a 3d bar chart with HighCharts.
[{
"name": "Town",
"data": ["NorthCentral","NorthEast","SouthCentral","SouthEast","West"]
}, {
"name": "Population",
"data": [99.47,82,89,82,82]
}]
What I would like know is - can you pass in colors with each data point? for example:
[{
"name": "Town",
"data": ["NorthCentral","NorthEast","SouthCentral","SouthEast","West"]
}, {
"name": "Population",
"data": [{color: 'red',99.47},82,89,82,82]
}]
I have tried already with no luck. This might not be supported but I thought I would ask.
Try something like
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
A sample with line chart
Related
We are using the "Autodesk.BIM360.Extension.PushPin" extension inside the forge viewer to enable push pins.
When a push pin has been added to the model, we serialize the pushpin data and store it in our database. An example of such a pushpin is here:
{
"id": "12",
"label": "12",
"status": "quality_issues-not_approved",
"position": {
"x": 15.324803588519861,
"y": -10.150864635427533,
"z": -5.532972775562976
},
"type": "issues",
"objectId": 24518,
"externalId": "d9a1e318-14d0-4d08-b7ab-6d1c331454c2-002793d1",
"viewerState": {
"seedURN": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"objectSet": [{
"id": [],
"isolated": [],
"hidden": [],
"explodeScale": 0,
"idType": "lmv"
}],
"viewport": {
"name": "",
"eye": ["-15.17842530349136", "-0.9048862425583284", "0.6506974303790392"],
"target": ["-22.06049144652811", "0.915848677106827", "-0.4205110420886964"],
"up": [-0.14385076361076257, 0.038057482024001874, 0.9888673247056924],
"worldUpVector": [0, 0, 1],
"pivotPoint": ["-22.510046835506888", "1.6223793651751013", "3.668585646439837"],
"distanceToOrbit": 7.198985875545766,
"aspectRatio": 1.491792224702381,
"projection": "orthographic",
"isOrthographic": true,
"orthographicHeight": 7.198985875545767
},
"renderOptions": {
"environment": "Boardwalk",
"ambientOcclusion": {
"enabled": true,
"radius": 13.123359580052492,
"intensity": 1
},
"toneMap": {
"method": 1,
"exposure": -7,
"lightMultiplier": -1e-20
},
"appearance": {
"ghostHidden": true,
"ambientShadow": true,
"antiAliasing": true,
"progressiveDisplay": true,
"swapBlackAndWhite": false,
"displayLines": true,
"displayPoints": true
}
},
"cutplanes": [],
"globalOffset": {
"x": -20.808594999999997,
"y": 6.686511499999999,
"z": 8.456207
}
},
"objectData": {
"guid": "6de5f80c-73da-30ae-b2d1-8a78f177c2a4",
"urn": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"viewableId": "aaff5911-e8b1-4ae2-b41c-4284d0703eb4-00150218",
"viewName": "{3D}"
}
}
We then load the pushpin into the model again at a later point (when the user reopens the model), like this:
pushPinExtension.loadItems([pushPinItem]);
The result is that the pushpin is added in the model at the correct place, but the viewer state is incorrect. It seems like the viewer state for the pushpin is set to the viewer state of the model at the time when we load the pushpin - and not to the viewer state stored inside the pushpin.
Is this expected behaviour? - and if so, how do I use the viewer state from the pushpin instead?
why not explicitly load the viewer state stored in the pushpin separately after loading the pushpin:
pushPinExtension.loadItems([pushPinItem]);
viewer.restoreState(pushPinItem.viewerState)
EDIT:
Try restore the viewer state when an item is clicked - subscribe to the click event with:
viewer.restoreState(...)
//...
})
I'm working with fullcalendar for the first time. it seemed straight forward at first but then problems. Ok I am trying to use eventSource to load multiple sources. It loads all the google calendar sources no problem but the json feed is not being displayed. I'm wondering if its because I'm using a static json file to test or maybe I left out something, or is the json formatted wrong. Do I need to code a json feed in java to test (working with java)? These are the things I've looked at and I've looked at the other links regarding fullcalendar and json and none helped. If someone could give me a little help it would greatly appreciated.
feed.json
{
"events":
[
{
"id": "0",
"title": "Business Lunch",
"start": "2015-09-03T13:00:00",
"end": "2015-09-03T14:00:00",
"constraint": "businessHours"
},
{
"id": "2",
"title": "Conference",
"start": "2015-09-18",
"end": "2015-09-19",
"constraint": "businessHours"
},
{
"id": "3",
"title": "Party",
"start": "2015-09-29T20:00:00",
"end": "2015-09-29T24:00:00",
"constraint": "businessHours"
}
]
}
code sample
eventSources: [
// your event source
//feed source
{
url: '/hairzone/feed.json',
type: 'GET', //GET or POST
dataType: 'json',
data: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
},
// any other sources...
{
googleCalendarId: 'some calendar id',
color: 'pink', // an option!
textColor: 'black', // an option!
//rendering: 'background'
overlay:false
},
// any other sources...
{
googleCalendarId: 'some calendar id',
color: 'blue', // an option!
textColor: 'black', // an option!
rendering: 'background',
overlay:false
}
]
I solved the problem. It seems that the feed is not formatted properly for fullcalendar. It just need everything starting with the brackets. Doesn't matter if its a static file or generated feed.
[
{
"id": "0",
"title": "Business Lunch",
"start": "2015-09-03T13:00:00",
"end": "2015-09-03T14:00:00",
"constraint": "businessHours"
},
{
"id": "2",
"title": "Conference",
"start": "2015-09-18",
"end": "2015-09-19",
"constraint": "businessHours"
},
{
"id": "3",
"title": "Party",
"start": "2015-09-29T20:00:00",
"end": "2015-09-29T24:00:00",
"constraint": "businessHours"
}
]
I came to read the json file to output to an highcharts.
I have a highcharts areagraph whose values are received from json whose format is as follows:
scope.jsondata = [
{
"Name": "A",
"Categories": "03.01",
"Locate": "1",
"Value": 30
},
{
"Name": "A",
"Categories": "03.02",
"Locate": "1",
"Value": 50
},
{
"Name": "A",
"Categories": "03.03",
"Locate": "1",
"Value": 60
},
{
"Name": "A",
"Categories": "03.04",
"Locate": "1",
"Value": 40
},
{
"Name": "A",
"Categories": "03.05",
"Locate": "1",
"Value": 70
}
];
How can I embed those values for my jsondata in angularJS?
scope.render = function (data) {
var target = element.find('#detail-usage-chart'),
firstDate = {
name: scope.jsondata.Name,
data: scope.jsondata.Vaule,
color: '#f48d7f',
type: 'area'
},
tempOption = {
data: [10, 13, 17, 8, 11, 5, 11, 13 ,16, 18, 20, 13, 16, 21, 19],
type: 'spline',
yAxis: 1
}
};
Please provide a suitable way to embed the data from json.
Area chart is expecting a name and an array contaning values in its series:
See here
So all you have to do is just a quick function in order to prepare your data that way. For example:
var scope.readyValues = [];
for(var i=0;i<scope.jsondata.length;i++)
{
scope.readyValues.push(scope.jsondata[i].Value);
}
Next, just configure the series this way:
// .....chart options
series: [{
name: scope.jsondata[0].Name,
data: scope.readyValues
}
If you have multiple Names in your scope.jsondata then you can use jquery map function or you can make an array for each name.
And since you're using angular I recommend you use Highcharts-ng it's easier ;)
datapie = [
{"label": "Running", "data": [19.5], "color":"#e1ab0b"},
{"label": "Stopped", "data": [4.5], "color":"#fe0000"},
{"label": "Terminated", "data": [36.6], "color":'#93b40f"}
];
Getting an error
TypeError: d is undefined
Please help!!
data is called using ajax
The data doesn't look to be in the correct format. It should look like this:
datapie = [
{label: "Running", data: 19.5, color: '#e1ab0b'},
{label: "Stopped", data: 4.5, color: '#fe0000'},
{label: "Terminated", data: 36.6, color: '#93b40f'}
];
Tutorial - http://digitalunion.osu.edu/2011/12/21/make-graphs-and-charts-with-jquery-using-flot-js-%E2%80%94-a-brief-tutorial/
Fiddle - http://jsfiddle.net/Rnusy/5/
I have a pretty nested JSON coming from a ldap_search() call. I would like to use this information to populate an ExtJS ComboBox, but I am facing some troubles with the reader. Apparently, I am not able to read the information that I need in the ComboBox, that is the mail address of the people, the uid and the cn
I think the whole problem lies in the store. I was trying the following code:
var store= new Ext.data.JsonStore({
url:'search.php',
root: '',
totalProperty: 'count',
fields: [
{name:'cn', type: 'string', mapping:'cn.0'},
{name:'mail', type: 'string', mapping:'mail.0'},
{name:'uid', type: 'string', mapping:'uid.0'}
]
});
but FireBug told me missing ; before statement return obj.cn.0 in ext-all.js (line 7). I tried with another, easier JSON array and it works, that is why I really think the problem lies in this part of code, especially in the mapping.
an example of JSON returned by search.php is:
{
"count": 2,
"0": {
"mail": {
"count": 1,
"0": "Mail address not registered."
},
"0": "mail",
"uid": {
"count": 1,
"0": "name0.surname0#domain.com"
},
"1": "uid",
"cn": {
"count": 1,
"0": "Surname0 Name0"
},
"2": "cn",
"count": 3,
"dn": "cn=Surname0 Name0,ou=personal,dc=domain,dc=com"
},
"1": {
"mail": {
"count": 1,
"0": "name1.surname1#domain.com"
},
"0": "mail",
"uid": {
"count": 1,
"0": "name1.surname1"
},
"1": "uid",
"cn": {
"count": 1,
"0": "Surname 1 Name 1"
},
"2": "cn",
"count": 3,
"dn": "cn=Surname1 Name1,ou=personal,dc=domain,dc=com"
}
}
Thanks for your time.
Yep, that JSON structure is not going to work straight away with standard ExtJS JSONReader. Take a look at this example taken from the ExtJS API documentation on how the JSON should look like.
{
results: 2000, // Reader's configured totalProperty
rows: [ // Reader's configured root
// record data objects:
{ id: 1, firstname: 'Bill', occupation: 'Gardener' },
{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
...
]
}
Also, the root config option is required, you cannot leave it empty. In the above example your root would be "rows".
You are probably going to need to parse that JSON of yours into a simpler format at first, before feeding it to the JSONReader.
I was looking to do the same thing, but have one of the nested items be a field in my chart. This post kept coming up, so I thought it might be helpful to see what I did to solve the chart issue. The key to solving it is knowing that the label config exists: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.Label. Using that you can override the default render of what you pass in. In this example the field is "key" (Not shown here, but my model is using the default type for 'key' (ie., not string)). The key object gets passed to renderer. Using function(t), I can now access that object like javascript and pass back the name under the object.
json
key : {
wholePath : "c:/.../fileName.txt",
fileName : "fileName.txt",
}
code:
axes: [
{
title: 'Values',
type: 'Numeric',
position: 'left',
fields: ['value'],
minimum: 0,
maximum: 100,
minorTickSteps: 1
},
{
title: 'File Name',
type: 'Category',
position: 'bottom',
fields: ['key'],
label: {
renderer: function(t) {
var fileName = t.name;
return fileName;
}
}
}