jQuery UI Widgets Forums Chart Tooltip problem in Line chart

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Stanislav 6 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Tooltip problem in Line chart #99174

    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.

    https://jsfiddle.net/ruerxmnc/10/

    “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>
    Tooltip problem in Line chart #99410

    Stanislav
    Participant
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.