Welcome Guest Search | Active Topics |

data point labels creating event issue
Options
Previous Topic Next Topic
evangels
#1 Posted : Thursday, November 5, 2015 9:18:24 PM(UTC)
Rank: Member

Groups: ExpiredLicense, Registered
Joined: 7/30/2013(UTC)
Posts: 15

Thanks: 6 times
Was thanked: 0 time(s) in 0 post(s)
hi team,

I met a problem when using the data point label creating event, when I use Chrome, I need to interact on the chart with mouse wheel(actually to trigger the zoom in & zoom out action), then the event will trigger(in my case, all the labels will hide, except the last one ), or it will not, would you pls. help? thanks?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
    dataPointLabelCreating Event Example - HTML5 jQuery Chart Plugin by jqChart
</title>
    <link rel="stylesheet" type="text/css" href="../../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../../themes/smoothness/jquery-ui-1.10.4.css" />
    <script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../../js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="../../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../../js/excanvas.js"></script><![endif]-->
   
    <script lang="javascript" type="text/javascript">

        $(document).ready(function () {

            var background = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [
                    { offset: 0, color: '#d2e6c9' },
                    { offset: 1, color: 'white' }
                ]
            };

            var fillStyle = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 1,
                y1: 0,
                colorStops: [
                    { offset: 0, color: '#65c2e8' },
                    { offset: 0.49, color: '#55b3e1' },
                    { offset: 0.5, color: '#3ba6dc' },
                    { offset: 1, color: '#2794d4' }
                ]
            };
            
            $('#jqChart').bind('dataPointLabelCreating', function (event, data) {
                if(parseInt(data.context.series.data.length-1)!=parseInt(data.context.index)){
                    data.visible=false;
                }else{
                    data.visible=true;
                }
            });   
            
            $('#jqChart').jqChart({
                title: 'dataPointLabelCreating Event',
                border: { strokeStyle: '#6ba851' },
                background: background,
                animation: { duration: 1 },
                series: [
                    {
                        type: 'column',
                        title: 'Column',
                        data: [['A', 4600], ['B', 3500], ['C', 6800], ['D', 4000],
                               ['E', 2700], ['F', 8500], ['D', 4300], ['H', 2900]],
                        labels: {
                            fillStyle: 'red',
                            font: '11px sans-serif'
                        }
                    }
                ]
            });
        });
    </script>

</head>
<body>
    <div>
        <div id="jqChart" style="width: 500px; height: 300px;">
        </div>
    </div>
</body>
</html>
Back to top
Dragan
#2 Posted : Monday, November 9, 2015 8:28:34 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
You can use this function:

Code:
$('#jqChart').bind('dataPointLabelCreating', function (event, data) {
                if (data.context.series.data.length - 1 ==  data.context.index) {
                    data.text = '';
                }
            });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.089 seconds.