QT5 QML Charts: how to label only specific points - charts

By default, in QML Charts LineSeries all the points are labelled. I need to label only specific points, how to achieve this ?
Here is my qml file (part of big project).
I have set corresponding properties for LineSeries to show point labels, but I need only couple of labels displayed instead of complete set of points.
Is there a way in Qml to control this ?
import QtQuick 2.7
import QtCharts 2.2
import QtQuick.Layouts 1.3
import aa.ui.backend 1.0
Item {
property DSPBackend backend: analyzer.dsp
property alias titleV: chartV.title
property alias seriesV: lineSeriesV
property alias titleI: chartI.title
property alias seriesI: lineSeriesI
GridLayout {
id: gridSpectrum
anchors.fill: parent
columns: 2
rows: 1
columnSpacing: 0
flow: GridLayout.LeftToRight
ChartView {
id: chartV
Layout.fillWidth: true
Layout.fillHeight: true
/*title: "Spectrum (V-channel)"
titleFont.pixelSize: 10*/
theme: ChartView.ChartThemeBlueCerulean
antialiasing: false
legend.visible: false
legend.font.pointSize: 10
margins.top: 2
margins.left: 2
margins.right: 2
margins.bottom: 4
ValueAxis {
id: axisXV
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
ValueAxis {
id: axisYV
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
LineSeries {
id: lineSeriesV
axisX: axisXV
axisY: axisYV
color: "#66cc00"
name: "V-channel"
pointLabelsFormat: "(#xPoint Hz, #yPoint dB)"
pointLabelsVisible: true
width: 3
useOpenGL: false
}
}
ChartView {
id: chartI
/*title: "Spectrum (I-channel)"
titleFont.pixelSize: 10*/
antialiasing: true
theme: ChartView.ChartThemeBlueCerulean
legend.visible: false
legend.font.pointSize: 10
margins.top: 2
margins.left: 2
margins.right: 2
margins.bottom: 4
Layout.fillWidth: true
Layout.fillHeight: true
ValueAxis {
id: axisXI
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
ValueAxis {
id: axisYI
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
LineSeries {
id: lineSeriesI
axisX: axisXI
axisY: axisYI
color: "#0099ff"
name: "I-channel"
pointLabelsFormat: "(#xPoint Hz, #yPoint dB)"
pointLabelsVisible: true
width: 3
useOpenGL: false
}
}
}
Timer {
id: timerSpectrum
interval: 500
running: true
repeat: true
onTriggered: {
backend.update_spectrum(seriesV, seriesI);
}
}
Component.onCompleted: {
backend.setup_spectrum(axisXV, axisYV, axisXI, axisYI)
}
}

Related

ApexCharts: Hide every nth label in chart

I would like to hide some of the labels from my chart made with ApexCharts.js. I am coming from Frappé Charts, which has a feature called "continuity." It allows you to hide labels if they do not comfortably fit, because the chart is a timeseries chart.
My ApexChart looks like this:
I would like to remove many of the dates, but still have them appear in the tooltip. I was able to do this in Frappé Charts and it looked like this:
Here's my code for the Apex chart:
var options = {
chart: {
animations: { enabled: false },
toolbar: { show: false },
zoom: { enabled: false },
type: 'line',
height: 400,
fontFamily: 'PT Sans'
},
stroke: {
width: 2
},
theme: {
monochrome: {
enabled: true,
color: '#800000',
shadeTo: 'light',
shadeIntensity: 0.65
}
},
series: [{
name: 'New Daily Cases',
data: [2,0,0,0,0,0,0,1,0,1,0,7,1,1,1,8,0,11,2,9,8,21,17,28,24,20,38,39,36,21,10,49,45,44,52,74,31,29,43,28,39,58,30,47,50,31,28,79,39,54,55,33,42,39,41,52,25,30,37,26,30,35,42,64,46,25,35,45,56,45,64,34,34,32,40,65,56,64,55,37,61,51,70,81,76,64,71,61,56,52,106,108,104,33,57,82,71,67,68,63,71,32,70,65,98,52,72,87,66,85,90,47,164,123,180,119,85,66,122,65,155,191,129,144,175,224,234,240,128,99,141,131,215,228,198,152,126,201,92,137,286,139,236,238,153,170,106,61]
}],
labels: ['February 28','February 29','March 1','March 2','March 3','March 4','March 5','March 6','March 7','March 8','March 9','March 10','March 11','March 12','March 13','March 14','March 15','March 16','March 17','March 18','March 19','March 20','March 21','March 22','March 23','March 24','March 25','March 26','March 27','March 28','March 29','March 30','March 31','April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8','April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16','April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24','April 25','April 26','April 27','April 28','April 29','April 30','May 1','May 2','May 3','May 4','May 5','May 6','May 7','May 8','May 9','May 10','May 11','May 12','May 13','May 14','May 15','May 16','May 17','May 18','May 19','May 20','May 21','May 22','May 23','May 24','May 25','May 26','May 27','May 28','May 29','May 30','May 31','June 1','June 2','June 3','June 4','June 5','June 6','June 7','June 8','June 9','June 10','June 11','June 12','June 13','June 14','June 15','June 16','June 17','June 18','June 19','June 20','June 21','June 22','June 23','June 24','June 25','June 26','June 27','June 28','June 29','June 30','July 1','July 2','July 3','July 4','July 5','July 6','July 7','July 8','July 9','July 10','July 11','July 12','July 13','July 14','July 15','July 16','July 17','July 18','July 19','July 20','July 21','July 22','July 23','July 24'],
xaxis: {
tooltip: { enabled: false }
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
And here's my code for the Frappé Chart if it helps:
const data = {
labels: ['February 28','February 29','March 1','March 2','March 3','March 4','March 5','March 6','March 7','March 8','March 9','March 10','March 11','March 12','March 13','March 14','March 15','March 16','March 17','March 18','March 19','March 20','March 21','March 22','March 23','March 24','March 25','March 26','March 27','March 28','March 29','March 30','March 31','April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8','April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16','April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24','April 25','April 26','April 27','April 28','April 29','April 30','May 1','May 2','May 3','May 4','May 5','May 6','May 7','May 8','May 9','May 10','May 11','May 12','May 13','May 14','May 15','May 16','May 17','May 18','May 19','May 20','May 21','May 22','May 23','May 24','May 25','May 26','May 27','May 28','May 29','May 30','May 31','June 1','June 2','June 3','June 4','June 5','June 6','June 7','June 8','June 9','June 10','June 11','June 12','June 13','June 14','June 15','June 16','June 17','June 18','June 19','June 20','June 21','June 22','June 23','June 24','June 25','June 26','June 27','June 28','June 29','June 30','July 1','July 2','July 3','July 4','July 5','July 6','July 7','July 8','July 9','July 10','July 11','July 12','July 13','July 14','July 15','July 16','July 17','July 18','July 19','July 20','July 21','July 22','July 23','July 24'],
datasets: [{
name: 'Cumulative Cases',
values: [2,0,0,0,0,0,0,1,0,1,0,7,1,1,1,8,0,11,2,9,8,21,17,28,24,20,38,39,36,21,10,49,45,44,52,74,31,29,43,28,39,58,30,47,50,31,28,79,39,54,55,33,42,39,41,52,25,30,37,26,30,35,42,64,46,25,35,45,56,45,64,34,34,32,40,65,56,64,55,37,61,51,70,81,76,64,71,61,56,52,106,108,104,33,57,82,71,67,68,63,71,32,70,65,98,52,72,87,66,85,90,47,164,123,180,119,85,66,122,65,155,191,129,144,175,224,234,240,128,99,141,131,215,228,198,152,126,201,92,137,286,139,236,238,153,170,106,61],
chartType: 'line'
}]
}
const chart = new frappe.Chart('#chart', {
data: data,
type: 'line',
height: 250,
animate: false,
barOptions: {
spaceRatio: 0.25
},
colors: ['#800000'],
tooltipOptions: {
formatTooltipY: d => d.toLocaleString()
},
axisOptions: {
xAxisMode: 'tick',
xIsSeries: true
},
lineOptions: {
hideDots: true,
regionFill: true
}
})
<script src="https://cdn.jsdelivr.net/npm/frappe-charts#1.5.2/dist/frappe-charts.min.iife.min.js"></script>
<div id="chart"></div>
I've tried using the formatter callback function to return only every 10th value, but things get all out of position and the tooltips don't work. I get similar problems returning an empty string or a space for the values I wish to exclude (but still include in the tooltip).
What I do is calculate the ratio between the area's width and the number of ticks, and if that ratio is above a certain number, I add a classname to the chart or it's wrapper and there I write:
.apexcharts-xaxis-label{
display: none;
&:nth-child(5n){ display:revert; }
}
So every 5th label is shown and the rest are hidden.
You can also set up a resizeObserver to add/remove the special class.
This require the below config to be given to the chart:
xaxis: {
labels: {
rotate: 0, // no need to rotate since hiding labels gives plenty of room
hideOverlappingLabels: false // all labels must be rendered
}
}
You can try 2 things.
xaxis: {
type: 'datetime',
}
You can convert the x-axis to datetime and labels will align as shown below
Or
You can stop rotation of the x-axis labels using
xaxis: {
labels: {
rotate: 0
}
}
which produces the following result.
Vsync answer have not worked for me. It needed a little modification:
.apexcharts-xaxis-texts-g text[id^='SvgjsText'] {
display: none;
}
.apexcharts-xaxis-texts-g text[id^='SvgjsText']:nth-of-type(5n) {
display: revert;
}
labels: ['',this.props.itemNames], //"(labels: [the label , the label below])"

Caffe CNN Slice layer: 2nd Slice layer produces unknown bottom blob

Caffe CNN Slice layer: 2nd Slice layer produces unknown bottom blob
I have 2 Slice layers (see proto file). It seems the 1st one is working well; whereas the 2nd one's bottom gives "unknown bottom blob error" as following:
In fact I am not sure the error is related to Slice or Flatten!?
please note that the the 2nd Slice does not even printed in the log!!!
this is the Proto file:
layer {
name: "data"
type: "HDF5Data"
top: "data"
top: "label_b4_noise"
include {
phase: TEST
}
hdf5_data_param {
source: "data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_val_list.txt"
batch_size: 25
shuffle: true
}
}
layer {
name: "data"
type: "HDF5Data"
top: "data"
top: "label_b4_noise"
include {
phase: TRAIN
}
hdf5_data_param {
source: "data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_train_list.txt"
batch_size: 25
shuffle: true
}
}
layer {
name: "slic0"
type: "Slice"
bottom: "data"
top: "data1"
top: "data2"
slice_param {
axis: 1
slice_point: 1
}
}
layer {
name: "conv_u0d-score_New"
type: "Convolution"
bottom: "data1"
top: "conv_last"
param {
lr_mult: 1
decay_mult: 1
}
param {
lr_mult: 2
decay_mult: 0
}
convolution_param {
num_output: 1
pad: 0
kernel_size: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "flat"
type: "Flatten"
bottom: "conv_last"
top: "ampl"
}
layer {
name: "slic1"
type: "Slice"
bottom: "label_b4_noise"
top: "label_b4_noise1"
top: "label_b4_noise2"
slice_param {
axis: 1
slice_point: 1
}
}
layer {
name: "flatdata"
type: "Flatten"
bottom: "label_b4_noise1"
top: "flatdata"
}
layer {
name: "loss"
type: "EuclideanLoss"
bottom: "ampl"
bottom: "flatdata"
top: "loss"
softmax_param {engine: CAFFE}
}
this is the log file:
GL ----------------------------------------------------------------
res/4removal_nAmp3nData2_2e5/unet_bs10/unet data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s .
res/4removal_nAmp3nData2_2e5/unet_bs10/unet data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s .
WARNING: Logging before InitGoogleLogging() is written to STDERR
I1018 11:40:22.930601 104201 upgrade_proto.cpp:67] Attempting to upgrade input file specified using deprecated input fields: res/4removal_nAmp3nData2_2e5/unet_bs10/unet_tmp/unet_deploy.txt
I1018 11:40:22.930654 104201 upgrade_proto.cpp:70] Successfully upgraded file specified using deprecated input fields.
W1018 11:40:22.930658 104201 upgrade_proto.cpp:72] Note that future Caffe releases will only support input layers and not input fields.
I1018 11:40:23.237383 104201 net.cpp:51] Initializing net from parameters:
name: "unet"
state {
phase: TEST
level: 0
}
layer {
name: "input"
type: "Input"
top: "data"
input_param {
shape {
dim: 1
dim: 2
dim: 1
dim: 2048
}
}
}
layer {
name: "slic0"
type: "Slice"
bottom: "data"
top: "data1"
top: "data2"
slice_param {
slice_point: 1
axis: 1
}
}
layer {
name: "conv_u0d-score_New"
type: "Convolution"
bottom: "data1"
top: "conv_last"
param {
lr_mult: 1
decay_mult: 1
}
param {
lr_mult: 2
decay_mult: 0
}
convolution_param {
num_output: 1
pad: 0
kernel_size: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "flat"
type: "Flatten"
bottom: "conv_last"
top: "ampl"
}
layer {
name: "flatdata"
type: "Flatten"
bottom: "label_b4_noise1"
top: "flatdata"
}
F1018 11:40:23.237546 104201 insert_splits.cpp:29] Unknown bottom blob 'label_b4_noise1' (layer 'flatdata', bottom index 0)
*** Check failure stack trace: ***
/pbs/home/n/nhatami/sps/spectro/trainAndTest_4removal: line 101: 104201 Aborted $pydir/dumpLayersSize.py ${tmp_root}_deploy.txt ${oroot}
/pbs/home/n/nhatami/sps/spectro/trainAndTest_4removal: line 101: 104201 Aborted $pydir/dumpLayersSize.py ${tmp_root}_deploy.txt ${oroot}
Thu Oct 18 11:40:23 CEST 2018
/usr/bin/time -v caffe -gpu 0 --log_dir=res/4removal_nAmp3nData2_2e5/unet_bs10/unet_tmp train -solver res/4removal_nAmp3nData2_2e5/unet_bs10/unet_tmp/unet_solver.txt
Thu Oct 18 11:41:26 CEST 2018
/pbs/home/n/nhatami/sps/spectro/trainAndTest_4removal: line 206: gnuplot: command not found
/pbs/home/n/nhatami/sps/spectro/trainAndTest_4removal: line 225: gnuplot: command not found
/usr/bin/time -v -o res/4removal_nAmp3nData2_2e5/unet_bs10/unet_time_test.txt python /pbs/home/n/nhatami/sps/spectro/python/test_4removal.py -eg hist -l label -mf=data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_met.txt res/4removal_nAmp3nData2_2e5/unet_bs10/unet_deploy.txt res/4removal_nAmp3nData2_2e5/unet_bs10/unet.caffemodel data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_test.h5 res/4removal_nAmp3nData2_2e5/unet_bs10/restest/unet_test
WARNING: Logging before InitGoogleLogging() is written to STDERR
W1018 11:41:42.595289 105177 _caffe.cpp:139] DEPRECATION WARNING - deprecated use of Python interface
W1018 11:41:42.595335 105177 _caffe.cpp:140] Use this instead (with the named "weights" parameter):
W1018 11:41:42.595338 105177 _caffe.cpp:142] Net('res/4removal_nAmp3nData2_2e5/unet_bs10/unet_deploy.txt', 1, weights='res/4removal_nAmp3nData2_2e5/unet_bs10/unet.caffemodel')
I1018 11:41:42.597472 105177 upgrade_proto.cpp:67] Attempting to upgrade input file specified using deprecated input fields: res/4removal_nAmp3nData2_2e5/unet_bs10/unet_deploy.txt
I1018 11:41:42.597497 105177 upgrade_proto.cpp:70] Successfully upgraded file specified using deprecated input fields.
W1018 11:41:42.597501 105177 upgrade_proto.cpp:72] Note that future Caffe releases will only support input layers and not input fields.
I1018 11:41:42.597535 105177 net.cpp:51] Initializing net from parameters:
name: "unet"
state {
phase: TEST
level: 0
}
layer {
name: "input"
type: "Input"
top: "data"
input_param {
shape {
dim: 1
dim: 2
dim: 1
dim: 2048
}
}
}
layer {
name: "slic0"
type: "Slice"
bottom: "data"
top: "data1"
top: "data2"
slice_param {
slice_point: 1
axis: 1
}
}
layer {
name: "conv_u0d-score_New"
type: "Convolution"
bottom: "data1"
top: "conv_last"
param {
lr_mult: 1
decay_mult: 1
}
param {
lr_mult: 2
decay_mult: 0
}
convolution_param {
num_output: 1
pad: 0
kernel_size: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "flat"
type: "Flatten"
bottom: "conv_last"
top: "ampl"
}
layer {
name: "flatdata"
type: "Flatten"
bottom: "label_b4_noise1"
top: "flatdata"
}
F1018 11:41:42.597617 105177 insert_splits.cpp:29] Unknown bottom blob 'label_b4_noise1' (layer 'flatdata', bottom index 0)
*** Check failure stack trace: ***
('res/4removal_nAmp3nData2_2e5/unet_bs10/unet_deploy.txt', 'res/4removal_nAmp3nData2_2e5/unet_bs10/unet.caffemodel', 'data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_test.h5', 'data/4removal_nAmp3nData2_2e5/2048_2e5_0.01_s_met.txt')
here is h5disp:
Dataset 'label_b4_noise'
Size: 2048x1x2x10000
MaxSize: 2048x1x2xInf
Datatype: H5T_IEEE_F32LE (single)
ChunkSize: 2048x1x2x100
Filters: none
FillValue: 0.000000
Dataset 'data'
Size: 2048x1x2x10000
MaxSize: 2048x1x2xInf
Datatype: H5T_IEEE_F32LE (single)
ChunkSize: 2048x1x2x100
Filters: none
FillValue: 0.000000

