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
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
Can we show/hide all series except the last one only by clicking on the checkboxes and disable the legends label click?
Individual legend checkboxes should also work other than show/hide checkbox button.
When clicked on hide/show button last series should not be hidden, it should remain on the graph
https://jsfiddle.net/fx51vhs0/4/
$(function () {
$('#container').highcharts({
plotOptions: {
series: {
showCheckbox: true
}
},
series: [{
name: 's 1',
data: [29.9, 71.5, 106.4]
}, {
name: 's 2',
data: [19.9, 11.5, 26.4]
}]
}, function (chart) {
Highcharts.each(chart.legend.allItems, function (p, i) {
$(p.checkbox).change(
function () {
if (this.checked) {
chart.legend.allItems[i].show();
} else {
chart.legend.allItems[i].hide();
}
});
});
});
});
I'm using kendo-ui grid for AngularJs and want to activate virtualization of remote data functionality. For testing I have set pageSize: 5.
Below is description of virtualization of remote data from telerik site:
There are cases when you may need to operate with large amount of data
in the grid, and fetching and processing this data at once would
impose a performance penalty due to limited browser resources.
Luckily, the Kendo UI grid has a solution called data virtualization
that alleviates any slowdowns when operating with huge volumes of
data. When enabled via the scrollable->virtual configuration option,
it displays a vertical scrollbar for the grid content and renders only
the number of items set via the pageSize property of the grid data
source. After you drag the scrollbar and the pageSize is exceeded, it
makes automatic requests to retrieve and render the next set of grid
rows. Both local and remote data are supported with the grid
virtualization feature, whereas in this demo the records are obtained
from a remote endpoint.
Also I have set following:
HTML:
<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>
JS for grid:
var vm = $scope;
vm.viewMode = {
mainGridOptions: {
visible: true
}
};
vm.mainGridOptions = {
columns: [
// here columns
],
onRegisterApi: function (gridApi) {
vm.gridApi = gridApi;
},
dataSource: {
schema: {
model: {
fields: {
YearBalance: { type: 'number' },
Typezalezh: { type: 'string' },
License: { type: 'string' },
ObjectName: { type: 'string' },
ZalezhName: { type: 'string' },
PlastName: { type: 'string' },
Category: { type: 'string' },
Parameter: { type: 'string' },
LastVal: { type: 'string' },
Val: { type: 'string' },
Operation: { type: 'string' },
EndT: { type: 'date' }
}
}
},
pageSize: 5,
transport: {
read: function(e) {
dataservice.getImportResultReport().then(function(data) {
e.success(JSON.parse(data));
console.log(data);
});
}
}
},
serverPaging: true,
height: screen.height - 330,
minwidth : 1190,
batch: true,
scrollable: {
virtual: true
},
sortable: true,
serverSorting: true,
filterable: {
extra: false,
operators: {
string: {
// here filters
},
number: {
// here filters
},
date: {
// here filters
}
}
}
};
On telerik site (Official website), it says that nothing more needs to be done.
On scrolling, I should see a request to the server which in my case should be a dataservice.getImportResultReport() call. But this does't happen. This function is called only once and all data is returned.
May be it's occurring because I have not set type: "odata"? But I use data source of another type.
How to use this functionality?
Add k-scrollable directive as follows in your html that renders your kendo grid:
<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>
Also you have to use k-data-source directive for your dataSource. Hope it helps.
Working demo plunkr
I am trying to set ticks on the xAxis to begin at zero as a Global configuration option for Angular Charts and it doesn't seem to be setting the option:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions( {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])
Now I heard there might be a bug as well, so I tried this:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions("global", {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])
The way you setting beginAtzero property its wrong. Because when you configure global setting for chart scale, there is no option for setting it for xAxes or yAxes.
Try the below code for setting beginAtZero
ChartJsProvider.setOptions({
scale : {
ticks : {
beginAtZero : true
}
}
});
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.