highcharts polar series on then off then on - highcharts

I've got a highcharts polar/line graph being driven by an HTML table. It works fine when initially displayed. Then I can click on the series in the legend/key area to turn off the series. So far, so good. But then if I click on the legend again to turn the series back on, I have a problem. It appears that the graph line comes and goes correctly, but the spoke labels are off by one. If I start with 5 spokes, turn the series off then back on, I get 6 spoke labels (but actually the 5 spokes themselves are fine).
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript">
$(function () {
$('#content_Result').highcharts({
data: {
table: 'datatable',
startRow: 1,
endRow: 6,
endColumn: 1,
},
chart: {
polar: true,
type: 'line'
},
title: {
text: 'my Title',
x: -1
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
reversedStacks: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
});
});
</script>
</head>
<body>
<div id="content_Result" style="min-width: 1200px; max-width: 1200px; height: 600px; margin: 0 auto">
</div>
<table id="datatable" class="RadarIndicatorTable">
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<th>SF</th>
<th>Current</th>
</tr>
<tr>
<td>Spoke 1</td>
<td>100</td>
</tr>
<tr>
<td>Spoke 2</td>
<td>20</td>
</tr>
<tr>
<td>Spoke 3</td>
<td>100</td>
</tr>
<tr>
<td>Spoke 4</td>
<td>73.52</td>
</tr>
<tr>
<td>Spoke 4</td>
<td>50</td>
</tr>
</table>
</body>
</html>

Related

Bootstrap on mobile device (not rendering causing hanging problems)

I wondering what's the problem with this page https://jsfiddle.net/3r2eo617/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="card">
<div class="card-header bg-primary text-white">Record</div>
<div class="row">
<div class="card-body">
<div class="container">
<b>Filename</b><br>acc.dat<br><br>
<b>Time Step</b><br>0.02 s<br><br>
<b>No Points</b><br>2400
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<div id="highchart" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart2" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
<div class="form-group">
<div id="highchart3" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
</div>
</div>
</div>
<pre id="csv_acc" style="display:none">Time,Acceleration
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0000
0.280,0.0000
0.300,0.0000
0.320,0.0000
0.340,0.0000
0.360,0.0000
0.380,0.0000
0.400,0.0000
0.420,0.0000
0.440,0.0000
0.460,0.0000
0.480,0.0000
0.500,0.0000
0.520,0.0000
0.540,0.0000
0.560,0.0000
0.580,0.0000
0.600,0.0000
0.620,0.0000
0.640,0.0000
0.660,0.0000
0.680,0.0000
0.700,0.0000
0.720,0.0000
0.740,0.0000
0.760,0.0000
0.780,0.0000
0.800,0.0000
0.820,0.0000
0.840,0.0000
0.860,0.0000
0.880,0.0000
0.900,0.0000
0.920,0.0000
0.940,0.0000
0.960,0.0000
0.980,0.0000
1.000,0.0000
1.020,0.0000
1.040,0.0000
1.060,0.0000
1.080,0.0000
1.100,0.0000
1.120,0.0000
1.140,0.0000
1.160,0.0000
1.180,0.0000
1.200,0.0000
1.220,0.0000
1.240,0.0000
1.260,0.0000
1.280,0.0000
1.300,0.0000
1.320,0.0000
1.340,0.0000
1.360,0.0000
1.380,0.0000
1.400,0.0000
1.420,0.0000
1.440,0.0000
1.460,0.0000
1.480,0.0000
1.500,0.0000
1.520,0.0000
1.540,0.0000
1.560,0.0000
1.580,0.0000
1.600,0.0000
1.620,0.0000
1.640,0.0000
1.660,0.0000
1.680,0.0000
1.700,0.0000
1.720,0.0000
1.740,0.0000
1.760,0.0000
1.780,0.0000
1.800,0.0000
1.820,0.0000
1.840,0.0000
1.860,0.0000
1.880,0.0000
1.900,0.0000
1.920,0.0000
1.940,0.0000
1.960,0.0000
1.980,0.0000
2.000,0.0000
2.020,0.0000
2.040,0.0000
2.060,0.0000
2.080,0.0000
2.100,0.0000
2.120,0.0000
2.140,0.0000
2.160,0.0000
2.180,0.0000
2.200,0.0000
2.220,0.0000
2.240,0.0000
2.260,0.0000
2.280,0.0000
2.300,0.0000
2.320,-0.0000
2.340,-0.0000
2.360,-0.0000
2.380,-0.0000
2.400,-0.0000
2.420,-0.0000
2.440,-0.0000
2.460,0.0000
2.480,0.0000
2.500,0.0000
2.520,0.0000
2.540,0.0000
2.560,0.0000
2.580,0.0000
2.600,-0.0000
2.620,-0.0000
2.640,-0.0000
2.660,-0.0000
2.680,-0.0000
2.700,-0.0000
2.720,-0.0000
2.740,0.0000
2.760,0.0000
2.780,0.0000
2.800,0.0000
2.820,0.0000
2.840,0.0000
2.860,0.0000
2.880,0.0000
2.900,-0.0000
2.920,-0.0000
2.940,-0.0000
2.960,-0.0000
2.980,-0.0000
3.000,-0.0000
3.020,-0.0000
3.040,-0.0000
3.060,0.0000
3.080,0.0000
3.100,0.0000
3.120,0.0000
3.140,0.0000
3.160,0.0000
3.180,0.0000
3.200,0.0000
3.220,0.0000
3.240,0.0000
3.260,0.0000
3.280,0.0000
3.300,-0.0000
3.320,-0.0000
3.340,-0.0000
3.360,-0.0000
3.380,-0.0000
3.400,-0.0000
3.420,-0.0000
3.440,0.0000
3.460,0.0000
3.480,0.0000
3.500,0.0000
3.520,0.0000
3.540,0.0000
3.560,0.0000
3.580,0.0000
3.600,-0.0000
3.620,-0.0000
3.640,-0.0000
3.660,-0.0000
3.680,-0.0001
3.700,-0.0002
3.720,-0.0002
3.740,-0.0002
3.760,-0.0002
3.780,-0.0001
3.800,-0.0001
3.820,-0.0001
3.840,-0.0000
3.860,-0.0002
3.880,-0.0005
3.900,-0.0008
3.920,-0.0005
3.940,-0.0004
3.960,-0.0006
3.980,-0.0002
4.000,0.0005
4.020,0.0005
4.040,-0.0001
4.060,-0.0011
4.080,-0.0016
4.100,-0.0009
4.120,-0.0001
4.140,-0.0004
4.160,-0.0001
4.180,0.0021
4.200,0.0022
4.220,-0.0012
4.240,-0.0038
4.260,-0.0033
4.280,-0.0020
4.300,-0.0023
4.320,-0.0012
4.340,0.0005
4.360,0.0000
4.380,-0.0025
4.400,-0.0056
4.420,-0.0031
4.440,0.0023
4.460,0.0036
4.480,0.0034
4.500,0.0066
4.520,0.0094
4.540,0.0056
4.560,0.0045
4.580,0.0026
4.600,-0.0046
4.620,-0.0077
4.640,0.0004
4.660,0.0105
4.680,0.0014
4.700,-0.0058
4.720,0.0031
4.740,0.0112
4.760,0.0171
4.780,0.0257
4.800,0.0265
4.820,0.0128
4.840,0.0006
4.860,-0.0034
4.880,-0.0020
4.900,0.0090
4.920,0.0003
4.940,-0.0323
4.960,-0.0390
4.980,-0.0281
5.000,-0.0170
</pre>
<pre id="csv_vel" style="display:none">Time,Velocity
0.000,0.0000
0.020,0.0000
0.040,0.0001
0.060,0.0001
0.080,0.0001
0.100,0.0002
0.120,0.0002
0.140,0.0002
0.160,0.0002
0.180,0.0003
0.200,0.0003
0.220,0.0003
0.240,0.0004
0.260,0.0004
0.280,0.0004
0.300,0.0004
0.320,0.0005
0.340,0.0005
0.360,0.0005
0.380,0.0005
0.400,0.0006
0.420,0.0006
0.440,0.0006
0.460,0.0007
0.480,0.0007
0.500,0.0007
0.520,0.0007
0.540,0.0008
0.560,0.0008
0.580,0.0008
0.600,0.0008
0.620,0.0009
0.640,0.0009
0.660,0.0009
0.680,0.0009
0.700,0.0009
0.720,0.0010
0.740,0.0010
0.760,0.0010
0.780,0.0010
0.800,0.0010
0.820,0.0011
0.840,0.0011
0.860,0.0011
0.880,0.0011
0.900,0.0012
0.920,0.0012
0.940,0.0012
0.960,0.0012
0.980,0.0012
1.000,0.0012
1.020,0.0013
1.040,0.0013
1.060,0.0013
1.080,0.0013
1.100,0.0013
1.120,0.0014
1.140,0.0014
1.160,0.0014
1.180,0.0014
1.200,0.0014
1.220,0.0015
1.240,0.0015
1.260,0.0015
1.280,0.0015
1.300,0.0015
1.320,0.0015
1.340,0.0015
1.360,0.0016
1.380,0.0016
1.400,0.0016
1.420,0.0016
1.440,0.0016
1.460,0.0016
1.480,0.0016
1.500,0.0017
1.520,0.0017
1.540,0.0017
1.560,0.0017
1.580,0.0017
1.600,0.0017
1.620,0.0017
1.640,0.0018
1.660,0.0018
1.680,0.0018
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0018
1.780,0.0018
1.800,0.0018
1.820,0.0019
1.840,0.0019
1.860,0.0019
1.880,0.0019
1.900,0.0019
1.920,0.0019
1.940,0.0019
1.960,0.0019
1.980,0.0019
2.000,0.0019
2.020,0.0019
2.040,0.0020
2.060,0.0020
2.080,0.0020
2.100,0.0020
2.120,0.0020
2.140,0.0020
2.160,0.0020
2.180,0.0020
2.200,0.0020
2.220,0.0020
2.240,0.0020
2.260,0.0020
2.280,0.0020
2.300,0.0021
2.320,0.0021
2.340,0.0021
2.360,0.0021
2.380,0.0021
2.400,0.0021
2.420,0.0021
2.440,0.0021
2.460,0.0021
2.480,0.0021
2.500,0.0021
2.520,0.0021
2.540,0.0021
2.560,0.0021
2.580,0.0021
2.600,0.0022
2.620,0.0021
2.640,0.0021
2.660,0.0021
2.680,0.0021
2.700,0.0021
2.720,0.0021
2.740,0.0021
2.760,0.0021
2.780,0.0022
2.800,0.0022
2.820,0.0022
2.840,0.0022
2.860,0.0022
2.880,0.0022
2.900,0.0022
2.920,0.0022
2.940,0.0022
2.960,0.0022
2.980,0.0022
3.000,0.0021
3.020,0.0021
3.040,0.0021
3.060,0.0021
3.080,0.0021
3.100,0.0021
3.120,0.0021
3.140,0.0021
3.160,0.0022
3.180,0.0022
3.200,0.0022
3.220,0.0022
3.240,0.0022
3.260,0.0022
3.280,0.0022
3.300,0.0022
3.320,0.0022
3.340,0.0022
3.360,0.0022
3.380,0.0021
3.400,0.0021
3.420,0.0021
3.440,0.0021
3.460,0.0021
3.480,0.0021
3.500,0.0021
3.520,0.0021
3.540,0.0022
3.560,0.0022
3.580,0.0022
3.600,0.0022
3.620,0.0022
3.640,0.0021
3.660,0.0021
3.680,0.0019
3.700,0.0016
3.720,0.0013
3.740,0.0009
3.760,0.0005
3.780,0.0003
3.800,0.0001
3.820,-0.0001
3.840,-0.0002
3.860,-0.0004
3.880,-0.0011
3.900,-0.0024
3.920,-0.0037
3.940,-0.0047
3.960,-0.0057
3.980,-0.0065
4.000,-0.0061
4.020,-0.0052
4.040,-0.0048
4.060,-0.0060
4.080,-0.0086
4.100,-0.0111
4.120,-0.0120
4.140,-0.0124
4.160,-0.0129
4.180,-0.0109
4.200,-0.0065
4.220,-0.0055
4.240,-0.0104
4.260,-0.0175
4.280,-0.0228
4.300,-0.0270
4.320,-0.0305
4.340,-0.0312
4.360,-0.0307
4.380,-0.0332
4.400,-0.0413
4.420,-0.0500
4.440,-0.0508
4.460,-0.0449
4.480,-0.0379
4.500,-0.0279
4.520,-0.0118
4.540,0.0032
4.560,0.0133
4.580,0.0204
4.600,0.0185
4.620,0.0062
4.640,-0.0010
4.660,0.0098
4.680,0.0217
4.700,0.0173
4.720,0.0146
4.740,0.0289
4.760,0.0573
4.780,0.1001
4.800,0.1523
4.820,0.1916
4.840,0.2050
4.860,0.2021
4.880,0.1967
4.900,0.2037
4.920,0.2130
4.940,0.1809
4.960,0.1096
4.980,0.0426
5.000,-0.0024
</pre>
<pre id="csv_dis" style="display:none">Time,Displacement
0.000,0.0000
0.020,0.0000
0.040,0.0000
0.060,0.0000
0.080,0.0000
0.100,0.0000
0.120,0.0000
0.140,0.0000
0.160,0.0000
0.180,0.0000
0.200,0.0000
0.220,0.0000
0.240,0.0000
0.260,0.0001
0.280,0.0001
0.300,0.0001
0.320,0.0001
0.340,0.0001
0.360,0.0001
0.380,0.0001
0.400,0.0001
0.420,0.0001
0.440,0.0001
0.460,0.0002
0.480,0.0002
0.500,0.0002
0.520,0.0002
0.540,0.0002
0.560,0.0002
0.580,0.0002
0.600,0.0003
0.620,0.0003
0.640,0.0003
0.660,0.0003
0.680,0.0003
0.700,0.0003
0.720,0.0004
0.740,0.0004
0.760,0.0004
0.780,0.0004
0.800,0.0004
0.820,0.0005
0.840,0.0005
0.860,0.0005
0.880,0.0005
0.900,0.0006
0.920,0.0006
0.940,0.0006
0.960,0.0006
0.980,0.0007
1.000,0.0007
1.020,0.0007
1.040,0.0007
1.060,0.0008
1.080,0.0008
1.100,0.0008
1.120,0.0008
1.140,0.0009
1.160,0.0009
1.180,0.0009
1.200,0.0009
1.220,0.0010
1.240,0.0010
1.260,0.0010
1.280,0.0011
1.300,0.0011
1.320,0.0011
1.340,0.0012
1.360,0.0012
1.380,0.0012
1.400,0.0012
1.420,0.0013
1.440,0.0013
1.460,0.0013
1.480,0.0014
1.500,0.0014
1.520,0.0014
1.540,0.0015
1.560,0.0015
1.580,0.0015
1.600,0.0016
1.620,0.0016
1.640,0.0016
1.660,0.0017
1.680,0.0017
1.700,0.0018
1.720,0.0018
1.740,0.0018
1.760,0.0019
1.780,0.0019
1.800,0.0019
1.820,0.0020
1.840,0.0020
1.860,0.0020
1.880,0.0021
1.900,0.0021
1.920,0.0022
1.940,0.0022
1.960,0.0022
1.980,0.0023
2.000,0.0023
2.020,0.0024
2.040,0.0024
2.060,0.0024
2.080,0.0025
2.100,0.0025
2.120,0.0026
2.140,0.0026
2.160,0.0026
2.180,0.0027
2.200,0.0027
2.220,0.0028
2.240,0.0028
2.260,0.0028
2.280,0.0029
2.300,0.0029
2.320,0.0030
2.340,0.0030
2.360,0.0030
2.380,0.0031
2.400,0.0031
2.420,0.0032
2.440,0.0032
2.460,0.0033
2.480,0.0033
2.500,0.0033
2.520,0.0034
2.540,0.0034
2.560,0.0035
2.580,0.0035
2.600,0.0035
2.620,0.0036
2.640,0.0036
2.660,0.0037
2.680,0.0037
2.700,0.0038
2.720,0.0038
2.740,0.0038
2.760,0.0039
2.780,0.0039
2.800,0.0040
2.820,0.0040
2.840,0.0041
2.860,0.0041
2.880,0.0042
2.900,0.0042
2.920,0.0042
2.940,0.0043
2.960,0.0043
2.980,0.0044
3.000,0.0044
3.020,0.0045
3.040,0.0045
3.060,0.0045
3.080,0.0046
3.100,0.0046
3.120,0.0047
3.140,0.0047
3.160,0.0048
3.180,0.0048
3.200,0.0048
3.220,0.0049
3.240,0.0049
3.260,0.0050
3.280,0.0050
3.300,0.0051
3.320,0.0051
3.340,0.0051
3.360,0.0052
3.380,0.0052
3.400,0.0053
3.420,0.0053
3.440,0.0054
3.460,0.0054
3.480,0.0054
3.500,0.0055
3.520,0.0055
3.540,0.0056
3.560,0.0056
3.580,0.0057
3.600,0.0057
3.620,0.0057
3.640,0.0058
3.660,0.0058
3.680,0.0059
3.700,0.0059
3.720,0.0059
3.740,0.0060
3.760,0.0060
3.780,0.0060
3.800,0.0060
3.820,0.0060
3.840,0.0060
3.860,0.0060
3.880,0.0060
3.900,0.0059
3.920,0.0059
3.940,0.0058
3.960,0.0057
3.980,0.0056
4.000,0.0054
4.020,0.0053
4.040,0.0052
4.060,0.0051
4.080,0.0050
4.100,0.0048
4.120,0.0045
4.140,0.0043
4.160,0.0040
4.180,0.0038
4.200,0.0036
4.220,0.0035
4.240,0.0033
4.260,0.0031
4.280,0.0027
4.300,0.0022
4.320,0.0016
4.340,0.0010
4.360,0.0004
4.380,-0.0003
4.400,-0.0010
4.420,-0.0019
4.440,-0.0030
4.460,-0.0039
4.480,-0.0047
4.500,-0.0054
4.520,-0.0058
4.540,-0.0059
4.560,-0.0057
4.580,-0.0054
4.600,-0.0050
4.620,-0.0047
4.640,-0.0047
4.660,-0.0046
4.680,-0.0043
4.700,-0.0039
4.720,-0.0036
4.740,-0.0031
4.760,-0.0023
4.780,-0.0007
4.800,0.0018
4.820,0.0053
4.840,0.0092
4.860,0.0133
4.880,0.0173
4.900,0.0213
4.920,0.0255
4.940,0.0294
4.960,0.0323
4.980,0.0338
5.000,0.0342
</pre>
</main>
<footer class="footer py-3 bg-light">
<div class="container text-center">
</div>
</footer>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
Highcharts.chart('highchart', {
chart: {
zoomType: 'x',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_acc').innerHTML
},
yAxis: {
title: {
text: "Acceleration [g]",
}
}
});
Highcharts.chart('highchart2', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_vel').innerHTML
},
yAxis: {
title: {
text: "Velcocity [cm/s]",
}
}
});
Highcharts.chart('highchart3', {
chart: {
zoomType: 'xy',
},
title: {
text: ''
},
data: {
boostThreshold: 1,
csv: document.getElementById('csv_dis').innerHTML
},
yAxis: {
title: {
text: "Displacement [cm]",
}
}
});
});
</script>
</body>
</html>
when viewed from a mobile device, although it can be viewed correctly in desktop devices. Specifically in mobile devices that running Android OS always causes "not responding symptom" in the latest versions of Chrome/Brave/Vivaldi Browsers.
Could anyone suggest me how this page can be accessed correctly through mobile devices without hanging problems?
Thanks in advance!
PS. The same problem exists when viewing this demo https://www.highcharts.com/demo/line-time-series from a mobile device, but not for the other demos.

