jQuery UI Widgets Forums Chart Tooltip problem

Tagged: ,

This topic contains 7 replies, has 3 voices, and was last updated by  dharil_secure 5 years, 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Tooltip problem #98543

    Kapil
    Participant

    I am creating a line chart in my application. For some points it shows the tooltip and some points it do not show any tooltip and also do not show any js error.

    Tooltip problem #98549

    Stanislav
    Participant

    Hello kapiljain,

    Can you please send us an example?
    I did not find anything unusual in my scenario.

    Best Regards,
    Stanislav

    jQWidgets Team
    http://www.jqwidgets.com/

    Tooltip problem #99085

    Kapil
    Participant
    • This reply was modified 6 years, 2 months ago by  Kapil.
    • This reply was modified 6 years, 2 months ago by  Kapil.
    Tooltip problem #99088

    Kapil
    Participant

    Hello Stanislav “Line Current L3” series not showing tooltip

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Line Series Example</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxchart.rangeselector.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                
    
            var source1 = [{"V1":229.97,"X":"2018-03-05T07:22:46.058Z"},{"V1":229.9675,"X":"2018-03-05T07:22:46.068Z"},{"V1":229.9653,"X":"2018-03-05T07:22:46.078Z"},{"V1":229.9657,"X":"2018-03-05T07:22:46.088Z"},{"V1":229.9639,"X":"2018-03-05T07:22:46.098Z"},{"V1":229.9637,"X":"2018-03-05T07:22:46.108Z"},{"V1":229.9685,"X":"2018-03-05T07:22:46.118Z"},{"V1":229.9658,"X":"2018-03-05T07:22:46.128Z"},{"V1":229.9862,"X":"2018-03-05T07:22:46.138Z"},{"V1":166.3444,"X":"2018-03-05T07:22:46.148Z"},{"V1":50.04129,"X":"2018-03-05T07:22:46.158Z"},{"V1":50.12015,"X":"2018-03-05T07:22:46.168Z"},{"V1":50.00746,"X":"2018-03-05T07:22:46.178Z"},{"V1":50.0078,"X":"2018-03-05T07:22:46.188Z"},{"V1":50.00967,"X":"2018-03-05T07:22:46.198Z"},{"V1":50.00696,"X":"2018-03-05T07:22:46.208Z"},{"V1":50.01048,"X":"2018-03-05T07:22:46.218Z"},{"V1":50.00652,"X":"2018-03-05T07:22:46.228Z"},{"V1":50.00461,"X":"2018-03-05T07:22:46.238Z"},{"V1":50.00206,"X":"2018-03-05T07:22:46.248Z"},{"V3":229.7014,"X":"2018-03-05T07:22:46.041Z"},{"V3":229.6997,"X":"2018-03-05T07:22:46.051Z"},{"V3":229.6994,"X":"2018-03-05T07:22:46.061Z"},{"V3":229.7029,"X":"2018-03-05T07:22:46.071Z"},{"V3":229.6991,"X":"2018-03-05T07:22:46.081Z"},{"V3":229.6997,"X":"2018-03-05T07:22:46.091Z"},{"V3":229.7048,"X":"2018-03-05T07:22:46.101Z"},{"V3":229.7065,"X":"2018-03-05T07:22:46.111Z"},{"V3":229.7002,"X":"2018-03-05T07:22:46.121Z"},{"V3":229.6937,"X":"2018-03-05T07:22:46.131Z"},{"V3":229.7029,"X":"2018-03-05T07:22:46.141Z"},{"V3":229.7019,"X":"2018-03-05T07:22:46.151Z"},{"V3":229.6939,"X":"2018-03-05T07:22:46.161Z"},{"V3":229.7001,"X":"2018-03-05T07:22:46.171Z"},{"V3":229.6987,"X":"2018-03-05T07:22:46.181Z"},{"V3":229.6956,"X":"2018-03-05T07:22:46.191Z"},{"V3":229.7024,"X":"2018-03-05T07:22:46.201Z"},{"V3":229.7043,"X":"2018-03-05T07:22:46.211Z"},{"V3":229.7044,"X":"2018-03-05T07:22:46.221Z"},{"V3":229.7057,"X":"2018-03-05T07:22:46.231Z"},{"L2":1.000453,"X":"2018-03-05T07:22:46.045Z"},{"L2":1.000319,"X":"2018-03-05T07:22:46.055Z"},{"L2":1.000438,"X":"2018-03-05T07:22:46.065Z"},{"L2":1.000624,"X":"2018-03-05T07:22:46.075Z"},{"L2":1.000719,"X":"2018-03-05T07:22:46.085Z"},{"L2":1.000695,"X":"2018-03-05T07:22:46.095Z"},{"L2":1.000643,"X":"2018-03-05T07:22:46.105Z"},{"L2":1.000544,"X":"2018-03-05T07:22:46.115Z"},{"L2":1.000584,"X":"2018-03-05T07:22:46.125Z"},{"L2":1.000695,"X":"2018-03-05T07:22:46.135Z"},{"L2":1.000545,"X":"2018-03-05T07:22:46.145Z"},{"L2":1.000445,"X":"2018-03-05T07:22:46.155Z"},{"L2":1.000365,"X":"2018-03-05T07:22:46.165Z"},{"L2":1.00038,"X":"2018-03-05T07:22:46.175Z"},{"L2":1.00051,"X":"2018-03-05T07:22:46.185Z"},{"L2":1.000534,"X":"2018-03-05T07:22:46.195Z"},{"L2":1.00056,"X":"2018-03-05T07:22:46.205Z"},{"L2":1.000662,"X":"2018-03-05T07:22:46.215Z"},{"L2":1.000527,"X":"2018-03-05T07:22:46.225Z"},{"L2":1.000402,"X":"2018-03-05T07:22:46.235Z"},{"L3":1.002557,"X":"2018-03-05T07:22:46.041Z"},{"L3":1.002617,"X":"2018-03-05T07:22:46.051Z"},{"L3":1.00265,"X":"2018-03-05T07:22:46.061Z"},{"L3":1.0028,"X":"2018-03-05T07:22:46.071Z"},{"L3":1.002735,"X":"2018-03-05T07:22:46.081Z"},{"L3":1.002575,"X":"2018-03-05T07:22:46.091Z"},{"L3":1.002569,"X":"2018-03-05T07:22:46.101Z"},{"L3":1.002582,"X":"2018-03-05T07:22:46.111Z"},{"L3":1.00264,"X":"2018-03-05T07:22:46.121Z"},{"L3":1.002652,"X":"2018-03-05T07:22:46.131Z"},{"L3":1.002645,"X":"2018-03-05T07:22:46.141Z"},{"L3":1.002483,"X":"2018-03-05T07:22:46.151Z"},{"L3":1.002411,"X":"2018-03-05T07:22:46.161Z"},{"L3":1.002521,"X":"2018-03-05T07:22:46.171Z"},{"L3":1.002593,"X":"2018-03-05T07:22:46.181Z"},{"L3":1.002562,"X":"2018-03-05T07:22:46.191Z"},{"L3":1.002574,"X":"2018-03-05T07:22:46.201Z"},{"L3":1.002658,"X":"2018-03-05T07:22:46.211Z"},{"L3":1.002605,"X":"2018-03-05T07:22:46.221Z"},{"L3":1.002649,"X":"2018-03-05T07:22:46.231Z"},{"X":"2018-03-05T07:22:46.148Z","depth":100}];
                var   rangeSelector= {
                    size: 60,
                    padding: { left: 85, right: 85,top: 10, bottom: 0 },
                    backgroundColor: 'white',
                    border: false,
                    dataField: '',
                    gridLines: { visible: false },
                    serieType: 'line'
                };
    			var settings = {
                    showBorderLine: false,
                    enableCrosshairs: true,
                    title: '',
                    padding: { left: 5, top: 10, right: 5, bottom: 0 },
                    description: "",
                    //showLegend: false,
                    legendLayout: { left: 10, top: 0, width: 300, height: 50, flow: 'horizontal' },
                    enableAnimations: false,
                    colorScheme: 'myScheme0',
                    categoryAxis: {
                        dataField: 'X',
                        type: "linear",
                        baseUnit :'millisecond',
                        showGridLines: false,
                        gridLinesColor: '#ECECEC'
                        ,rangeSelector:rangeSelector
                    }
                };
    			createChartSettings(settings,0);
                // prepare jqxChart settings
                function createChartSettings(settings,id)
            {
                var VoltageParameters,CurrentParameters,DepthParameters;
               
    			
    			VoltageParameters =[{"Id":51,"ColumnName":"V1","Title":"Phase Voltage L1","Color":"#00DB0A","Unit":"(V)","Ratio":1,"$$hashKey":"011"},{"Id":53,"ColumnName":"V3","Title":"Phase Voltage L3","Color":"#1A6FBF","Unit":"(V)","Ratio":1,"$$hashKey":"012"}];
    			CurrentParameters=[{"Id":55,"ColumnName":"L2","Title":"Line Current L2","Color":"#CCC42C","Unit":"(A)","Ratio":1,"$$hashKey":"015"},{"Id":56,"ColumnName":"L3","Title":"Line Current L3","Color":"#1FD100","Unit":"(A)","Ratio":1,"$$hashKey":"016"}];
    			DepthParameters = [{"Color":"#4A8CA8","ColumnName":"depth","Id":0,"Ratio":1,"Title":"","Unit":""}];
                
                var VoltageSeries = [];
                var CurrentSeries = [];
                var DepthSeries = [];
                for (i=0;i<VoltageParameters.length;i++)
                {
                    VoltageSeries.push({ dataField:VoltageParameters[i].ColumnName , displayText: VoltageParameters[i].Title,  lineWidth: 1 ,emptyPointsDisplay :'connect',symbolType: 'circle'});
                }
                for (i=0;i<CurrentParameters.length;i++)
                {
                    CurrentSeries.push({ dataField:CurrentParameters[i].ColumnName , displayText: CurrentParameters[i].Title,  lineWidth: 1 ,emptyPointsDisplay :'connect',symbolType: 'circle'});
                }
                for (i=0;i<DepthParameters.length;i++)
                {
                    DepthSeries.push({ dataField:DepthParameters[i].ColumnName , displayText: DepthParameters[i].Title,  lineWidth: 1 ,emptyPointsDisplay :'connect'});
                }
                var colorScheme=[];
                for (i=0;i<VoltageParameters.length;i++)
                {
                    colorScheme.push(VoltageParameters[i].Color);
                }
                for (i=0;i<CurrentParameters.length;i++)
                {
                    colorScheme.push(CurrentParameters[i].Color);
                }
                for (i=0;i<DepthParameters.length;i++)
                {
                    colorScheme.push(DepthParameters[i].Color);
                }
                var seriesGroups=[];
                if (VoltageSeries.length>0)
                {
                    settings.padding.left =5;
                    seriesGroups.push({
                        type: 'line',
                        symbolType: 'circle',
                        valueAxis: {
                            axisSize :80,
                            title :{text:'Voltage'},
                            gridLinesColor: '#ECECEC',
                            //formatFunction:function (value){return Round(value,true);}
                        },
                        series: VoltageSeries,
                        toolTipFormatFunction:rmsToolTipFormatFunction
                    });
                }
                else
                {
                    settings.padding.left =85;
                }
                if (CurrentSeries.length>0)
                {
                    settings.padding.right =5;
                    seriesGroups.push({
                        type: 'line',
                        symbolType: 'circle',
                        valueAxis: {
                            axisSize :80,
                            position :'right',
                            title :{text:'Current'},
                            gridLinesColor: '#ECECEC',
                            //formatFunction:function (value){return Round(value,true);}
                        },
                        series:CurrentSeries,
                        toolTipFormatFunction:rmsToolTipFormatFunction
                    });
                }
                else
                {
                    settings.padding.right =85;
                }
    
                //////// depth //////
                if (DepthSeries.length>0)
                {
                    settings.padding.right =5;
                    seriesGroups.push({
                       
                        type: 'column',
                        useGradient: false,
                        valueAxis: {
                            axisSize :80,
                            minValue:0,
                            maxValue:100,
                            unitInterval:10,
                            visible:false,
                            
                            gridLinesColor: '#ECECEC',
                            labels:{visible:true},
    
                           // formatFunction:function (value){return Round(value,true);}
                        },
                        showToolTips:false,
                        series:DepthSeries,
                        
                    });
                }
    
                //////////////////////////
    
                settings.seriesGroups=seriesGroups;
    
                settings._selectorRange=[];
                delete settings.categoryAxis['minValue'];
    
                    var unitInterval = 20;
                    settings.categoryAxis.type="date";
                    settings.categoryAxis.unitInterval=unitInterval;
                    settings.categoryAxis.formatFunction= rmsAxisFormat;
                    settings.categoryAxis.rangeSelector.unitInterval=unitInterval;
                    settings.categoryAxis.rangeSelector.formatFunction= rmsAxisFormat;
                   // settings.categoryAxis.title ={text:' TimeStartFrom' + chartData[0].X.dateTimeFormatDDMMYYHHMMSSff('@ProqViewWeb.Helper.ProqApp.SelectedCulture')};
                    settings.source=source1;
    
                    function rmsAxisFormat(value){return value.getSeconds() + '.' + value.getMilliseconds() ;}
                
    
             //   addColorScheme( id,colorScheme);
                function rmsToolTipFormatFunction (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                    return '<div style="text-align:left">Time: ' + categoryValue +
                        '<br />'+ serie.displayText +' : ' +  value + '</div>';
                };
                
            }
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
    
            });
    		
    		
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width:1250px; height:900px">
        </div>
    </body>
    </html>
    • This reply was modified 6 years, 2 months ago by  Kapil.
    Tooltip problem #99095

    Kapil
    Participant
    Tooltip problem #99142

    Kapil
    Participant

    Any Update?

    Tooltip problem #99411

    Stanislav
    Participant

    Hello Kapil,

    Please send us a more clean and filtered example.

    Best Regards,
    Stanislav

    jQWidgets Team
    http://www.jqwidgets.com/

    Tooltip problem #104020

    dharil_secure
    Participant

    Hello,

    Kindly provide the solution of above problem. Same problem I am facing. Please solve issue as early as possible.

    Thanks
    Dharil Kothari
    Secure Meters Ltd

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.