After an initial load of a chart I want to append Annotations on the go by updating the chart.
Currently I have an update function which append data to the chart:
const chart = this.chart.getChart();
const serie = this.getSerie();
chart.series[0].setData(serie.list);
Is there a way where I can append Annotations in a similar way?
At the moment I insert annotations into the initial chart config:
annotations: [{
xAxis: 0,
yAxis: 0,
xValue:1515571888000.3572,
yValue: 200,
anchorX: 'left',
anchorY: 'top',
title: 'Annotation text',
}]
But i'm interested in being able to add annotations as I update the chart.
Currently i'm using react-highcharts v. ^11.0.0 from npm.
Refer to this live demo: http://jsfiddle.net/kkulig/gxv5f3xn/
You can use Chart.removeAnnotation() and Chart.addAnnotation() to perform dynamic updates (Chart.update() won't work). These methods are not docummented in the API yet.
annotations: [{
id: 'anno1',
labels: [{
point: 'first',
format: '1'
}, {
point: 'second',
format: '2'
}]
}]
(...)
chart.removeAnnotation('anno1');
chart.addAnnotation({
id: 'anno2',
labels: [{
point: 'first',
format: '3'
}, {
point: 'second',
format: '4'
}]
});
When the series is being hidden via legend item click the error occurs - it's a bug (the official fix for it should be implemented soon). To prevent this error from happening I used modified core functions (lines 1 - 39 in the demo).
Related
How can I do in REACT if I want to connect Google Sheets as a remote source into React Grid (from DevEstreme)?
Well, DevExtream Reactive Grid can work with data only in the following format:
<Grid
rows={[
{ id: 0, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
]}
columns={[
{ name: 'id', title: 'ID' },
{ name: 'product', title: 'Product' },
{ name: 'owner', title: 'Owner' },
]}>
<Table />
</Grid>
You need to associate a column with a row field using the column’s name field. It means that if you could get data from your Google Sheet (e.g. as in Google Sheets API - Reading and Writing Values) and modify them according to this, you will be able to display them.
If you need an automatical connection, the answer is no. Reactive Grid accepts only this data format. Otherwise, you need to process data manually.
I am new to the highcharts. I am using donut highchart where in the below provided link we can get the static data
http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie-donut/
But i have a no. of data in the same format as
Highcharts.chart('container5',{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Daily Report'
},
subtitle: {
text: '3D donut'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Amount',
data: [$rootScope.oprep2]
}]
})
Here $rootScope.oprep2 is the data which in the array format as per the format shown / given in the demo as
in the above picture you can the line number 1025 which is in the required format.
the above pic shows the open array which contains data as unitno and amountpaid
My Query is, that the data is not displaying in the chart. So any idea, which will help me a lot. Here is the view as daily report
Here is my data
Array[11] =>
Array[2]=>
0:"001"
1:180
Array[2]=>
0:"007"
1:4570
Array[2]=>
0:"008"
1:1060
Array[2]=>
0:"026"
1:180
Each array is seperated by ,
As i have gone through your code, i see that your getting array of array, but you are assigning that data again with array which is not getting the chart. Instead of joining, separation, try to remove the array assign it directly.
data:$rootScope.oprep2
but not
data:[$rootScope.oprep2]
I'm trying to add some icons inline to the TreeView data items, however the k-template directive does not seem to be rendering anything.
I base this off of the online docs at
http://demos.telerik.com/kendo-ui/treeview/angular
and here's a plunkr of what I'm trying to do:
treeview plunkr
My HTML (with a simple test)
<div id="treeview" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)">
<span k-template>{{dataItem.text}} TEST THIS TEMPLATE !!!</span>
</div>
and here's a snippet of my dataSource coming from my datacontext service:
function getReportsTree() {
var reportsJson = [
{
id: 1, text: "Standard", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 3, text: "MTM Aggr", reptName: "MTM Aggr", spriteCssClass: "folder" },
{ id: 4, text: "Member Aggr", reptName: "Member Aggr", spriteCssClass: "folder" }
]
},
{
id: 30, text: "Hierarchy", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
{ id: 31, text: "Ctpy Hrchy", reptName: "CTPYHIER", withHierarchy: 'true' },
{ id: 32, text: "Ctpy/BkgLocation Hrchy", reptName: "CTPYHIER_BKG_LOC", withHierarchy: 'true' }
]
}
];
return $q.when(reportsJson);
}
Image showing the rendered tree, where the template does NOT render :
I need to know if I'm missing some key piece here, or do I have incorrect formatting.
thank you in advance,
Bob
**** UPDATE ****
I'm now checking to see if my Kendo UI library is a few versions behind. It may have something to do with my issue.
A Kendo UI lib update to 2014.3.1308 was necessary to get the k-template option embedded into the treeview.
However I do find a minor bug, even on their demo website - when you expand a tree node, that same level's text becomes the literal {{dataItem}}.
I want to use KendoUI Line Graph for Angular which is not displaying X Axis Label. I tried editing the existing example where the code is as follows:
k-series="[
{ field: 'nuclear', name: 'Nuclear electricity' },
{ field: 'hydro', name: 'Hydro electricity' },
{ field: 'wind', name: 'Wind electricity' }
]
I tries changing the code as shown in some other angular chart example by KendoUI as
k-series="[{ xField: 'price', yField: 'performance' }]"
k-x-axis="{
max: 1000,
labels: { format: '${0}' },
title: { text: 'Price' }
}"
k-y-axis="{
min: 80,
labels: { format: '{0}%' },
title: { text: 'Performance Ratio' }
But it seems if your chart type is line, it doesn't recognizes k-x-axis and k-y-axis .
k-series-defaults="{ type: 'line'}"
Please provide help as how I can show x-axis values:
Link to their Angular Line Chart is as follows:
To see the information about this chart, please see
http://demos.telerik.com/kendo-ui/line-charts/angular
For Editing : http://dojo.telerik.com/iVOxo
Scatter charts, such as scatterLine use the axes configured in xAxis and yAxis. Arrays are accepted when defining multiple axes.
In your example the series type is set to line. This series type uses the categoryAxis and valueAxis. Therefore the axis configuration, as it is, will be ignored.
You should remove the field: '...' bindings and change the series type to scatterLine
k-series-defaults="{ type: 'scatterLine'}"
I hope this helps.
Here is my select field. We can see that the options are SI,American and Imperial
{
xtype: 'selectfield',
flex: 1,
itemId: 'units_Selector',
maxHeight: 50,
label: 'Units',
options: [
{
text: 'SI',
value: 'SI'
},
{
text: 'American',
value: 'American'
},
{
text: 'Imperial',
value: 'Imperial'
}
],
usePicker: false,
listeners: [
{
fn: function(element, eOpts) {
var unit = Ext.getStore('configstore').last().get('Units');
this.suspendEvents();
this.setValue(unit);
this.resumeEvents();
},
event: 'painted'
}
]
},
Here what I see when using my app...
OUPS seems like SI is displayed has International?
FYI - International was the option's name I gave this option at first. I decide to change it but my app seems to disagree with me on this one ....
Here is a console.log() of my selectfield's options
And here is the funniest part, my code.js file to see that it does save to it correctly from sencha architect
Would anyone know how to repair that problem...?
Answer is dumb...
Seriously, if you have multilanguage app... double check you aint modifing the value field -_-< when updating the language (text field).
found the problem by changing the itemId to something else to see who what changing the value of this select field. (Automaticly created an error and gave me a code line to find it)