[jmshimParticipant]

Even in the demo this is implemented. If you hover the mouse over the chart and scroll down, the tooltip stays there and disappears after 3 seconds.
Below is the setting.

function drawPopupChart(vData){

let otel = [
{
type: “line”,
series: [
{
dataField: ‘HPRICE’,
displayText: ‘부동산114시세(상한)’,
color: ‘#009688’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘LPRICE’,
displayText: ‘부동산114시세(하한)’,
color: ‘#F2B53F’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘APRICE’,
displayText: ‘시세 평균’,
color: ‘#FF5252’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
}
]
}
];

let apt =[
{
type: “line”,
series: [
{
dataField: ‘HPRICE’,
displayText: ‘부동산114시세(상한)’,
color: ‘#009688’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘LPRICE’,
displayText: ‘부동산114시세(하한)’,
color: ‘#F2B53F’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
},
{
dataField: ‘APRICE’,
displayText: ‘시세 평균’,
color: ‘#FF5252’,
toolTipFormatFunction:function(value, itemIndex) {
return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
},
toolTipFormatSettings: {
thousandsSeparator: “,”
},
opacity: 0.7
}
]
},
{
type: “scatter”,
series: [
{
dataField: ‘PRICE’
,symbolSize: 4
,color: ‘#FC6A08’
,symbolType: ‘diamond’
,displayText: ‘국토교통부 실거래가격’
,toolTipFormatFunction:function(value, itemIndex) {
return vData[itemIndex].FLR ;
}
}
]
}
];

var settings = {
title: ”,
description: null,
enableAnimations: true,
showLegend: true,
padding: { left: 20, top: 20, right: 20, bottom: 20 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 0 },
source: null,
xAxis: {
dataField: ‘TD’,
displayText: ‘시점’,
type: ‘date’, //date, basic, linear
baseUnit: ‘month’,
dateFormat: “yyyy.MM.dd”,
toolTipFormatSettings: {
dateFormat: “yyyy.MM.dd”
},
logarithmicScale: false,
logarithmicScaleBase: 2
},
valueAxis: {
position : ‘left’,
gridLines: {
visible: false
},
axisSize: “auto”,
position: “left”,
formatSettings: { thousandsSeparator: “,” }
},
seriesGroups: []
};

if(!isEmpty(vData)){
var dataAdapter = new $.jqx.dataAdapter({
localdata: vData,
datafields: [
{name: “TD”, type: “date”},
{name: “HPRICE”, type: “number”},
{name: “LPRICE”, type: “number”},
{name: “APRICE”, type: “number”},
{name: “PRICE”, type: “number”},
]
});

settings.source = dataAdapter;
}

let chartId = ”;

switch(vGbId){
case ‘OTEL’:
settings.seriesGroups = otel;
chartId = ‘#otelPriceCht’;
break;
case ‘APT’:
settings.seriesGroups = apt;
chartId = ‘#aptPriceCht’;

break;
}
$(chartId).jqxChart(settings);

}

[jmshimParticipant]

hello svetoslav_borislavov.

Your answer has been of great help. However, new problems arose during development. You need to check the It’s none other than checkbox and fire the event only once.

http://jsfiddle.net/48fq0y3g/3/
If you check the log on

[4,1,2]
[4,1,2,3]
[4,1,2,3]
[4,1,2,3]
[4,1,2,3]

This happens several times.

Is it possible to make the above log appear only once in the jqxtree event?

I’m really desperate. please.

[jmshimParticipant]

thanks to you! svetoslav_borislavov

[jmshimParticipant]

Hello. Svetoslav Borislavov The function I want to implement is this.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/checkboxes.htm
(jqxDropDownList – checkboxes) The sample provides the “DropDownList” and “Checkbox” functions. However, it does not provide a tree structure.

Also, in other jqxweiget samples
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/dropdowntree.htm
(jqxTree – DropDown Tree) The sample provides a “tree” function and a “DropDownList” function. However, it does not provide a check box function.

And another jqxweiget sample
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/checkboxes.htm

(jqxTree – Checkboxes) The sample provides a “tree” function and a “Checkboxes” function. However, it does not provide drop-down functionality.

I would appreciate your help if there’s any way to make the jQWidgets dropdown, provide a tree, and check box function 3 at the same time.

Thank you for your kind reply. Svetoslav Borislavov

[jmshimParticipant]

hi Svetoslav Borislavov

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_series_conditional_colors.html

I forgot to attach the url.
Please refer to the above for the route. In the sample, the line color changes to green or red depending on the value, and I wonder if it is possible to express red as a dotted line.

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_axis_offset_to_value.htm

P.S. In the sample below, you can express dotted lines by giving the option ” { dataField: ‘a’, displayText: ‘A’, symbolType: ‘square’, symbolSize: 6, dashStyle: ‘4,4’, lineWidth: 1 },” do

[jmshimParticipant]

hi Svetoslav Borislavov

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_series_conditional_colors.html

I forgot to attach the url.
Please refer to the above for the route. In the sample, the line color changes to green or red depending on the value, and I wonder if it is possible to express red as a dotted line.

[jmshimParticipant]

[jmshimParticipant]

problem solved

$(‘#fr, #to’).on(‘click’, function() {
$(“[id^=’cellTableViewinnerCalendarjqxWidget’]”).attr(“style”,’border-color: transparent; width: 100%; height: 100%;‘); //height was 170px;
});

[jmshimParticipant]

Hi, svetoslav_borislavov
i try views:[“year”,”decade”] but
Initially like

and next click jqxdatetimeinput then

i dont want small button? size month plz Can’t you just do it like the second picture?

[jmshimParticipant]

thank you! Problem solved.

//init rangeSelector
var chart = $(chtid).jqxChart(‘getInstance’);
chart._selectorRange=[];
chart.update();

[jmshimParticipant]

thank you Martin Yotov!

but i have one question
My data has negative and decimal points ex(-4.555 or 2.666 ->>> -4,3). Is there any way to set it in the chart options?

[Author]

Posts