Search code examples
chartsqmlinteractivesignal-handling

QML Chart interactive


I have a pie chart created dynamically, that uses function createPieChart() described below. When a slice is clicked, I want to call a function to print out the label and value of that slice.

I am facing 2 problems:

  1. Although I connect "clicked" or "pressed" or "released" signals, the slot is not reached. I am using qtcharts 2.0 (I cannot update right now).
  2. I am able to connect "hovered" signal, but without passing any parameter, so I don't know what slice I am into.

These are the other functions:

function createPieChart(data){
    pieserieschart.clear();
    slices.splice(0, slices.length) //clear slices array

    for (var prop in data) {
        slices.unshift(pieserieschart.append(prop, data[prop]));

        //I get "Cannot read property 'label' of undefined using this method
        slices[0].hovered.connect(function(){mouseHoverSlice(slices[0].label));

        //WORKS, but I want to pass the label of that slice (and the value if possible)
        slices[0].hovered.connect(mouseHoverSlice); 

        //it is not working at all
        slices[i].clicked.connect(sliceClicked);
    }


 function sliceClicked(){
     console.log("Slice Clicked"); //I cannot see this printed
 }

 function mouseHoverSlice(info){
     console.log("Slice hover: " + info);
 }

Any idea of how to do it? Thanks!


Solution

  • After upgrade to QtCharts 2.2 I was able to solve it like this: For pie & line & scatter plots, I used onClicked, which returns the slice/point. So you don't need to connect any signal when creating the slices or points dynamically.

    For bar charts, I was able to connect the barset created

    var barvalues = barserieschart.append("label",values)
    barvalues.clicked.connect(barClicked)
    
    ...
    
    ChartView {
            PieSeries {id: pieserieschart; onClicked: sliceClicked(slice) }
            BarSeries {id: barserieschart }
            ScatterSeries{id: scatterserieschart; onClicked: scatterclicked(point)}
    }