Clickable Legend

[Simon]

How would I make the Secured Sales in the Legend to the right clickable to take me to another url.

 

CODE:

chart1 = new cfx.Chart();
        chart1.setGallery(cfx.Gallery.Bar);
              
 chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal);
         var series0 = chart1.getSeries().getItem(0);
        series0.setGallery(cfx.Gallery.Area);
       // series0.setAxisY(chart1.getAxisY2());
        // series1.getPointLabels().setVisible(true);

         var series1 = chart1.getSeries().getItem(1);
         //series1.setAxisY(chart1.getAxisY2());
         series1.setGallery(cfx.Gallery.Bar);
         //series1.getPointLabels().setVisible(true);

         var series2 = chart1.getSeries().getItem(2);
         //series2.setAxisY(chart1.getAxisY2());
         series2.setGallery(cfx.Gallery.Bar);
         //series2.getPointLabels().setVisible(true);
         //chart1.getSeries().getItem(1).setStackedStyle(cfx.Stacked.Normal);
         //chart1.getSeries().getItem(2).setStackedStyle(cfx.Stacked.Normal);

         cfx.AxisFormat.Currency
         //chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);
chart1.getAnimations().getLoad().setEnabled(true);
         
         chart1.getAxisY().getLabelsFormat().setDecimals(2);
         chart1.getAxisY2().getGrids().getMajor().setVisible(false);

        var titles = chart1.getTitles();
        var title = new cfx.TitleDockable();
        var divHolder = document.getElementById('ChartDiv');
        chart1.create(divHolder);
        title.setText("Secured sales this year.");
        titles.add(title);
        var items = [
            
            {
                "Month": "Nov <%=novOctYear%>",
                "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 11)%>,
                "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 11)%>,
                
                
                
                
                }, 

                {"Month": "Dec <%=novOctYear%>",
                    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 2 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 12)%>,
                    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 12)%>,
                    
                
                }, 

{
    "Month": "Jan <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 3 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 1)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 1)%>,
    
                
                }, 

{
    "Month": "Feb <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 4 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 2)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 2)%>,
   
                
                }, 

{
    "Month": "Mar <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 5 %>,
    "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 3)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 3)%>,
    
                
                }, 

{
    "Month": "Apr <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 6 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 4)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 4)%>,
   
                
                }, 

{
    "Month": "May <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 7 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 5)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 5)%>,
   
                
                }, 
{
    "Month": "Jun <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 8 %>,
 "Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 6)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 6)%>,
    
                
               }, 

{
    "Month": "Jul <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 9 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 7)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 7)%>,
    
                              
                }, 
{
    "Month": "Aug <%=restYear%>", 
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 10 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 8)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 8)%>,
    
                               
                }, 

{
    "Month": "Sep <%=restYear%>",
    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 11 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 9)%>,
    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 9)%>,
    
               
                }, 

                {
                    "Month": "Oct <%=restYear%>", 
                    "Target(£<%=Format(salesTarget, "##,##0.00")%>)" : <%=(salesTarget / 12) * 12 %>,
"Secured Sales(£<%=Format(salesTotal, "##,##0.00")%>)": <%=finalSalesArray(0, 10)%>,
                    "Projected Sales(£<%=Format(totalProjection, "##,##0.00")%>)": <%=finalSalesArray(1, 10)%>,

                            
                }, 

                
        
           ];

        chart1.setDataSource(items);

 

Many Thanks.

[JuanC]

I would suggest you change your code so that chart.create is the last thing you do. The way you are doing it now, when you call chart.create we "render" the current plot (random data) and then your subsequent api calls will mark the chart as dirty so it will be repainted. This may cause some flickering on slow devices.

To capture clicks, you need to use attach to the click event, note that the code is slightly different whether you are using jQuery or not.

var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
if (window["jQuery"]) {
        $("#ChartDiv").click(doClick);
} else {
        divHolder.onclick = doClick;
}

function doClick(evt)
{
    console.log("Click on " + evt.series + " , " + evt.point);
}
 

Note that attaching to click event is one of the few things that HAS to be done after chart create is called.

Also note that a click in the legend marker will generate evt.point="-1" and evt.series will hold the series index where a click on a bar/marker would set evt.point with the point index. I noticed that for now you cannot click on the legend text. We should be fixing this in a future build.

Regards,

JuanC