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.
Related
I have a question about combining column and staked bar for react highchart,
it is similar to the answer of this link:
Highchart combination chart with stacked column
but I want to change the above column to stacked bar which is horizontal.
When I change the defaultColumnSeries to
var defaultColumnSeries = {
type: 'bar',
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontSize: '9px'
}
},
showInLegend: false,
groupPadding: 0.1,
yAxis: 1,
xAxis: 1
}
then all the columns become horizontal also which is not what I want.
I want to keep the below columns vertical and the above stacked bar horizontal.
What should I do to achieve it?
Using bar series type enables chart.inverted option, which makes it impossible to use column and bar series types on the same chart. As a solution, you can create another chart and place it on top of the other.
Highcharts.chart('container', {
...
});
Highcharts.chart('container2', {
chart: {
height: 100,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
yAxis: {
visible: false
},
xAxis: {
visible: false
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/k3z5opvr/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
Github issue: https://github.com/highcharts/highcharts/issues/13363
On clicking save charts button of stock tool chart nothing happens. How does it work?
This is my chart config
this.trendChart.update({
series: {
showInNavigator: true,
dataGrouping: {
approximation: "average"
}
}
},
series: [{
id: 'series1',
}],
chart: {
spacingRight: 35
},
exporting: {
enabled: true,
buttons: {
contextButton: {
x: 0
}
}
},
stockTools: {
gui: {
enabled: true
}
},
});
Any config change I need to do?
The button save a chart in localStorage under highcharts-chart key. You can for example use it to keep some drawn annotations after refresing a browser.
The following items are stored:
annotations
indicators (with yAxes)
flags
You can get the options in the following way:
const savedOptions = localStorage.getItem(['highcharts-chart']);
Live demo: https://jsfiddle.net/BlackLabel/u6Lte04d/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E
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.