Jump to content
JChartFX Community
  • 0

Clickable Legend


Simon

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.

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...