Google Charts display options

My questions (short style)
Can you customize a y-axis labeling interval ?
Can you display the extreme values of a series as an horizontal line ?
The detailed explanations
I have a combo chart made with Google Charts : the first set of data uses an area style, and the second a line style. The second one is the one that matters here :
it represents a percentage
i don't want it from 0 to 1 (or 0 to 100 in percentage), but from its min to its max (or something near)
and i want to display those min and max values
If i modify the scale so :
PHP
$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);
JS
var options = {
...
vAxes: {
...
1: {
format:"##%",
viewWindow: {
min: <?php echo ($min_taux_rejet / 100); ?>,
max: <?php echo ($max_taux_rejet / 100); ?>,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
}
The vertical axis is limited to the nearest multiple of 5 for min and max values, but :
the interval shown on the axis is from 10 to 10, which is too big. Since i have a real max of 31.5 and a real min of 17.1, axis min is 15 is 15 and axis max is 35, but the only graduation labeled are 20 and 30.
i can't see the real min and max on the graph
you can use config option ticks, which is an array of values to be used for the labels...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[0, 18, 0.171],
[1, 28, 0.315],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var axisMin = 0.15;
var axisMax = 0.35;
var ticks = [];
for (var i = axisMin; i <= axisMax; i = i + 0.05) {
ticks.push(i);
}
var options = {
vAxes: {
1: {
format: '##%',
ticks: ticks,
viewWindow: {
min: axisMin,
max: axisMax,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
};
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

QT5 QML Charts: how to label only subset of points

By default, in QML Charts LineSeries all the points are labelled. I need to label only specific points, how to achieve this ?
Here is my qml file (part of big project). I have set corresponding properties for LineSeries to show point labels, but I need only couple of labels displayed instead of complete set of points. Is there a way in Qml to control this ?
import QtQuick 2.7
import QtCharts 2.2
import QtQuick.Layouts 1.3
import aa.ui.backend 1.0
Item {
property DSPBackend backend: analyzer.dsp
property alias titleV: chartV.title
property alias seriesV: lineSeriesV
property alias titleI: chartI.title
property alias seriesI: lineSeriesI
GridLayout {
id: gridSpectrum
anchors.fill: parent
columns: 2
rows: 1
columnSpacing: 0
flow: GridLayout.LeftToRight
ChartView {
id: chartV
Layout.fillWidth: true
Layout.fillHeight: true
/*title: "Spectrum (V-channel)"
titleFont.pixelSize: 10*/
theme: ChartView.ChartThemeBlueCerulean
antialiasing: false
legend.visible: false
legend.font.pointSize: 10
margins.top: 2
margins.left: 2
margins.right: 2
margins.bottom: 4
ValueAxis {
id: axisXV
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
ValueAxis {
id: axisYV
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
LineSeries {
id: lineSeriesV
axisX: axisXV
axisY: axisYV
color: "#66cc00"
name: "V-channel"
pointLabelsFormat: "(#xPoint Hz, #yPoint dB)"
pointLabelsVisible: true
width: 3
useOpenGL: false
}
}
ChartView {
id: chartI
/*title: "Spectrum (I-channel)"
titleFont.pixelSize: 10*/
antialiasing: true
theme: ChartView.ChartThemeBlueCerulean
legend.visible: false
legend.font.pointSize: 10
margins.top: 2
margins.left: 2
margins.right: 2
margins.bottom: 4
Layout.fillWidth: true
Layout.fillHeight: true
ValueAxis {
id: axisXI
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
ValueAxis {
id: axisYI
titleFont.pointSize: 7
labelsFont.pointSize: 7
}
LineSeries {
id: lineSeriesI
axisX: axisXI
axisY: axisYI
color: "#0099ff"
name: "I-channel"
pointLabelsFormat: "(#xPoint Hz, #yPoint dB)"
pointLabelsVisible: true
width: 3
useOpenGL: false
}
}
}
Timer {
id: timerSpectrum
interval: 500
running: true
repeat: true
onTriggered: {
backend.update_spectrum(seriesV, seriesI);
}
}
Component.onCompleted: {
backend.setup_spectrum(axisXV, axisYV, axisXI, axisYI)
}
}
You can set a bool property or a function that returns a bool. Then evaluate it in the pointLabelsFormat property.
pointLabelsFormat: myBool? "(#xPoint Hz, #yPoint dB)" : ""
If the boolean is false it sets the point's label to an empty string.

Highlighting Bars in a chart when clicking on the related data in a grid with ExtJS 4

I have two objects on my screen, a grid and a chart being populated by the same store.
What I need to do is highlight the Column on the chart related to the item I clicked in the grid.
In the function I've figured half way to do it using
Ext.getCmp('chart').series.get(0).
But don't know what to do to get to each item of the series and highlight it, as the getItemForPoint(x,y) keeps returning null values...
Thanks a lot, code below:
// Code for my grid
{
columnWidth: .25
,xtype: 'grid'
,hideHeaders: true
,border: true
,styke: 'padding-top: 60px;'
,height: 360
,store: participation
,columns: [{
dataIndex: 'ID'
,width: 24
},{
dataIndex: 'Supplier'
,width: 204
}]
,listeners: {
select: function() {
// function to highlight the column on my chart
}
}
}
// Code for my chart
{
border: false
,layout: 'column'
,items: [{
columnWidth: .75
,xtype: 'chart'
,animate: true
,height: 432
,shadow: false
,id: 'chart'
,store: participation
,axes: [{
type: 'Numeric'
,position: 'left'
,grid: true
,fields: 'Participation'
,title: 'Share'
,label: {
renderer: Ext.util.Format.numberRenderer('0.00'+"%")
}
},{
type: 'Category'
,position: 'bottom'
,fields: 'ID'
}]
,series: [{
type: 'column'
,axis: 'left'
,highlight: 'true'
,xField: 'ID'
,yField: 'Participation'
,tips: {
trackMouse: true
,width: 312
,maxWidth: 360
,height: 36
,constrainPosition: true
,renderer: function(storeItem, item) {
this.setTitle('Supplier: ' + storeItem.get('Supplier')+'<br/>'+'Share: ' + Ext.util.Format.number(storeItem.get('Share'),"0.00")+'%');
}
}
,style: {
lineWidth: 1
,stroke: '#666'
}
}]
}
}
Have a look at the Dynamic Form, Grid and Charts in ExtJS examples. The example demos exactly what you are trying to achieve. Refer to the listeners attached to the chart and gridPanel (selectionchange event etc).