jQuery UI Widgets › Forums › Chart › Tooltip problem in Line chart
Tagged: chart
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
-
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>
Duplicate post: https://www.jqwidgets.com/community/topic/tooltip-problem/
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.