I see that you were trying to apply the boost module by setting boostThreshold property to 1. You were close, in this case, the boost module will fix the issue. Although to make it work you need to do two things - first you need to import boost module, then you should apply boostThreshold in a different place, for example in plotOptions.line.boostThreshold or in series.boostThreshold because you can't access this property from the place you were trying to apply it (data). After fixing those two things everything is working smoothly on my android device.
<script src="https://code.highcharts.com/modules/boost.js"></script>
plotOptions: {
line: {
boostThreshold: 1
}
},
Docs references: https://www.highcharts.com/docs/advanced-chart-features/boost-module
API references: https://api.highcharts.com/highcharts/plotOptions.line.boostThreshold
Live demo: https://jsfiddle.net/BlackLabel/q9805pv4/

jQueryUI sortable to drag & drop columns in a responsive table

I'm trying to learn the jQueryUI sortable feature in order to make it work on a responsive table I'm using on my webpage.
I made a jsfiddle to make some tests and I just can't figure out how to drag and drop columns (not only th's).
I suspected I should use the "connectWith" (or "items"?) option and connect all the td's that share the same id than the dragged th but I just don't succeed in doing that.
I'm not even sure that's what "connectWith" or "items" are made for actually but there is nothing else I can find in the documentation that seems to help me achieve a column drag & drop.
HTML:
<html>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
*html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body:before{
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
table{
table-layout: fixed;
margin: 0 auto;
border-collapse: collapse;
overflow: hidden;
white-space: nowrap;
width:100%;
color:#000;
float:left;
}
tr{
display:table-row;
border: 1px solid black
}
th, td {
border:1px solid #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: table-cell;
text-align:center;
}
th{
position: relative;
background:#bbb;
}
jQuery:
$( function() {
$('thead tr').sortable({
start: function(e, ui)
{
var ind_th= ui.item.index();
$('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
},
connectWith:".drg",
stop: function(e, ui)
{
$('tbody td').removeClass('drg')
}
});
});
Thank you for your help.

It's not exactly pretty, yet it will do the job.
Working Example: https://jsfiddle.net/Twisty/q7oyh9mj/53/
JavaScript
$(function() {
$('thead tr').sortable({
containment: "parent",
placeholder: "placeholder",
opacity: 0.5,
helper: "clone",
axis: 'x',
start: function(e, ui) {
var ind_th = ui.item.index();
$('tbody tr').each(function(ind, el) {
$('td', el).eq(ind_th).addClass('drg').css('color', 'red');
});
},
stop: function(e, ui) {
var itInd = ui.item.index();
$("tbody tr").each(function(ind, el) {
var cell = $(".drg", el).detach();
cell.insertBefore($("td", el).eq(itInd));
cell.removeClass("drg").css("color", "black");
});
}
});
$('thead tr').disableSelection();
});
You can also create your own helper using function(event, element), yet it does not mesh well in stop or update.
So in start, I am adding the class drg to help identify the cells that will get moved. Once the stop is triggered, I use .detach() to remove them from the rows and then insertBefore() to place them back in the new position in the row based on the header index.
If you have a lot of data, I would advise looking at DataTables. I believe it offers this functionality.
Update
New Example: https://jsfiddle.net/Twisty/q7oyh9mj/72/
Two minor changes:
Removed containment; this was preventing header from dragging beyond table borders and could not be placed in the first position.
Add if for when drop point should be the last item
You can also adjust the tolerance options: https://jsfiddle.net/Twisty/q7oyh9mj/73/
Your choice on how to manage it.
Hope that helps.

Asp.net (MVC)Core 2.1 version Jquery Data table plugin issue

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<div class="container">
<br />
<div style="width:90%; margin:0 auto;">
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>CustomerID</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$("#example").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "https://data.sfgov.org/resource/RowID.json",
"type": "GET",
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "number_of_alarms", "name": "number_of_alarms", "autoWidth": true },
{ "data": "on_scene_dttm", "name": "on_scene_dttm", "autoWidth": true },
]
});
});
</script>
I am trying to use jquery.dataTables.min.js in my asp.net mvc core 2.1 version.
Though i have included my script lib in correct order i am getting the error saying "uncaught typeerror $(...).datatable is not a function".

