I have a Rally SDK 2.0p5 app that displays a chart. When the user selects an option, the data will be updated and I would like to refresh the chart. But instead of redrawing, it will place a new chart beneath. What is the proper syntax?
// Configure and Add the chart
this.add(
{
xtype: 'rallychart',
height: 400,
id: 'chart',
chartConfig: {
chart: {
},
title: {
text: 'My Chart',
align: 'center'
},
xAxis: [
{
categories: ['M0','M1','M2','M3','M4','M5'],
title: {
text: 'Interval'
}
}
],
yAxis: {
title: {
text: yText
}
},
series: [ { type: 'column',
name: yText,
data: mCount } ],
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
}
}
);
You need to remove the 1st chart before adding the new one.
redrawChart: function() {
this.remove('#chart');
this.add({...});
}
It's often better to just update the chart in place. HighCharts is the charting library that's included in the App SDK. HighCharts will even animate your changes. Cool!!! Look here for the list of methods that operate on charts. You can add series, change data, change axis limits, control the zoom, etc.
Related
I would like to hide a pie chart slice on load but cannot figure out how to do so.
I'm not sure it's possible, but it seems like it might be. There is a property "selected", but it does not seem to change when I manually select or unselect a wedge via the legend. I've tried to dispatchAction like this example (example), but haven't had any luck:
I think you are close to the solution... Actually, you should tweak legend.selected.
Take a look at this basic example:
let option = {
legend: {
selected: {
'B': false // <--- HERE
}
},
series: [
{
type: 'pie',
label: {
position: 'inner'
},
data: [
{ value: 10, name: 'A' },
{ value: 20, name: 'B' },
{ value: 15, name: 'C' }
]
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
I have a dynamic chart that allows the user to switch between pie, bar and line charts (in the full deployment the user can switch Ajax data as well).
The export to PDf is causing me some issues. I can adjust the font size and style on the pie chart using:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
}
}
}
However, when I export a bar chart, the xAxis font size is still to large.
I tried:
exporting: {
enabled: false,
sourceWidth: 842,
sourceHeight: 595,
chartOptions: {
plotOptions: {
series: {
dataLabels: {
style: {
fontSize: '7px',
lineHeight: '7px'
}
}
}
},
xAxis: [{
labels: {
style: {
fontSize: '7px'
}
}
}]
}
}
Which altered the font size beautifully, unfortunately it removed all my custom xAxis labels and replaced them with numbers.
I have a fiddle https://jsfiddle.net/spencerplanton/dr0au6kg/5/
Which allows you to see the issue.
I apologise in advance for the slightly verbose nature of the example, but it has been lifted from several sources and a much larger dynamic chart application.
Any help formatting the PDF export bar chart axis font size would be greatly appreciated.
Kind regards
The options for arrays are overwritten. You need to set:
exporting: {
...,
chartOptions: {
...,
xAxis: [{
type: 'category',
labels: {
style: {
fontSize: '7px'
}
}
}]
},
}
Live demo: https://jsfiddle.net/BlackLabel/ryn5p20q/
API Reference: https://api.highcharts.com/highcharts/exporting.chartOptions
In my react native application I have a Highcharts chart displaying some bar chart info.
I want to display the legend, so people know what the chart is showing, but I want to disable the functionality that hides bars when the legend is touched.
Additionally the bars themselves fade in and out when you press them... I have disabled the 'tooltip' but the fading still happens, how can I stop this?
If I could render to a static image that would be ideal!
just for info the code is
let Highcharts = "Highcharts";
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: { enabled: false },
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: FieldStore.graphData.slice()
};
To disable hiding series on legend click, return false from legendItemClick event function.
To disable a tooltip and the fading effect on series hover set enableMouseTracking to false. If you want to also turn off the fading effect on legend hover, change opacity in inactive state:
plotOptions: {
series: {
enableMouseTracking: false,
states: {
inactive: {
opacity: 1
}
},
events: {
legendItemClick: function() {
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/gjkprbto/
API Reference:
https://api.highcharts.com/highcharts/series.bar.enableMouseTracking
https://api.highcharts.com/highcharts/series.bar.events.legendItemClick
https://api.highcharts.com/highcharts/series.bar.states.inactive.opacity
I'm trying to create a view, which has essentially a list where each row has text and 2 buttons aligned right. The text of the buttons will always be the same - only the text of the row will need to be fetched from the store.
I saw this question but couldn't get the proposed solution to work. I definitely have records in my store, but the dataview does not display.
A simplified version of my code:
My main view:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
...
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [
...
{xtype: 'mylist'}
...
]
...
}
...
});
DataView:
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.DataView',
alias: 'widget.mylist',
requires: ...,
config: {
useComponents: true,
store: 'my-store',
defaultType: 'listitem'
}
});
DataItem:
Ext.define('MyApp.view.ListItem', {
extend: 'Ext.dataview.component.DataItem',
alias: 'widget.listitem',
config: {
layout: ...
items: [{
xtype: 'component',
itemId: 'description',
html: '',
flex: 2
},
{
xtype: 'button',
text: 'a button',
itemId: ...,
flex: ...
},
{
... another button
}]
},
updateRecord: function(record) {
...
this.down('#description').setHtml(record.get('description'));
// record.get('description') does give me an undefined value
}
});
Assuming my stores and models are set up properly, what could the problem be?
Alternatively, maybe I should just use a standard list, but set the width to <100%, and just add 2 buttons to the right for each row. Though I'd rather get the current approach to work...
Edit:
Ended up using the dataMap approach.
My DataItem now looks like:
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
flex: 1
}
},
applyDescription: function(config) {
return Ext.factory(config, Ext.Component, this.getDescription());
},
updateDescription...
Basically like this.
I see the labels now, but am stuck on how to get a button in there. Since I don't want to link it to a store, I don't want to put it in the dataMap. I tried putting it in items, but to no avail.
Edit 2:
Well, getting the button to display was easier than I thought. It's just a repeat of what I did with the label, but without including it in the dataMap - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...
The last issue I need to resolve is, how to uniquely identify them. I want a listener on the button, but somehow pass in the record into the handler.
My solution for getting a button in a dataview without linking it to the store. It's actually, somewhat unsurprisingly, similar to this blog post.
view - ListItem.js
...
config: {
layout: {
type: 'hbox',
align: 'center'
},
dataMap: {
getDescription: {
setHtml: 'description'
}
},
description: {
cls: ...,
flex: 4
},
myButton: {
cls: ...,
text: 'Button!',
flex: 1
}
},
applyDescription, updateDescription (same as in the question),
applyMyButton: function(config) {
return Ext.factory(config, Ext.Button, this.getMyButton());
},
updateMyButton: function(newButton, oldButton) {
... same logic as the other update method
}
In my dataview:
...
config: {
itemId: ...,
store: ...,
useComponents: true,
defaultType: 'listitem',
width: '100%',
flex: 1,
listeners: {
itemtap: function(dataview, index, element, evt) {
var store = dataview.getStore();
var record = store.getAt(index);
...
}
}
}
...
I am using Kendo Bar Chart, which will show like grouped and stacked for dynamic data. In category field i need to display usernames and it has to show respective metric values, here metric values are dynamic and variable, and metric count values are displayed in bar, which is like stacked bar.
For Example:
Metric values are - High, Low, Medium, ...
Metric values count -> High-4, Low-2, and medium -5 ,..
Here counts 4,2, and 5 to be shown in a stacked bar.
Like this i have to show for multiple users with respective the values.
Below i have shown my Code, may i know how to use dynamic stacked bar kendo chart, and can i have solution for above mentioned problem.
Code- Chart Definition
$("#chartForWorkItems").kendoChart({
title: {
text: "Bugs State Analysis"
},
//defining the datasource for loading the chart
dataSource: {
transport: {
read: {
url: baseUri + "ProjectReportWorkItemChart/chartDisplayForWorkITems",
cache: false,
type: "POST",
dataType: "json",
complete: function (e) {
},
},
parameterMap: function (options, operation) {
console.log(selectedCategoryByMetrics);
if (operation == "read") {
return {
workItems: selectedCategoryByMetrics,
Projectid: sessionStorage.getItem("prjprojectid"),
metricsWithWorkItem: metricsWithWorkItem,
users: usersSelected
}
}
},
},
schema: {
model: {
id: "field",
fields: {
field: { type: "string" },
count_f: { type: "string" },
metric: { type: "string" },
assignedTo: { type: "string" },
}
}
}
},
chartArea: {
width: 400,
height: 300,
},
seriesDefaults: {
type: "column",
},
series: [{
field: "count_f",
},
],
categoryAxis: {
categories: "assignedTo",
field: "field",
majorGridLines: {
visible: true
}
},
valueAxis: [{ //display count in the value axis
line: {
visible: true
},
majorGridLines: {
visible: true
}
}],
tooltip: { //To display tool tip
visible: true
},
});