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.
Related
In a dual axes graph I am trying to plot a chart that has a green line overlayed on an area (with range). Therefor, between the blue lines (which are generated from dataSet1), I would like to have a background color
I have the following configuration:
const config: any = {
data: [dataSet1,dataSet2],
xField: 'year',
yField: ['price','price'],
legend: false,
geometryOptions: [
{
geometry: 'line',
},
{
geometry: 'line',
color: 'green',
lineStyle: {
lineWidth: 4,
},
point: {
shape: 'breath-point',
},
},
],
};
<DualAxes {...config} />
I have tried multiple things, like setting an isRange: true, area: true, area: 'red' in various parts of the config but I am unable to get it done.
NOTE: a dual axes graph is not necessary. as long as the setup below (green line, custom points, area with background color) can be plotted.
I using Apache Echarts and have an issue using type: 'value' works in case of X-axis.
My code:
You can try here
option = {
xAxis: {
type: 'value',
data: [1.12, 2.19, 3.84, 3.47, 5.75, 6.76, 9.141],
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
According to the documentation of the API,
xAxis. type
'category' Category axis, suitable for discrete category data.
'value' Numerical axis, suitable for continuous data.
When I use 'category' as the type: for x-axis it gives me the curve as expected but the x-axis isn't evenly spaced.
But I have to plot about 10,000 points of continuous data from the sensors as in the data for x-axis. The API suggests to use xAxis.type: 'value' for such data.
When I set the xAxis.type: 'value', the render looks like this.
It would be great if someone could help me out and tell me where I am going wrong or if this is an actual bug.
When both the axis types are value, the data should be in the following format so that the x and y values are mapped properly.
data = [
[1.12,820],
[2.19, 932],
[3.84, 901], //xaxis value is not in order
[3.47,934], //xaxis value is not in order
[5.75,1290],
[6.76,1330],
[9.141,1320]
];
If the axis values are not in order, you can sort them to display accordingly.
//sort data by xaxis values to plot the values in order
data.sort(function(a, b){return a[0] - b[0]})
Then set the data to the chart
option = {
xAxis: {
type: 'value',
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line'
}]
};
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).
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 am trying to place two Shield UI Charts in the same container. The one chart is line-type and the other- area. However it seems that the second chart is replacing the first one, so as a result I’ve got only the area chart to see. Below is my code:
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'area',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
Each chart is completely and entirely rendered to a container, and to put it simple no other charts can be rendered to it in any given moment. I see you are using a single series charts, so first of all you can simply place the series in one chart.
Or you could simply place another container on the page, since having two containers will visually not reflect the appearance of the charts.