jQuery UI Widgets › Forums › Chart › Tooltip problem
This topic contains 7 replies, has 3 voices, and was last updated by dharil_secure 5 years, 10 months ago.
Viewing 8 posts - 1 through 8 (of 8 total)
-
AuthorTooltip problem Posts
-
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.
Hello kapiljain,
Can you please send us an example?
I did not find anything unusual in my scenario.Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/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>Js fiddle Link
https://jsfiddle.net/Kapiljain227/ruerxmnc/2/Any Update?
Hello Kapil,
Please send us a more clean and filtered example.
Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/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 -
AuthorPosts
Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.