All geek questions in one place

How to align vertical guides between line and histograms in ZingChart?

With the upgrade of ColdFusion 9 to ColdFusion 11, the main chart engine has changed from WebCharts3D to ZingCharts. Although I managed to find solutions for most of the incompatibility between the two libraries and their implementation in the <cfchart> , I struggle to understand the alignment problem that was not encountered in ColdFusion 9. I did not even find a fix that uses pure javascript and HTML.

In manuals and ticks, WebCharts3D are focused in a line on a histogram. The combined linear and histograms have guides that are guided to the center of the panel and through the line chart markers. This is the same behavior as in line charts.

In ZingCharts, the guides and ticks of the combined chart or histogram are located on the left to the panel and do not pass line markers. This is a different behavior than in line charts. The signs of the x axis are ideally located in both engines, i.e., K.

Here you can see an example: http://jsfiddle.net/yo3uta96/

Problem:

I do not have publicly accessible pages with meteorological statistics showing rain, wind, temperature, etc., which are presented in several diagrams one below the other. Some of them are line charts, some of them are bar charts, and some of them are combined charts. This is a dynamically created page where users can select a date range up to 365 days in the past. Each graph on the page has the same number of data points. When, to display more than 80 data points, the charts turn into area charts, a line chart into line charts without markers.

What I want to achieve:

I want the charts, data points, guides, and ticks to line up like the x-axis labels.

What I tried:

I managed to build datapoints by adding offsetStart and offsetEnd to line charts, this is necessary because in the combined chart the first marker of the line chart is placed in the center with the corresponding first bar and no longer sits on the y axis, as in line charts. The same goes for the last marker.

Unfortunately, adding offset does not solve the alignment problem with ticks and guides. I tried almost any possible combination with guides, minorTicks, minorGuides and offsets to no avail. In an ideal world and some edgecases where each x-axis label is shown in the diagram, turning off guides and setting minor ticks to 1 may work. But this method stops working when the number of data points increases.

Question:

How can I build tooltips and ticks in histograms and line charts with the same number of data points in the same way that ZingCharts handles x-axis labels that seem to be perfectly aligned with the charts?

+5
source share
1 answer

I don’t think the next fix will work in CFCharts in ColdFusion 11, because it uses the ZingChart version ~ ~ end of 2015, but a change has been added in version 2.2.2 of ZingChart that provides a way to fix this problem.

By setting the scale offset to x: 0, the scale will be centered on the node and will behave like a line chart. Note that an additional property inside plotarea called "maskTolerance" must be set to [0,0]. This ensures that the stripes do not expire across the borders of the scale.

 var myConfig = { type: "mixed", plotarea: { maskTolerance: [0, 0] }, scaleX: { offset: 0, guide: { visible: true, //set to false by default on some chart types lineColor: "red", lineWidth: 1 } }, series: [{ type: "bar", values: [35, 42, 67, 79, 25, 34, 67, 85] }, { values: [40, 27, 38, 68, 41, 49, 50, 65] }] }; zingchart.render({ id: 'myChart', data: myConfig, height: 200, width: "100%" }); 
 <!DOCTYPE html> <html> <head> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id='myChart'></div> </body> </html>
+7
source

Source: https://habr.com/ru/post/1247257/

More articles:


All Articles