Bootstrap on mobile device (not rendering causing hanging problems) - highcharts
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/
Related
How to implement chart js using viewbag in mvc razor
I am using the following code in my MVC application on visual studio to generate a pie chart using the chartjs JavaScript framework. The text does get displayed in the console on the browser. But the chart is not visible.
The following error I get is undefined based on this property [#Html.Raw(ViewBag.ProductSalesCountName)]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pie Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script>
var PieChartData =
{
labels: [#Html.Raw(ViewBag.ProductSalesCountName)],
datasets: [{
label: 'ProductWise Sales Count',
backgroundColor: [
"#f990a7",
"#aad2ed",
"#9966FF",
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [#ViewBag.ProductSalesCount]
}]
};
window.onload = function () {
var ctx1 = document.getElementById("Piecanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'pie',
data: PieChartData,
options:
{
title:
{
display: true,
text: "ProductWise Sales Count"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="Piecanvas"></canvas>
</div>
<div style="text-align: center">
Disclaimer:- This data is for demo it is
not real data it wont relate to any company
</div>
</body>
</html>
This is because your serialization does not produce a valid javascript array. First remove the square brackets from #Html.Raw(ViewBag.ProductSalesCountName) And in the controller use Newtonsoft.Json for the serialization. ViewBag.ProductSalesCountName= Newtonsoft.Json.JsonConvert.SerializeObject(list);
After using a selfdefined js function, Highcharts's select range in xAxis never stops in IE7, why?
My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?
This problem only happened in IE7.
The test page is: Here
The whole code is:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="diantui" style="min-width:300px;height:400px">
</div>
</div>
</div>
<script>
function togglePlotbands() {
this.plotLinesAndBands.forEach(function(plotband) {
var ii = 1;
});
}
window.onload = function(){
var all_data = [];
all_data.push({x:1495641600000 , y: 1});
all_data.push({x:1497110300000 , y: 3});
all_data.push({x:1497210300000 , y: 4});
all_data.push({x:1497410300000 , y: 3});
all_data.push({x:1497510300000 , y: 2});
all_data.push({x:1497715300000 , y: 1});
all_data.push({x:1500134400000 , y: 2});
var hc_obj = {
chart: {
type: 'line',
zoomType: 'x',
renderTo: 'diantui',
events: {
load: function() {
togglePlotbands.call(this.xAxis[0]);
}
}
},
xAxis: {
plotBands: [
{color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
],
events: {
afterSetExtremes: togglePlotbands
}
},
plotOptions: {
line: {
connectNulls: true,
marker: {
enabled: false
},
}
},
series: [
]
};
hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});
var chart = new Highcharts.Chart(hc_obj);
}
</script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
how to bind ngtagsinput display property
What is I am trying to do ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
display-property="{{displayProperty}}"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
I am trying to bind display-property of ng-tagsinput to displayProperty model. It is working only first time. If I change the displayProperty, I am not seeing updates. How can I bind display-property so that whenever it changes, ng-tags-input to consider the change.
Another question -
How to use "text" attribute in ngTagsInput ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
key-property="name"
display-property="flag"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
JQuery drag/drop swap
I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>
Jquery slider with gradescales values
I am using this jquery ui for the slider.here i want the gradescales like in the image for the jquery-ui-slider...how to modify this script?
how do this in this script?
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#slider").slider();
});
</script>
HTML:
<div id="wrap">
<div id="slider"></div>
<div id="slider-text">
<div id="0">Zero</div>
<div id="1">One</div>
<div id="2">Two</div>
<div id="3">Three</div>
</div>
</div>
Javascript/JQuery:
$( "#slider" ).slider({
value: 0,
min: 0,
max: 3,
step: 1
});
$('#1').css('left','32.3333%');
$('#2').css('left','64.6666%');
$('#3').css('left','93.9999%');
CSS:
#slider-text div{
float: left;
position: absolute;
}
Working example: http://jsfiddle.net/A8L8C/
Probably you need to adapt DIVs left property to your desire text (poor, good, very good, excellent). Happy codding!