this a typo?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
should be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Highcharts can not display ajax's return data

I want to use ajax get data from database,and use highcharts to display.But now ajax returns data like this:
data:[{"employeeCode":12261600,"working":5,"beforeWork":11,"employeeName":"Tom"}, {"employeeCode":12271407,"working":4,"beforeWork":12,"employeeName":"Peter"} {"employeeCode":12272570,"working":5,"beforeWork":12,"employeeName":"Kate"}]
When I use highcharts to display this data，my page doesn't show anything,where is wrong?
My html code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">>
<script src="${rc.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${rc.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${rc.contextPath}/statics/libs/echarts.min.js"></script>
<script src="${rc.contextPath}/statics/libs/jquery-ui.js"></script>
<script src="${rc.contextPath}/statics/libs/highcharts.js"></script>
<script src="${rc.contextPath}/statics/libs/highcharts-more.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#echartDiv').hide();
$('#searchGrouping').click(function(){
var params = {};
params.employeeCode = $.trim($('#employeeCode').val());
params.employeeName = $.trim($('#employeeName').val());
$.ajax({
type: 'POST',
url: 'queryEmployeeShowECharts',
data: params,
async: true,
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (data) {
if (data.length>0) {
$('#echartDiv').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'test'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.working}' +
'{point.beforeWork}<br/>' +
'{point.employeeCode}<br/>' +
'{point.employeeCode}',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.employeeName}'
}
}
},
series: [{
data: data,
}]
});
$('#echartDiv').show();
}
else{
$('#echartDiv').hide();
}
},
error:function(resp){
}
});
});
});
</script>
</head>
<body>
<div class="tablebox">
<table>
<tr>
<td style="width: 20%;">employee</td>
<td><input type="text" id="employeeCode/></td>
</tr>
<tr>
<td>name</td>
<td style="text-align: left;"><input type="text" id="employeeName"style="width: 40%;height:30px ;border:1px solid black;font-size: 1.3em;"/></td>
</tr>
<tr>
<td colspan="2">
<button id="searchGrouping" class = "btn btn-primary">search </button>
</td>
</tr>
</table>
</div>
<div id="echartDiv">
</div>
</body>
</html>
Can not show anything:

Update like this
var data = [{
"employeeCode": 10061600,
"working": 5,
"beforeWork": 11,
"employeeName": "Tom"
}, {
"employeeCode": 10071407,
"working": 4,
"beforeWork": 12,
"employeeName": "Peter"
}, {
"employeeCode": 10072570,
"working": 5,
"beforeWork": 12,
"employeeName": "Kate"
}]
data.map((el, i) => {
data[i] = ({
x: el.working,
y: el.beforeWork,
z: el.employeeCode,
employeeName: el.employeeName
});
})
fiddle demo
Update
data.map(function(el,i){
data[i]=({x:el.working,y:el.beforeWork,z:el.employeeCode,employeeName:el.employeeName});
})

ng-table filterData does not work

Please help to point the problem in my code bellow: why the drop down select items are not shown. I went through the ngTable Example it did not give me all the details. I cannot find the source ngTableDemos so I have no idea what the filterData should exactly be and it is made by my guess.
"use strict";
angular.module('myApp', ['ngTable']).controller("myCtrl", ['NgTableParams', function (NgTableParams) {
this.cols = [
{field: 'name', title: 'Name', filter: {name: 'text'}},
{field: 'age', title: 'Age', filter: {age: 'number'}},
{field: 'gender', title: 'Gender', filter: {gender: 'select'}, filterData: ['male', 'female', 'shemale']}
];
this.tbParams = new NgTableParams({}, {
dataset: [
{name:'abc1001',age:11,gender:'male'},
{name:'abc1002',age:12,gender:'female'},
{name:'abc1003',age:13,gender:'shemale'}
]
});
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<title>demo23</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script type="text/javascript" src="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.min.css" />
</head>
<body>
<div class="container-fluid" ng-controller = "myCtrl as ctrl">
<table ng-table-dynamic="ctrl.tbParams with ctrl.cols" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td ng-repeat="col in $columns" >{{row[col.field]}}</td>
</tr>
</table>
</div>
</body>
</html>

Finally I dig into the ng-table.js (4.0.0) and found the answer. Line 2841:
var html = "<select ng-options=\"data.id as data.title for data in $column.data\"\n ng-disabled=\"$filterRow.disabled\"\n multiple ng-multiple=\"true\"\n ng-model=\"params.filter()[name]\"\n class=\"filter filter-select-multiple form-control\" name=\"{{name}}\">\n</select>\n";
So I changed my code: filterData: ['male', 'female', 'shemale'] to filterData: [{id: 'male', title: 'male'}, {id: 'female', title: 'female'}, {id: 'shemale', title: 'shemale'}]; then it worked. Of course, filterData: [{id: 'male', title: 'Male'}, {id: 'female', title: 'Female'}, {id: 'shemale', title: 'She-Male'}] also worked.
Comparing to smart-table, I fell that ng-table is more sophisticated. But reading the document to make my own code is a real challenge. Appreciate if they may provide codes on dependencies and move from codepen to plunker.

Resources