CODEWITHSUNDEEP
javascriptzoomcharts
dinologic
dinologic

Reputation: 64

Add custom parameter to info.contentsFunction

I need to be able to add some custom info to the pie.info.contentsFunction in Zoomcharts. I have multiple charts on the page, each one created like so...

       var pc = new PieChart({
            pie: {
                innerRadius: 0.5,
            },
            container: chartContainer1,
            area: { height: 500 },
            data:chartData,
            toolbar: {
                "fullscreen": true,
                "enabled": true
            },
            info: {
                contentsFunction: boomChartTT
            }
        });

In the "boomChartTT" function I need to know what chart is being hovered upon. I'd like to be able to do something like this...

info: {
 contentsFunction: boomChartTT(i)
}

...where 'i' is the index of the chart.

The reason I need to know the chart index is because I have some other data saved in an indexed array for each chart. The index of the chart matches the index of the data.

EXAMPLE: if user hovers on a slice in chart2 I'd want to pass '2' to the boomChartTT function so I can access the totals data for that chart (say, totalsData[2]).

I've done this in the past with other chart libraries by simply adding a data attribute to the chart container to give me the index like so...

<div id="chartContainer1" data-index="1"></div>

...and then I'm able to access the chartContainer from the hover function (contentsFunction) and then get that index.

I don't want to add the totals data to the actual chart data because I'd have to add it to each slice which is redundant.

Is there a way to do this?

Please let me know if my post is unclear.

EDITED TO ADD: I don't think it matters but here is the boomChartTT function:

function boomChartTT(data,slice){
    var tt="<div class=\"charttooltip\">";
    if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
    //var thisData=dataSearch(totalsData[i],"REFERRINGSITE",data.id);
    tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
    return tt;
}

The commented line is where I would need the index (i) to to get the correct totalsData.

Upvotes: 0

Views: 29

Answers (1)

dinologic
dinologic

Reputation: 64

SOLVED. I simply added "chartIndex" to the data like so...

        for(var i=0;i<r.length;i++){
            var thisDataObj ={
                id:r[i].REFERRINGSITE,
                value:r[i].PCTOFSALES,
                name:r[i].REFERRINGSITE,
                chartIndex: arguments[1],//<----- arguments[1] is the chart index
                style: { expandable: false, fillColor: dataSearch(dataRSList,"REFERRINGSITE",r[i].REFERRINGSITE)[0].COLOR }
            };
            chartData.preloaded.subvalues.push(thisDataObj);
        }

Then in the boomChartTT function...

function boomChartTT(data,slice){
    var tt="<div class=\"charttooltip\">";
    if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
    var thisData=dataSearch(totalsData[data.chartIndex-1],"REFERRINGSITE",data.id);
    tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
    return tt;
}

I feared that adding custom fields to the chart data would break the chart (which I believe I've experienced with other libraries). So, there you go.

Upvotes: 0

Related Questions