jQWidgets Forums
Forum Replies Created
-
Author
-
October 11, 2018 at 8:33 am in reply to: angular 6 bar chart not working in mozilla angular 6 bar chart not working in mozilla #102355
hello,
I am getting this error only in Firefox Quantum v62.0.3 64-bit, could you please check this error with your development team. and give a update
ERROR TypeError: “s is undefined”
_getTextPartshttps://beta-app.capium.com/vendor.bundle.js:6577:10400measureTexthttps://beta-app.capium.com/vendor.bundle.js:6577:5061_measureTexthttps://beta-app.capium.com/vendor.bundle.js:6577:10623measureTexthttps://beta-app.capium.com/vendor.bundle.js:6577:10706_renderhttps://beta-app.capium.com/vendor.bundle.js:6473:10347_internalRefreshhttps://beta-app.capium.com/vendor.bundle.js:6473:4765refreshhttps://beta-app.capium.com/vendor.bundle.js:6473:7817invokehttps://beta-app.capium.com/vendor.bundle.js:6529:1519jqxWidgetProxyhttps://beta-app.capium.com/vendor.bundle.js:6529:6580../../../../jqwidgets-scripts/jqwidgets/jqxcore.js/b.jqx.jqxWidget/b.fn[h]/<https://beta-app.capium.com/vendor.bundle.js:6529:12489eachhttps://beta-app.capium.com/scripts.bundle.js:355:10eachhttps://beta-app.capium.com/scripts.bundle.js:190:10hhttps://beta-app.capium.com/vendor.bundle.js:6529:12462refreshhttps://beta-app.capium.com/vendor.bundle.js:6160:9__updateRect__https://beta-app.capium.com/vendor.bundle.js:5869:9jqxChartComponenthttps://beta-app.capium.com/vendor.bundle.js:5774:13dispatchhttps://beta-app.capium.com/scripts.bundle.js:5183:16handlehttps://beta-app.capium.com/scripts.bundle.js:4992:6invokeTaskhttps://beta-app.capium.com/polyfills.bundle.js:14499:17onInvokeTaskhttps://beta-app.capium.com/vendor.bundle.js:161278:24invokeTaskhttps://beta-app.capium.com/polyfills.bundle.js:14498:17runTaskhttps://beta-app.capium.com/polyfills.bundle.js:14266:28invokeTaskhttps://beta-app.capium.com/polyfills.bundle.js:14574:24invokeTaskhttps://beta-app.capium.com/polyfills.bundle.js:15618:9globalZoneAwareCallbackRegards,
Madhu.i am using cefbrowser in windows forms, you example is working fine but for me its creating the border to chartcontainer
how can i get the same functionally of saveaspng in the saveaspdf that means to display save menu by clicking savepdf .tell me in programatically
thank you for your response.i will implement your suggestion
here is my code
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>RangeSelector – Numeric Scale</title>
<link type=”text/css” rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” />
<link type=”text/css” rel=”stylesheet” href=”jqwidgets/styles/jqx.shinyblack.css” />
<script type=”text/javascript” src=”scripts/jquery-1.10.2.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/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxrangeselector.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxresponse.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script><script type=”text/javascript”>
$(document).ready(function () {var valuemax;
var valuemin;
// create jqxRangeSelector.
$(“#rangeSelector”).jqxRangeSelector({
width:1050,
min: 0,
max: 1000,
theme:’shinyblack’,
//backgroundColor: ‘white’,
minorTicksInterval: 1,
majorTicksInterval: 50,
range: { from: 10, to: 100 }});
var range = $(‘#rangeSelector’).jqxRangeSelector(‘getRange’);
$(“#from”).text(range.from);
$(“#to”).text(range.to);$(“#rangeSelector”).on(“change”, function (event) {
$(“#from”).text(event.args.from);
$(“#to”).text(event.args.to);
$(‘#chartContainer’).jqxChart(‘refresh’);
settings.xAxis.minValue=event.args.from;
settings.xAxis.maxValue=event.args.to;
});$(“#yrange”).jqxRangeSelector({
width: 500,
height: 10,
theme:’energyblue’,
min: 0,
max: 500,
range:{
from:0,
to:500
},
labelsFormat:’f’,
labelsFormatFunction: function (value) {
return “<span style=’visibility:false ;’>” ;
},majorTicksInterval: 50,
minorTicksInterval: 20});
var range = $(‘#yrange’).jqxRangeSelector(‘getRange’);
$(“#yrange”).on(“change”, function (event) {
$(‘#chartContainer’).jqxChart(‘refresh’);
settings.valueAxis.minValue=event.args.from;
settings.valueAxis.maxValue=event.args.to;
});
var refreshTimeout = 1000;var data = [];
for (var i = 0; i < 20; i++)
{
data.push
({
time: i,
value1: (Math.random()) % 20 + 20,
value2: (Math.random()) % 20 + 50,
value3: (Math.random()) % 20 + 10,
value4: (Math.random()) % 20,});
}var seriesGroups =
[{
type: ‘line’,// toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: ‘value1′, displayText :’vmod’, lineWidth:1,lineColor:’red’,
opacity:1, lineWidthSelected: 1 ,symbolType: ‘circle’,dashStyle:’4,4′,
fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:false}}
]
},
{
type :’line’,series:[
{ dataField: ‘value2′, displayText :’mcu’,lineWidth: 1, lineColor:’blue’,
opacity:1,lineWidthSelected: 1,symbolType: ‘square’,dashStyle:’4,4′,
fillColorSymbolSelected: ‘white’, symbolSize: 4 ,labels:{visible:false}
}
]
},
{
type: ‘spline’,series :[
{ dataField: ‘value3′, displayText:’vinp’, lineWidth: 1,lineColor:’green’,
opacity:1, lineWidthSelected: 1 ,symbolType: ‘rectangle’,dashStyle:’4,4′,
fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:false}
}
]
},
{
type :’spline’,series:[
{ dataField: ‘value4′, displayText:’vccwifi’, lineWidth: 1,lineColor:’black’,
opacity:1, lineWidthSelected: 1,symbolType: ‘sphere’,dashStyle:’4,4′, fillColorSymbolSelected: ‘white’, symbolSize: 4,labels:{visible:false}
}
]
}
]var settings = {
title: “Power Profiler”,
description: “Multiple Graphs”,showLegend :true,
showBorderLine: false,
enableAnimations: true,
//backgroundImage: ‘grey.jpg’,
animationDuration: 500,
enableCrosshairs: true,padding: { left: 5, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
source: data,
xAxis:
{
title: { text: ‘time’ },
labels: { horizontalAlignment: ‘left’ },
dataField: ‘time’,
type:’default’,
minValue:0,
maxValue:30,
enableAxisTextAnimation: true,
alignEndPointsWithIntervals: true,
gridLines: { step: 1},
valuesOnTicks: true,labelsFormat:’%s’,
intervalType:’seconds’,
// labels:
// {
// formatFunction: function (value) {
// return value.getSeconds()
// }
// },// type: ‘time’,
baseUnit: ‘seconds’,
labelsFormat : ‘ss.sss’,rangeSelector:{
renderTo: $(‘#selectorContainer’),padding: { left: 0, right: 0,top: 0, bottom: 0 },
minValue: 0,
maxValue:1000,
type:’default’,
backgroundColor: ‘white’,baseUnit: ‘seconds’,
gridLines: { visible:true },
serieType: ‘area’,
labelsFormat:’%s’,
intervalType:’seconds’},
},
valueAxis:
{
title: { text: ‘Graph’ },
labels: { horizontalAlignment: ‘right’ },minValue:valuemin,
maxValue:valuemax,
unitInterval:2
},colorScheme: ‘scheme04’,
seriesGroups:seriesGroups};
$(‘#chartContainer’).jqxChart(settings);/* $(‘#chartContainer’).on(‘toggle’, toggleFunc);
function toggleFunc(event)
{
if (event.args)
{
if(event.args.serie.dataField == ‘value1’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value1’;}
}
else if(event.args.serie.dataField == ‘value2’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value2’;
}}
else if(event.args.serie.dataField == ‘value3’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value3’;
}}
else if (event.args.dataField == ‘value4’)
{
if(event.args.state == true)
{
settings.xAxis.dataField = ‘value4’;}
}
else
{}
}
} */
$(“#all”).click(function () {$(‘#chartContainer’).jqxChart(
settings={source:data,showLegend:true,xAxis:{dataField:’time’}
,seriesGroups:seriesGroups,});
});
$(“#vmod”).click(function () {$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value1’,
symbolSize: 4,labels:{visible:true}
}
]
}
]});
});
$(“#mcu”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[
{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value2’,
symbolSize: 4,labels:{visible:true}
}
]
}
]
});});
$(“#vinp”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[
{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value3’,
symbolSize: 4,labels:{visible:true}
}
]
}
]
});
});
$(“#vccwifi”).click(function () {
$(‘#chartContainer’).jqxChart(settings={source:data,showLegend:false,
xAxis:{dataField:’time’},
seriesGroups:
[{
type: ‘line’,
alignEndPointsWithIntervals: false,
valueAxis:
{
title: {text: ‘Interest Rate’},
position: ‘right’,},
series: [
{ dataField: ‘value4’,
symbolSize: 4,labels:{visible:true}
}
]
}
]
});});
var timerFunction = function () {
//if (data.length >= 5)
//data.splice(0, 1);
data.push({ time: data[data.length – 1].time + 1,
value1: (Math.random()) % 20+ 20,
value2: (Math.random()) % 20 + 50,
value3: (Math.random()) % 20 +10,
value4: (Math.random()) % 20,
});
$(‘#chartContainer’).jqxChart(‘update’);
};
var ttimer = setInterval(timerFunction, refreshTimeout);$(‘#btnPauseResume’)
.jqxButton({ width: 160 })
.bind(‘click’, function () {
if (ttimer) {
clearInterval(ttimer);
$(‘#btnPauseResume’).val(‘Resume’);
ttimer = undefined;
}
else {
ttimer = setInterval(timerFunction, refreshTimeout);
$(‘#btnPauseResume’).val(‘Pause’);
}
});
/* $(‘#resetZooming’).jqxChart(settings). on(‘click’, function (event) {
var args = event.args;
var min=$(‘#minval’).val();
var max=$(‘#maxval’).val();
if(max<min)
{
$(‘#p’).html(‘min is greater than max’).addClass(“color”);
$(‘#minval’).val(”);
$(‘#maxval’).val(”);}
else
{
$(‘#p’).html(‘min is greater than max’).hide();
$(‘#chartContainer’).jqxChart(‘refresh’);settings.xAxis.minValue = min;
settings.xAxis.maxValue = max;//$(‘#chartContainer’).jqxChart(settings.xAxis.rangeSelector.maxValue = max);
$(‘#chartContainer’).jqxChart(‘refresh’);
}
}); */
$(‘#chartContainer’).jqxChart(settings).
on(‘rangeSelectionChanging’, function (event) {
var args = event.args;
args.instance.description = args.minValue+ ” – ” + args.maxValue;
});
$(‘#selectorContainer’).bind(‘wheel’, onWheel);function onWheel(e) {
e = e || window.event;if (e.originalEvent != null) e = e.originalEvent;
var delta = e.deltaY / -1 || e.detail / -1 || e.wheelDelta;var chartInstance = $(‘#chartContainer’).jqxChart(‘getInstance’);
if (delta < 0) {
newMin = chartInstance.xAxis.minValue-10;
newMax = chartInstance.xAxis.maxValue+10;if (newMin < newMax) {
chartInstance.xAxis.maxValue = newMax;
if(newMin>0){
chartInstance.xAxis.minValue = newMin;}
}} else if (delta > 0) {
newMin = chartInstance.xAxis.minValue + 10 ;
newMax = chartInstance.xAxis.maxValue – 10;
if (newMin < newMax) {
chartInstance.xAxis.minValue = newMin;
chartInstance.xAxis.maxValue = newMax;
}
}chartInstance.refresh();
}/* $(‘#chartContainer’).jqxChart(settings).hover(
function() {
$(this).animate({ ‘zoom’: 1.2 }, 400);
},
function() {
$(this).animate({ ‘zoom’: 1 }, 400);
}); */$(‘#chartContainer’).jqxChart(settings).on(‘click’,
function (event) {
alert(event.args);if(event.args)
{
if (event.args.elementValue)
{
alert(args.elementValue);
}
}
});
});
</script>
<style type=”text/css”>
.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-tooltip-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{fill:black;
color:black;
}
</style>
</head>
<body>
<div>
<div id=’chartContainer’ style=”cursor:;width:1100px; height:400px;”></div>
<div id=’selectorContainer’ style=”width:1100px; height:100px;” >
</div>
<div id=”rangeSelector” style=”width:1100px; height:80px;”>
</div>
</div>
Min value <span id=”from”></span> Max Value <span id=”to”></span>
<div>
<table style=”width: 680px”>
<tr>
<td>
<p style=”font-family: Verdana; font-size: 12px; width:170px;”>Pause / Resume updates:
</p>
<input type=”button” id=”btnPauseResume” value=”Pause” />
</td>
<td>
<p style=”font-family: Verdana; font-size: 12px; width:170px;”>min/max values:
</p>
<input style=’float: left; margin-left: 20px;’ id=”resetZooming” type =”button” value=”Reset zooming”></br>
<p>please select the range with in 0 to 400</p>
<p id=’p’></p>
minvalue <input id=’minval’ type=’text’ class=’input’/>
maxvalue <input id=’maxval’ type=’text’ class=’input’/>
</td></tr>
</table>
<div id =”yrange” style=”width:200px;height:5px;”></div>
<span id=”fromm”>
</span>
<span id=”too”>
</span><span id=”minnn”>
</span>
<span id=”maxxx”>
</span>
<span id=”avg”>
</span>
</body>
</html>thank u mykola ,now it is working.but its is not in control ,while i am trying to click it is not going to be stable ,it is moving
hi mykola, where to modify that code . can u explain it a bit clear
how to increase the size of legend boxes
then hide the rangeselector div tag then your scroll will enable for ever
hi ivailo,
thank you for your response ,but is there any example on that rangeselectionchanged and rangeselectionchanging events.if there means please attach the links.regards,
vasumullapudi -
AuthorPosts