I am trying to export highstock data to csv/xlsx and also view data table. But I do not get proper data when I download or view data. It exports the chart series data as well as the navigator series data.
Highcharts.stockChart('container_' + $scope.tileId, {
rangeSelector: {
selected: 1,
allButtonsEnabled: true,
inputEnabled: true,
buttons: [{
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
chart: {
width: null,
marginRight: 100
},
title: {
text: $scope.tileName
},
navigator: {
enabled: true
},
exporting: {
chartOptions: {
rangeSelector: {
enabled: false
}
},},
yAxis: {
title: { text: $scope.xAxisLabel }
},
plotOptions: {
},
xAxis: {
type: 'datetime'
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
},
series: $scope.seriesOptions
});
I am also using export-data.js as Highstock does not support export to excel directly.
data downloaded looks something like this
Now If I disable the navigator the exported data is correct.
The issue is I need to keep the Navigator enabled and not export the series data in the navigator but only the Chart series data.
According to this:
To prevent the navigator in a stock chart, set
navigator.series.includeInCSVExport to false.
Like this:
navigator: {
series: {
includeInCSVExport: false
}
}
Related
I am using echart for display line chart.
In this chart yAxis values are not ploting for red line.
As you can see in tooltip value of green line is match position. At this point red line must be blow 9000.
How can i set yAxis value for multiple line.
Hare is my echart code
<ReactEcharts
option={{
animationDuration: 1000,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: usersData.indexes
}
],
yAxis: [
{
type: 'value',
}
],
series: [
{
name: 'Total new users',
type: 'line',
stack: 'Total',
data: [
5230,4963,5167,5715,5468,4752,9732,9312,8814,7900,6964,6889,7613,9363,5911],
smooth: false,
showSymbol: true,
},
{
name: 'India new Users',
type: 'line',
stack: 'Total',
data: [2515,2424,2691,2817,2687,2207,6769,4182,3941,3487,2716,2690,3381,4431,1493],
smooth: false,
showSymbol: true,
}
]
}}
/>
I have defined my tree code here in ExtJS. I declare my store there in the treepanel definition.
Here is my code.
{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
animateShadow: true,
enableDD: false,
id: 'myTreePanel',
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [],
}
})
}
From the response, I am getting my data like this. Can anyone help me to load the data in ExtJS Tree panel.
myTreeData = [{
children: [],
text: 'text1'
}, {
children: [],
text: 'text2'
}, {
children: [{
children: null,
text: 'text31'
}, {
children: null,
text: 'text32'
}],
text: 'text3'
}, {
children: [],
text: 'text4'
}, {
children: [],
text: 'text5'
}]
You should use store.setRootNode(myTreeData).
I create dataSourec in the controller
$scope.dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(response.data.value);
}
},
serverFiltering: true,
serverSorting: true,
pageSize: 20,
schema: {
model: {
fields: {
languageId: { type: 'number', editable: true, nullable: false },
dateStart: { type: 'date', ediitable: true },
dateEnd: { type: 'date', ediitable: true },
count: { type: 'number', editable: true, nullable: false }
}
}
}
});
Then I bind it to my component
<div data-ng-if="!displayList">
<analytics-grid data-data-source="dataSource"></analytics-grid>
</div
where I add it to options of my grid
ctrl.gridOptions = {
dataSource: ctrl.dataSource,
sortable: true,
pageable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}],
editable: {
mode: 'popup',
confirmation: true
},
messages: { commands: { create: "" } }
};
and then bind to kendo grid in the component view
<kendo-grid data-k-options="$ctrl.gridOptions" data-k-ng-delay="$ctrl.gridOptions" data-k-rebind="$ctrl.dataSource"></kendo-grid>
I show component view when someone switch the button(data-ng-if="!displayList" in code above). I have to switch button to displayList = true and then again to displayList = false, to update grid data, why it do not update dynamicly when dataSource change in my controller, and button is set to show kendoGrid?
I have resolved the problem by declare ctrl.gridOptions as function
ctrl.gridOptions = function () {
return {
dataSource: ctrl.dataSource,
sortable: true,
columns: [{
field: "languageId",
title: "language",
width: "120px",
filterable: false,
values: _languagesLookupDS.data().toJSON()
}, {
field: "count",
title: "count"
}, {
field: "dateStart",
title: "dateStart"
}, {
field: "dateEnd",
title: "dateEnd"
}]
};
}
and then bind it to the view
<kendo-grid data-k-scope-field="$ctrl.analyticsGrid" data-k-options="$ctrl.gridOptions()" data-k-rebind="$ctrl.dataSource"></kendo-grid>
My job mate told that problem occurred couse view was looking for object of options and don't know how to resolve it when dataSource change. Right now it just call method and get options with new dataSource.
I am trying to figure out why I have that chart wider than the container. I noticed that if I remove the width completely for the first screenshot and then set width: 100% in the next. However, I am not able to force this styles and I think this is not the right way to go.
Here are the settings of my chart. Apart from that, I do not use any other css.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container10',
type: 'line',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacingRight: 5,
height: 370,
width: 770
},
title: {
text: 'Database volume'
},
colors:['#229369', '#00526F'],
xAxis: {
categories: catValues
},
yAxis: [{
title: {
text: 'Table size in MB'
},
labels: {
style: {
color: '#229369'
}
}
},
{
title: {
text: 'Index size in MB'
},
labels: {
style: {
color: '#00526F'
}
},
opposite: true
}],
tooltip: {
valueSuffix: ' MB'
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
name: 'Table',
data: series1,
}, {
name: 'Index',
yAxis: 1,
data: series2
}]
});
I am not sure if this is the correct way of fixing that, but seems to work. I set the width of the container of the chart directive.
.chart-wrapper {
width: 99%;
}
Then in the directive code onDataLoaded or windowResized I call this:
function resize() {
height = chart.height;
width = $(".chart-wrapper").width();
chart.setSize(width, height, doAnimation = false);
}
Suppose I have some data that I want to display on an Ext.js bar chart and I want my data to revolve around a custom value, "1.0" for example, on the y-axis (versus traditionally "0.0").
Meaning, the picture below has negative values represented with inverted bars, I would like values less than "1.0" to show as an inverted bar on the chart.
Is there a setting that I can set to acheive this? If so, would it be in the series and the axis definition? Maybe the chart itself?
The code for the chart displayed is below:
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.define('CPI', {
extend: 'Ext.data.Model',
fields: [{
name: 'ReportingPeriod',
type: 'string'
}, {
name: 'CPI_P',
type: 'decimal'
}, {
name: 'CPI_C',
type: 'decimal'
}]
});
var store1 = Ext.create('Ext.data.Store', {
model: 'CPI',
data: [{
ReportingPeriod: 'Period1',
CPI_P: '1.9',
CPI_C: '1.2'
}, {
ReportingPeriod: 'Period2',
CPI_P: '1.2',
CPI_C: '1.1'
}, {
ReportingPeriod: 'Period3',
CPI_P: '0.1',
CPI_C: '0.5'
}, {
ReportingPeriod: 'Period4',
CPI_P: '-0.5',
CPI_C: '0.6'
}, {
ReportingPeriod: 'Period5',
CPI_P: '-0.9',
CPI_C: '0.8'
}, {
ReportingPeriod: 'Period6',
CPI_P: '-1.0',
CPI_C: '-0.6'
}, {
ReportingPeriod: 'Period7',
CPI_P: '-1.1',
CPI_C: '-0.7'
}, {
ReportingPeriod: 'Period8',
CPI_P: '-1.5',
CPI_C: '-0.8'
}]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
theme: 'Category1',
store: store1,
width: 300,
height: 300,
renderTo: 'chart',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['CPI_P', 'CPI_C'],
title: 'CPI',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['ReportingPeriod'],
title: 'Reporting Period'
}],
series: [{
type: 'column',
axis: 'left',
xField: 'ReportingPeriod',
yField: 'CPI_P',
markerConfig: {
type: 'cross',
size: 3
},
renderer: function(sprite, record, attr, index, store) {
var value = (record.get('CPI_P') >> 2) % 2;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)'
][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
chart.show();
UPDATE
If I add a minimum to y-axis I get closer (sort of)
...
axes: [{
type: 'Numeric',
position: 'left',
fields: ['CPI_P', 'CPI_C'],
title: 'CPI',
grid: true,
minimum: 1,
}....
It's the right idea, because the bars now are relevant to the number 1, but I obviously need to keep the bars on the graph.
What has seemed to work is subtracting 1 from my data and adding 1 to the labels.
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
maximum: 1.0, //will render to 2.0
fields: ['PeriodAmount', 'CumulativeAmount'],
label:{
renderer:function(v){
return (v+1).toFixed(2);
}
}
}...]
This is a viable work around for me, but I wouldn't consider this an elegant answer since it isn't very configurable for custom values. For example, changing this to -1 or 2 would require more work than just changing a simple setting.