I'd like to pass some graph parameters via a JSON array to the graph. In it, it should be the title of the graph, the units, ... and clearly, the data.
As soon as I start to try to convert the JSON array from a simple "data" array to one which can hold more information, it doesn't work anymore. I guess it has something to do with the sort of brackets I am using. Being confused about which ones are the right ones.
I put it into a fiddle.
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 50
},
xAxis: {
},
title:
{
text: "Title",
align: "center",
},
plotOptions:
{
series:
{
marker:
{
enabled: false
}
}
},
series: [{}]
};
/* This works
data = [
{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}
];
*/
/* This doesn't */
data = [
{
"series":
[{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}]
}
];
/* load the stuff in the JSON like this= */
options.series = data["series"];
var chart = new Highcharts.Chart(options);
});
Thanks a lot for any hints what I am doing wrong.
The data object is array so you need to refer to first element and then to object.
options.series = data[0].series;
Example: http://jsfiddle.net/jd41gz1q/6/
Related
I have a series data like this [null,0,null,null,null,null,0.86,null,0,null]
As you can see, there are only three points in it.
However it has been displayed as below,
Please see the demo here,
Highcharts.chart('container', {
chart: {
type: 'area',
spacingBottom: 30
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ["Term 3_week1","Term 3_week2","Term 3_week3","Term 3_week4","Term 3_week5","Term 3_week6","Term 3_week7","Term 3_week8","Term 3_week9","Term 3_week10"]
},
yAxis: {
title: {
text: 'Y-Axis'
}
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [null,0,null,null,null,null,0.86,null,0,null]
}]
});
I am quite confused why this been displayed like this.
Can anyone help?
Thanks
First if you look your demo on firefox it will only show 3 points without any area.
Now you may try to use connectNulls Api Doc like that :
chart: {
type: 'scatter',
spacingBottom: 30
},
plotOptions: {
area: {
fillOpacity: 0.5,
connectNulls:true
}
},
Edit: New type of chart
Updated Fiddle
I am using react-jsonschema-form to create a form. Single components are displaying fine but array components are coming in a row. How Can I make them appear one array object in a row so that everytime I click Add button , new array object is rendered in new row. Code is as follows:
const schema = {
type: "object",
properties: {
Name: { type: "string", title: "Name", default: "A new Task" },
Title: { type: "object", properties: { First: { type: "string" }, Second: { type: "string" } } },
XYZ: { type: "array", items: { type: "object", properties: { Third: { type: "string" }, Forth: { type: "boolean", enum: [true, false], enumNames: ["True", "False"] } } } }
}
}
const uiSchema = {
"ui:order": ["Name", "Title", "Done"],
Name: { "ui:widget": "textarea" },
Title: { First: { "ui:widget": "textarea" }, Second: { "ui:widget": "textarea" } },
XYZ: { items: { Third: { "ui:widget": "textarea" }, Forth: { "ui:widget": "radio", "ui:options": { inline: true } } }, "ui:options": { orderable: false, removable: true, inline: false } }
}
Form Code is as Follows:
<Form schema={schema}
// formData = {defaultData}
uiSchema={uiSchema}
onChange={log("changed")}
onSubmit={SubmitRoutine}
onError={ErrorRoutine}
/>
As shown in the following picture Array XYZ objects are fixed width and displaying next to each other. I want them full width and every object in new row. I am using React and Bootstrap4
Also very time I have to even add first object by clicking Plus button. I want first object to appear itself. Please let me know how may I fix it. Thanks
Checkout this library. It allows laying out your form using bootstrap-grid.
It could be achieved with pure CSS, provided there is no need to reflect order in the model:
/* class of a wrapping element */
.array-item-list {
display: flex;
/* column, column-reverse, row, row-reverse */
flex-direction: column-reverse;
}
Is there any way to generate bar colours dynamically in ZingChart?
in screen-shot there is two colours generated in bar chart, i want to get list of colors used in bar chart.
html file
<zingchart id="timesheet-bar-chart" zc-values="barValues" zc- json="myObj"></zingchart>
controller
$scope.myObj = {
"type": "bar",
"plot":{
"stacked":true,
"stack-type":"normal" /* Optional specification */
},
"scale-x":{
"transform":{
"type":"date",
"all":"%d %M",
"item": {
"visible":false
}
},
"values":$scope.bar_x_axis,
},
};
and barValues is a list of integer values.
Since your question is asking how to get the bar colors, not set the bar colors. I thought my answer would be appropriate as well.
You can use the API to getobjectinfo from the chart.
demo here
$scope.myRender = {
events : {
complete : function(p) {
var info1 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 0
});
var info2 = zingchart.exec(p.id, 'getobjectinfo', {
object : 'plot',
plotindex: 1
});
console.log(info1, info2);
}
}
}
If youre confused on the $scope.myRender variable you can read up more on the angular directive here.
You can set the colors like this,
$scope.myJson = {
'plot': {
'styles': ['#yellow', 'red', 'blue']
},
'scale-x': {
'values': ['white', 'red', 'pink']
},
'type': 'bar',
'series': [{
'text': 'Product History Color',
'values': [2, 6, 8]
}]
}
DEMO
You can specify the colors, fonts etc by yourself.
e.g.
scaleX: {
labels: ['Facebook','Apple', 'Microsoft', 'Intel','Google', 'Amazon'],
item: {
fontFamily: "Roboto",
fontSize: 14
},
lineColor: "#DDD",
tick:{
visible: false
}
},
I'm trying to display chart like this one, with following data:
[{"name":"doctor","monetary":"on","number":57},{"name":"programmer","monetary":"non-monetary","number":15}]
but I can't group monetary on or of value with the rest of the data.
Is there some other way to display chart with these data?
Here is the definition in controller:
$scope.chart = c3.generate({
bindto: d3.select('#chart'),
data: {
json: $scope.data,
columns: [
['monetary'],
['number']
],
keys: {
value: ['doctor', 'programmer']
},
groups: [
['number'],['monetary']
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
});
},
function formatData ( json ) {
var formattedData = [],
object = {};
// fill object with data
angular.forEach(json, function(row) {
if (row.hasOwnProperty('name') && row.hasOwnProperty('number')) {
this[row.name] = row.number;
}
},object);
formattedData.push(object); // push c3 object in the array
return formattedData;
}
}]);
Remove this part of code if I am not wrong then it will display separately
groups:
[ ['number'],['monetary']],
After modification the code is as below and also a fiddle link has been given.
var chart = c3.generate({
data: {
columns: [
['MONETARY', 0, 3259, 10415, 14660, 2950, 16705, 22255, 4000],
['NON-MONETARY', 12335, 18041, 35900, 21985, 15110, 370, 13055, 20740]
],
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: ['DENTIST', 'PROGRAMMER/ANALYST', 'CORPORATE SECRETARY', 'PHYSICIAN', 'PROFESSOR', 'PRESIDENT', 'MANAGER', 'CO-OWNER']
}
}
});
See the modified fiddle:
http://jsfiddle.net/63cp42Lv/4/
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.