Jump to content
JChartFX Community
  • 0
Sign in to follow this  
Simon

Clickable Legend

Question

graph.thumb.jpg.fbbb1d14b002e170c4b284d3f3843bd9.jpg

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.

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×