jQuery UI Widgets › Forums › Chart › Problem with xAxis
Tagged: Angular chart, axis, baseUnit, chart, jquery chart, jqxChart, seriesGapPercent, unitInterval, valuesOnTicks, x-axis, xAxis
This topic contains 6 replies, has 2 voices, and was last updated by mykola 8 years, 8 months ago.
-
AuthorProblem with xAxis Posts
-
Hi! I’ve just started to learn jqWidgets and faced a problem with xAxis. Here’s my code (modified one of your examples):
<html lang="en"> <head> <title id='Description'>jqxChart XML Data visualization</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datafields: [{ name: 'date', type: 'date' }, { name: 'quantity' }, { name: 'description' }, { name: 'optional' }, {name: 'additional'}], root: "orders", record: "order", datatype: "xml", url: 'xmldata.xml' } var dataAdapter = new $.jqx.dataAdapter(source); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var dataItem = dataAdapter.records[itemIndex]; var volume = dataItem.SPVolume; return '<DIV style="text-align:left"><b>Date: ' + categoryValue.getDate() + '/' + (categoryValue.getMonth() + 1) + '/' + categoryValue.getFullYear() + '</DIV>'; }; // prepare jqxChart settings var settings = { title: "Order Details", showLegend: true, source: dataAdapter, colorScheme: 'scheme04', toolTipFormatFunction: toolTipCustomFormatFn, valueAxis: { minValue: 0, displayValueAxis: true, axisSize: 'auto', tickMarksColor: '#888888' }, xAxis: { dataField: 'date', type: 'date', minValue: new Date(2016, 0, 1), maxValue: new Date(2017, 0, 1), formatFunction: function (value) {//console.log(value); return value.getDate() + "-" + months[value.getMonth()] + " " + value.getFullYear().toString().substring(2); }, showGridLines: true, valuesOnTicks: true, visible:true, tickMarks : { visible: true, step: 1 } }, seriesGroups: [ { type: 'line', series: [{ dataField: 'quantity', displayText: 'Quantity', emptyPointsDisplay: 'connect' }], }, { type: 'column', columnsMinWidth: 3, columnsMaxWidth: 3, series: [ { dataField: 'optional', displayText: 'Optional', lineColor: '#993300', fillColor: '#993300' } ], }, { type: 'column', columnsMinWidth: 3, columnsMaxWidth: 3, series: [ { dataField: 'additional', displayText: 'Additional', lineColor: '#333300', fillColor: '#333300' } ], } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script> </head> <body class='default'> <div id='jqxChart' style="width: 680px; height: 400px"> </div> </body> </html>
And this is the data:
<!--?xml version="1.0" encoding="utf-8" ?--> <orders> <order> <date>1/1/2016</date> <quantity>10</quantity> <description>Beverages</description> <optional>12</optional> </order> <order> <date>1/1/2016</date> <description>Plastic</description> <additional>20</additional> </order> <order> <date>2/2/2016</date> <quantity>15</quantity> <description>Condiments</description> </order> <order> <date>3/3/2016</date> <quantity>20</quantity> <description>Grains/Cereals</description> <optional>16</optional> </order> <order> <date>4/6/2016</date> <quantity>30</quantity> <description>Beverages</description> </order> <order> <date>5/10/2016</date> <quantity>40</quantity> <description>Beverages</description> </order> <order> <date>5/11/2016</date> <description>Beverages</description> <optional>23</optional> </order> <order> <date>5/12/2016</date> <quantity>50</quantity> <description>Grains/Cereals</description> <additional>35</additional> </order> <order> <date>6/4/2016</date> <quantity>55</quantity> <description>Beverages</description> </order> <order> <date>10/4/2016</date> <optional>55</optional> <description>Beverages</description> </order> </orders>
Here are my questions:
1) Why is ‘1-Jan 16’ tick not at the beginning of horizontal axis?
2) Why is one of the column with data for ‘1-Jan 16’ is situated left of the tick?
3) Why the hell is data for May 11 is situated left of ‘5-May 16’ tick and why is it also left of the data for May 10?
4) The similar question is for data for 4/10/2016: why is it closer to ‘7-Sep 16′ tick than to ’18-Oct 16’ tick?
5) Is it possible to show only particular dates on xAxis? If I want to show either only 1-st day of each month or 15-th day (middle of the month) how would I do it?Thank you!
Hello mykola,
First of all, please note that you should have no more than one record in your data source for each data point (i.e. you should have only one <order> for 1/1/2016).
1) through 4) When there are multiple series groups (as in this case) and xAxis.valuesOnTicks is set to true, the series are positioned around the tick automatically. In the example above – the line is on the tick and the two columns – around it. If you wish, you can try setting xAxis.valuesOnTicks to false for a different effect. I also think you will gain a better understanding of these features by testing the demo Column series Spacing.
5) This can be achieved by setting the xAxis fields baseUnit and unitInterval. To have an axis entry each month, set:
baseUnit: 'month', unitInterval: 1,
Alternatively, you can set:
baseUnit: 'day', unitInterval: 15,
in order to display an axis entry each 15 days.
You can read more about these chart functionalities in the jqxChart API documentation.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the answer, Dimitar! I removed additional order (I added it to test if it works or not, and it worked but if you say not then OK :)), but it didn’t resolve the problem. I see that in your example where candlesticks with volume line are used together the data for one day are on the same line. How to achieve it? And I still don’t understand why data for May 11 is to the left of the data for May 10 (point on red line). Moreover after setting this:
baseUnit: 'month', unitInterval: 1,
I clearly see that 4/10/2016 is to the left of the ‘1-Oct 16’ tick though there’s no other data around it which could move this column.
Hi mykola,
When there are multiple column series of the same type in different groups they are positioned in an area around the data point. This is a normal behaviour. In order to “fix” this, you can try including the column series in a common group and set this group’s seriesGapPercent to 0, i.e.:
seriesGroups: [ { type: 'line', series: [{ dataField: 'quantity', displayText: 'Quantity', emptyPointsDisplay: 'connect' }] }, { type: 'column', columnsMinWidth: 3, columnsMaxWidth: 3, seriesGapPercent: 0, series: [{ dataField: 'optional', displayText: 'Optional', lineColor: '#993300', fillColor: '#993300' }, { dataField: 'additional', displayText: 'Additional', lineColor: '#333300', fillColor: '#333300' }] } ]
This code results in the following chart: http://s11.postimg.org/45ob7495v/jqx_Chart_x_Axis_example.png.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks!
Actually I tried this parameter but it didn’t work in my case (when I had different series groups for column charts). Is it possible to make them draw closer to each other in this case without overlapping?Hi mykola,
Unfortunately, there is no such option. We suggest you place both column series in a single group. That is all we can offer on the matter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ok
thanks for your answers, Dimitar!
-
AuthorPosts
You must be logged in to reply to this topic.