title
|
string
|
Chart title
|
Sets or gets the title property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "My Title", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
description
|
string
|
Description
|
Sets or gets the description property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"My Description",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
source
|
object
|
[]
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
showBorderLine
|
boolean
|
true
|
Sets or gets the showBorderLine property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",showBorderLine: false } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
borderLineColor
|
string
|
#888888
|
Sets or gets the borderLineColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", borderLineColor:"'#111888'" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
borderLineWidth
|
number
|
1
|
Sets or gets the borderLineWidth property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",borderLineWidth:3 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
backgroundColor
|
string
|
#FFFFFF
|
Sets or gets the backgroundColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", backgroundColor:"#FFFFFF" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
backgroundImage
|
string
|
''
|
Sets or gets the backgroundImage property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", backgroundImage:"../images/chart_background.jpg" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
showLegend
|
boolean
|
true
|
Sets or gets the showLegend property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
legendLayout
|
object
|
{}
|
Sets or gets the legendLayout property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", legendLayout:legendLayout } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
categoryAxis
|
object
|
{}
|
Sets or gets the categoryAxis property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", categoryAxis:"categoryAxis" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
padding
|
object
|
{left: 5, top: 5, right: 5, bottom: 5}
|
Sets or gets the padding property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
titlePadding
|
object
|
{left: 2, top: 2, right: 2, bottom: 2}
|
Sets or gets the titlePadding property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
colorScheme
|
string
|
scheme01
|
Sets or gets the colorScheme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme03", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
greyScale
|
boolean
|
false
|
Sets or gets the greyScale property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",greyScale: true } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
showToolTips
|
boolean
|
true
|
Sets or gets the showToolTips property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",showToolTips: false } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
toolTipShowDelay
|
number
|
500
|
Sets or gets the toolTipShowDelay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipShowDelay:300 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
toolTipHideDelay
|
number
|
4000
|
Sets or gets the toolTipHideDelay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipHideDelay:300 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
toolTipMoveDuration
|
number
|
300
|
Sets or gets the toolTipMoveDuration property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipMoveDuration:200 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
drawBefore
|
function
|
null
|
Sets or gets the drawBefore property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", drawBefore:"drawBefore" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
draw
|
function
|
null
|
Sets or gets the draw property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", draw:"draw" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",rtl: true } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
enableCrosshairs
|
boolean
|
false
|
Sets or gets the enableCrosshairs property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enableCrosshairs: false } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
crosshairsColor
|
string
|
#888888
|
Sets or gets the crosshairsColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", crosshairsColor:"'#111888'" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
crosshairsDashStyle
|
string
|
2,2
|
Sets or gets the crosshairsDashStyle property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", crosshairsDashStyle:"'1,1'" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
crosshairsLineWidth
|
number
|
1
|
Sets or gets the crosshairsLineWidth property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",crosshairsDashStyle:true,crosshairsLineWidth:2 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
columnSeriesOverlap
|
boolean
|
false
|
Sets or gets the columnSeriesOverlap property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",columnSeriesOverlap: true } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
enabled
|
boolean
|
true
|
Sets or gets the enabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enabled: false } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
enableAnimations
|
boolean
|
true
|
Sets or gets the enableAnimations property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:false, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
animationDuration
|
number
|
500
|
Sets or gets the animationDuration property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",animationDuration:1500 } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
enableAxisTextAnimation
|
boolean
|
false
|
Sets or gets the enableAxisTextAnimation property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enableAxisTextAnimation: true } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
renderEngine
|
string
|
auto
|
Sets or gets the renderEngine property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", renderEngine:"HTML5" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
xAxis
|
object
|
null
|
Sets or gets the xAxis property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
valueAxis
|
object
|
null
|
Sets or gets the valueAxis property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
seriesGroups
|
array
|
null
|
Sets or gets the seriesGroups property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
|
toggle
|
Event
|
|
Code examples
Bind to the toggle event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("toggle", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
click
|
Event
|
|
Code examples
Bind to the click event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("click", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
mouseOver
|
Event
|
|
Code examples
Bind to the mouseOver event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("mouseOver", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
mouseOut
|
Event
|
|
Code examples
Bind to the mouseOut event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("mouseOut", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
refreshBegin
|
Event
|
|
Code examples
Bind to the refreshBegin event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("refreshBegin", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
refreshEnd
|
Event
|
|
Code examples
Bind to the refreshEnd event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("refreshEnd", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
rangeSelectionChanging
|
Event
|
|
Code examples
Bind to the rangeSelectionChanging event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("rangeSelectionChanging", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
rangeSelectionChanged
|
Event
|
|
Code examples
Bind to the rangeSelectionChanged event of jqxChart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { title: "Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light" } window.onload = function() { document.querySelector( "jqx-chart").addEventListener("rangeSelectionChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
|
getInstance
|
Method
|
|
Parameter |
Type |
Description |
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-chart").getInstance(); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
refresh
|
Method
|
|
Parameter |
Type |
Description |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").refresh(); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
update
|
Method
|
|
Parameter |
Type |
Description |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").update(); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").destroy(); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
addColorScheme
|
Method
|
|
Parameter |
Type |
Description |
schemeName |
string |
|
colors |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").addColorScheme( 'scheme99',['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
removeColorScheme
|
Method
|
|
Parameter |
Type |
Description |
schemeName |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").removeColorScheme( 'scheme01'); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getItemsCount
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
serieIndex |
number |
|
Return Value
Number
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getItemsCount(0,1,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getItemCoord
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
serieIndex |
number |
|
itemIndex |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getItemCoord(0,1,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getXAxisRect
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getXAxisRect(0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getXAxisLabels
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getXAxisLabels(0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getValueAxisRect
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getValueAxisRect(0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getValueAxisLabels
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getValueAxisLabels(0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getColorScheme
|
Method
|
|
Parameter |
Type |
Description |
colorScheme |
string |
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getColorScheme( 'scheme01'); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
hideSerie
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
serieIndex |
number |
|
itemIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").hideSerie(0,1,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
showSerie
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
serieIndex |
number |
|
itemIndex |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").showSerie(0,1,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
hideToolTip
|
Method
|
|
Parameter |
Type |
Description |
hideDelay |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").hideToolTip(100); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
showToolTip
|
Method
|
|
Parameter |
Type |
Description |
groupIndex |
number |
|
serieIndex |
number |
|
itemIndex |
number |
|
showDelay |
number |
|
hideDelay |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").showToolTip(0,0,0,100,100); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
saveAsJPEG
|
Method
|
|
Parameter |
Type |
Description |
fileName |
string |
|
exportServerUrl |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector("jqx-chart").saveAsJPEG('chartImage.jpeg','http://myServer.com'); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
saveAsPNG
|
Method
|
|
Parameter |
Type |
Description |
fileName |
string |
|
exportServerUrl |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector("jqx-chart").saveAsPNG('chartImage.png','http://myServer.com'); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
saveAsPDF
|
Method
|
|
Parameter |
Type |
Description |
fileName |
string |
|
exportServerUrl |
string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector("jqx-chart").saveAsPDF('chartImage.pdf','http://myServer.com'); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getXAxisValue
|
Method
|
|
Parameter |
Type |
Description |
offset |
number |
|
groupIndex |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getXAxisValue(10,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|
getValueAxisValue
|
Method
|
|
Parameter |
Type |
Description |
offset |
number |
|
groupIndex |
number |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Chart Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script> var padding = { left: 20, top: 5, right: 20, bottom: 5 }; var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; var source = [ { Country: 'China', Population: 1347350000, Percent: 19.18 }, { Country: 'India', Population: 1210193422, Percent: 17.22 }, { Country: 'USA', Population: 313912000, Percent: 4.47 }, { Country: 'Indonesia', Population: 237641326, Percent: 3.38 }, { Country: 'Brazil', Population: 192376496, Percent: 2.74 } ]; var xAxis = { dataField: 'Country', gridLines: { visible: true }, flip: false }; var valueAxis = { flip: true, labels: { visible: true, formatFunction: function (value) { return parseInt(value / 1000000); } } }; var legendLayout = { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' } var seriesGroups = [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 50, toolTipFormatSettings: { thousandsSeparator: ',' }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]; JQXElements.settings[ "chartSettings"] = { } window.onload = function() { document.querySelector( "jqx-chart").getValueAxisValue(10,0); } </script></head><body> <jqx-chart settings="chartSettings"></jqx-chart>
|