// Take the tour
takeToTour() {
const tour = {
id: "cryptex-tour",
showPrevButton: true,
i18n: {
closeTooltip: String.fromCharCode(10060)
},
onEnd: () => {
// Clearing cookies for next tour
this.hopscotch.endTour(true);
const endtour = {
id: "tour-later",
i18n: {
closeTooltip: String.fromCharCode(10060)
},
steps: [
{
title: "Access Ticker:",
content: "dummy tour"
target: "later",
placement: "bottom",
xOffset: 40
}
]
}
this.hopscotch.startTour(endtour, 0);
},
steps: [
{
title: "Price Ticker:",
content: "You can navigate between markets and select your desired currency"
target: "marketstour",
placement: "bottom",
xOffset: 40,
delay: 300
},
{
title: "Balances & Wallets:",
content: "You have a separate wallet for each currency"
target: "balancewallettour",
placement: "bottom",
xOffset: 40
},
{
title: "Order Form:",
content: "Order form gives you the number of order types of which market"
target: "orderformtour",
placement: "right",
yOffset: 30
}
]
};
this.hopscotch.startTour(tour, 0);
}
In the above code, I am trying to invoke another hopscotch tour after finishing the first tour. But it is not starting the next tour. Help me know where I went wrong.
Thank you...
Related
I´m trying create a chart with a normal decimal scale on the left and a logarithmic scale on the right side.
the sample shows approximately my result, the only thing missing is that on the scale on the right side I need to present the value of 1000Hz at the exact middle point. (360 line)
function createTympaniHzChart() {
$("#chart5").kendoChart({
title: {
text: "..."
},
series: [{
colorField: "valueColor",
overlay: { gradient: "none" },
border: {
width: 0,
color: ""
},
data: [
{ value: 720, valueColor: "#C60C30" },
{ value: 355, valueColor: "#FFBE25" },
{ value: 340, valueColor: "#2EA1FF" }
]
}],
tooltip: {
visible: true,
format: "{0:0}",
template: "#= value #°"
},
categoryAxis: {
title: {
text: "Lorem Ipsum",
color: "#4D4D4D"
},
majorGridLines: {
visible: false
},
categories: ["A...", "B...", "C..."],
line: {
visible: false
},
axisCrossingValues: [0, 10]
},
valueAxis: [{
title: {
text: "° Insertion Depth",
color: "#4D4D4D"
},
max: 720,
majorUnit: 180,
line: {
visible: false
},
labels: {
format: "{0}°",
position: "start"
}
},
{
title: {
text: "° Pitch (Hz)",
color: "#4D4D4D"
},
max: 10000,
min: 100,
majorUnit:9900,
reverse: true,
line: {
visible: false
},
labels: {
format: "{0}Hz",
position: "end"
}
}
]
});
}
Is there any other way to add this value?
I manage t solve the issue with a custom function for the data and adding type: "log" property to the valueAxis.
Add this to the valueAxis:
data: fibonacciSequence()
The function:
function fibonacciSequence() {
for (i = 100; i <= 10000; i = i * 10) {
var fibAxisValues = [];
fibAxisValues.push(i);
}
return fibAxisValues;
}
I'm used Ionic 3 and I'm try to display label for behind the input fields ,but it's not display,why is not showing? please help me to fix it
Thanks
doPrompt() {
let prompt = this.alertCtrl.create({
title: '5 Rooms Available',
message: "",
inputs: [
{
label: "Single Rooms (3)",
name: 'Single Rooms (3)',
placeholder: '$200.00',
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Set',
handler: data => {
console.log('Saved clicked');
}
}
]
});
prompt.present();
}
I've got follow chart, wich I made with DevExtreme charts:
// Add your javascript here
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.value + " mmHg"
}
}
},
legend: {
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
export: {
enabled: true,
printingEnabled: true
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
name: "Blutdruck systolisch",
type: "scatter",
valueField: "sys",
axis: "sysAxe",
point: {
color: "black",
symbol: "triangleDown"
}
}, {
name: "Blutdruck diastolisch",
type: "scatter",
valueField: "dia",
axis: "diaAxe",
point: {
color: "black",
symbol: "triangleUp"
}
}],
valueAxis: [{
name: "sysAxe",
title: "Blutdruck systolisch",
position: "left",
max: 170,
min: 140,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}, {
name: "diaAxe",
title: "Blutdruck diastolisch",
position: "left",
max: 99,
min: 90,
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%; height: 440px"></div>
I've got two different y-axis (systolic and diastolic blood pressure) with two different ranges (sys= 140-170 and dia= 90-99). When you measure the blood pressure of a human, you have to place the systolic value in one scale and the diastolic value in a second. This are two different values but they are still together. And the medical persons must see this, with a vertical connection between the two values something like this:
So they can see fast enough which measured blood pressure values are together and what is the value of each. For us "normal" users this is a little bit confusing, but for the medical persons, doctor and the healthcare it's simply logical. So this is a chart for the healthcare. Is it possible to connect two different points of two series with each other like in the picture?
Thanks and cheers.
This worked for me:
$(function() {
var dataSource = [{
argument: '15.06.2016',
sys: 160,
dia: 90
}, {
argument: '16.06.2016',
sys: 170,
dia: 95
}, {
argument: '17.06.2016',
sys: 152,
dia: 91
}];
$(".chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
},
tooltip: {
enabled: true,
customizeTooltip: function(obj) {
return {
text: obj.highValueText + "/" + obj.lowValueText + " mmHg"
}
}
},
legend: {
visible: false,
verticalAlignment: "top",
horizontalAlignment: "right"
},
title: {
text: "Hugo Amacher | 15.08.1977 (M)",
subtitle: {
enabled: true,
text: "Ich bin ein Untertitel..."
}
},
zoomingMode: "all",
scrollingMode: "all",
series: [{
type: "stock",
lowValueField: "dia",
closeValueField: "dia",
openValueField: "sys",
highValueField: "sys",
}],
valueAxis: [{
name: "bdAxe",
title: "Blutdruck",
position: "left",
label: {
customizeText: function(value) {
return value.value + " mmHg"
}
}
}]
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>
<div class="chartContainer" style="width:100%; height: 440px"></div>
I used the stock chart for this: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Series_Types/StockSeries/?search=stock&version=16_1&approach=Knockout
Thanks & Cheers.
I have used highcharts in my iphone application, Everything works great except one is that when I click on pagination arrows of legend in highchart, it skips one page and goes to next page.
Say I have 4 pages, so if I am on 1st page right now and click to view another page then it jumps to 3rd page. After clicking next for 3rd page I go to 4th page and when I click on prev it skips 3rd page and jumps to 2nd page. And very important to take note is, its happening on iphone only not browser.
I am surprised to see this and unable to identify why this behaviour is there with pagination...
following is my code for creating highchart
var defaultBarChart = {
options: {
chart: {
type: 'column',
alignTicks:false,
//height: 250,
width: Constants.analyticChartWidth
},
yAxis: {
title: {
text: ''+$filter('translate')('values')
}
},
tooltip: {
enabled: false,
style: {
width: 200,
padding: 10,
lineHeight: "normal"
},
useHTML:true
},
legend: {
verticalAlign: 'bottom',
align: 'left',
x: 0,
itemStyle: {
width: deviceWidth,
'color':'#434f5a',
'font-size':'12px'
},
maxHeight: 105,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 18,
inactiveColor: '#CCC'
}
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
''
],
crosshair: true
},
tooltip: {
/* style: {
width: 100
}*/
enabled: false
},
/* tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style: {
width: 100
}
},*/
series: [{
name: '',
data: [0],
showInLegend: false
}],
loading: false,
credits: {
enabled: false
}
};
I want to ask, if problem anywhere else other than navigation can affect on it?
Please.. help me to get out of this...!!
I would like to create footables that have multiple header rows and am having no luck doing this. I'm using a combination of web services/json to pull in my headers and data from a SQL database.
The code below works great but obviously produces just one header row:
function loadTable() {
$('#eocScreen').footable({
ajaxEnabled: true,
sorting: {
enabled: false
},
paging: {
enabled: false,
total: rowData.length,
size: 15,
current: parseInt(FooTable.utils.getURLParameter('page')) || 1
},
filtering: {
enabled: false
},
//columns: colIndex,
columns: {
0: {name: 'locationName', title: 'school' },
1: { name: 'graduate', title: 'Number of Graduates' }
},
ajax: FAjax.request
})
}
I've tried various methods to add a second row, but I'm just not skilled enough to figure it out at this point...a couple of things I've tried are:
columns: {
0: {name: 'locationName', title: 'school' },
1: { name: 'graduate', title: 'Number of Graduates' }
}
{
0: { title: 'loc' },
1: { title: 'seniors' }
},
columns: [{
0: {name: 'locationName', title: 'school' },
1: { name: 'graduate', title: 'Number of Graduates' }
},
{
0: { title: 'loc' },
1: { title: 'seniors' }
}],
Any help would be greatly appreciated!!