I am using chart.js 2.6 and chart.js-plugin-annotations 0.5.5 to create a graph.
data["22:00","00:00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00","02:00"]
I would like to have an annotiation on every occurance of "00:00" to show the end of the day. I tried to have 2 annotiations but both seem to be align with the first appearance of "00:00".
annotation: {
annotations: [
{
type : "line",
mode : "vertical",
scaleID : "x-axis-0",
value : "00:00",
borderColor : "rgba(255, 255, 255, 0.2)",
},
{
type : "line",
mode : "vertical",
scaleID : "x-axis-0",
value : "00:00",
borderColor : "rgba(255, 255, 255, 0.2)",
}
]
}
Any ideas how to accomplish this?
Related
I am currently trying to use mixed chart types with vue-chartjs for a bar chart and a line chart(vue-chartjs#4.1.2, vuejs#2.6.14, chartjs#3.0.0).
As you can see in the following image the grid for the line chart (colored red) is not aligned with the grid for the bar chart.
mixed chart types
How I'm implementing the mixed chart types
const
chartContainer = this.chartContainer = this.chartContainer || document.createElement('canvas'),
data = {
datasets : [
{
data : rcd.getLineData(tAx.records),
borderColor : '#ff9e9e',
hoverBackgroundColor : '#ff0000',
fill : false,
stepped : 'end',
type : 'line',
xAxisID: 'xLine',
radius: 0,
},
{
data : rcd.getBarData(tAx.records, record, tAxs),
borderColor : '#ff9e9e',
backgroundColor : 'rgba(187,242,193,1)',
hoverBackgroundColor : '#a5eeac',
fill : true,
stepped : true,
type : 'bar',
barPercentage : 1.0,
categoryPercentage: 1.0,
xAxisID: 'xBar'
}
};
chartContainer.setAttribute('height', 100);
chartContainer.setAttribute('width', tAxModel.totalSize);
this.element.appendChild(chartContainer);
this.chart = new Chart(
chartContainer,
{
drawBorder : false,
data,
options : {
responsive : false,
animation : {
duration : 0
},
elements : {
point : {
radius : 0,
hoverRadius : 0
}
},
layout : {
padding : {
top : 5,
left : -10,
bottom : -19
}
},
plugins : {
legend : {
display : false
}
},
scales : {
xLine : {
offset: false,
grid : {
display : true,
offset : true,
color: 'red'
},
ticks : {
display : false,
}
},
xBar : {
grid : {
display : true,
offset : true
},
ticks : {
display : false,
}
},
y : {
borderWidth : 0,
min : 0,
ticks : {
display : false,
borderWidth : 0,
},
grid : {
borderWidth : 0,
display : true
}
},
},
tooltips: {
mode: 'index'
},
interaction : {
mode: 'index',
intersect : false,
axis : 'x'
}
},
}
);
Both charts get arrays with the same length and the same x-values for each item.
For example bar and line chart receive an array with values like {x: 'February 13, 2023', y: (value for bar or line chart)}
Logging this.chart and this.chart._sortedMetaSets I kind of found out that the difference for one pointElement to the next pointElement for line charts data is not equal to bar charts data.
For instance line charts pointElements: {x: 0, ...}, {x: 71.25, ...} -> it's 71.25 - but for bar charts pointElements: {x: 35, ...}, {x: 105, ...} -> it's 70.
Furthermore I found that the categoryScale for bar chart has difference to the line charts categoryScale.
Examples are _gridLineItems, _valueRange and _startValue.
Is there anything wrong in my implementation or my data?
Thank you in advance!
I am developing an application for android devices using Titanium Appcelerator., I need list view that should be like Expandable list, like children within the childrens, (Example: 3 storey)..
I went through this link and worked for 2 storeys and when i attempted to make 3 storey , it give me a bug, I can insert a new row dynamically , But i couldn't access the custom variables. What have i made mistake...
Reference link
//Third Row
var row3 = Titanium.UI.createTableViewRow({
title : "User Management",
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
height : 'auto',
isparent : true,
opened : false,
color : 'black',
borderRadius : 5,
borderColor : 'black',
borderWidth : 1,
sub : [{
className : 'children',
title : "Approve Registration",
isparent : true,
opened : false,
color : 'brown',
left : 20,
sub : [{
className : 'child1',
title : "Cross Connect",
color : 'blue',
left : 25,
font : {
fontSize : '15dp'
},
isparent : false,
}, {
className : 'child1',
title : "Smart Hands",
color : 'blue',
left : 25,
font : {
fontSize : '15dp'
},
isparent : false,
}],
height : 'auto',
font : {
fontSize : '15dp'
},
}, {
className : 'child',
title : "Invite Portal Users",
color : 'blue',
left : 20,
font : {
fontSize : '15dp'
},
isparent : false,
}, {
className : 'child',
title : "Add Users",
color : 'blue',
left : 20,
font : {
fontSize : '15dp'
},
isparent : false,
}]
});
rowData.push(row3);
tableView.addEventListener('click', function(e) {
Ti.API.info('isparent...' + e.row.isparent);
});
I can get values to the first parent,But when i clicked the dynamically added children data
i getting "undefined"
Sorry for such late reply, but have you tried using the getParent() function to get the parent object of any element.
Actually, getParent() is not listed anywhere in Titanium documentation, but you can use this function anywhere to get any number of levels of parent,grandparent of a child.
Hope it would help you & try creating the layout using Alloy as it will provide you more flexibility & a clean view to know the parents & child levels.
I want to fix my table/grid header in my ExtJs 4.2 application, so that the header is allways visible, while scroling. The main grid in my application has a fixed header and is implemented as in the code in the bottom of this post.
It is not working and I don't know why...
I tried it with the split attribute, but it isn't working, too... :(
This is the code:
function openThePopup() {
var win = new Ext.Window({
modal : true,
height : 500,
width : 900,
plain : true,
border : false,
resizable : false,
maximizable : false,
draggable : true,
closable : true,
closeAction : 'destroy',
title : 'Title',
autoScroll : true,
buttonAlign : 'center',
items : [ {
xtype : 'grid',
id : 'theGrid',
store : theStore,
border : 0,
layout : 'fit',
margins : '5 0 0 0',
split : true,
columns : [ {
text : 'Country',
dataIndex : 'country'
}, {
text : 'City',
dataIndex : 'city'
}, {
text : 'ZIP',
dataIndex : 'zip'
}, {
text : 'Street',
dataIndex : 'street',
width : 200
}, {
text : location,
dataIndex : 'name',
width : 200
} ],
listeners : {
itemdblclick : function(t, record, item, index, e, eOpts) {
...
}
}
} ],
buttons : [ {
onClick : function() {
...
}
} ]
}).show();
}
I appriciate any help.
Thank you very much in advance.
Best wishes to all of you.
Your layout isn't configured correctly. The layout: 'fit' should go on the window and the layout configuration should be removed from the grid. Also remove the autoScroll config on the window.
For loading the Cy3-exported network, this works great:
cy.add(network.elements); // where 'network' is the json object exported by Cy3
What command loads and applies the exported vizmap? This command ran to completion, but the visual style of the network bears no resemblance to what we see in Cy3.
cy.style().fromJson(vizmap).update() // where 'vizmap' is the json vizmap object from Cy3
Advice, anyone? Perhaps even a small example?
Thanks!
Paul
Rather than loading this data after init, have you tried using the init options instead. That's where style is specified.
cytoscape({
style: networkJson.path.to.style,
elements: networkJson.path.to.elements
// ...
});
Edit: It looks like Cytoscape-desktop generates JSON like this
[ {
"title" : "hallmarksOfCancer",
"style" : [ {
"selector" : "node",
"css" : {
"text-opacity" : 1.0,
"width" : 70.0,
"border-opacity" : 1.0,
"background-color" : "rgb(255,255,255)",
"background-opacity" : 1.0,
"font-size" : 20,
"shape" : "ellipse",
"border-width" : 1.0,
"border-color" : "rgb(0,0,0)",
"color" : "rgb(0,0,0)",
"height" : 30.0,
"text-valign" : "center",
"text-halign" : "center",
"font-family" : "SansSerif",
"font-weight" : "bold",
"content" : "data(label)"
}
}, {
"selector" : "node[score > 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score = 4.6]",
"css" : {
"width" : 140.0
}
}, {
"selector" : "node[score > 0.0][score < 4.6]",
"css" : {
"width" : "mapData(score,0.0,4.6,70.0,140.0)"
}
}, {
In that case, you can use something like style: visjson[i].style in your init options, where i ranges on 0 <= i <= visjson.length. Cytoscape desktop exports several stylesheets at once, so you 'll need to specify which one (i.e. i) you want to use.
I would like to change color of chart in extjs type ='pie'.
Can I use renderer in the series block please see the example:
..... },
series : [ {
type : 'bar',
axis : 'bottom',
gutter : 0,
groupGutter : 0,
yField : this.fields,
title : this.fieldTitles,
stacked : true,
fill: true,
scope: this,
renderer: function(sprite, record, attr, index, store) {
var color = this.fieldColors[index];
return Ext.apply(attr, {
fill: color
});
},.....
Instead of a custom renderer, you can use the colorSet property for your series.
series: [{
colorSet: this.fieldColors,
...
}]
See http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Pie-cfg-colorSet