Menu
With the Update of ColdFusion 9 to ColdFusion 11 the underlying chart engine changed from WebCharts3D to ZingCharts. While I managed to find solutions for most of the incompatibilities between the two libraries and their implementation within the <cfchart> tag, I'm struggling to sort out an alignment problem which didn't occur in ColdFusion 9. I even didn't find a fix trying pure javascript and HTML.
In WebCharts3D guides and ticks are centered within a bar in a bar chart. Combined line and bar chart have guides going to the center of the bar and through the markers of the line chart. This is exact the same behaviour as in line charts.
In ZingCharts the guides and ticks of a combined chart or a bar chart sits left to the bar and do not go through the markers of the line. This is a different behaviour than in line-only charts. The x-axis labels are perfectly centered in both engines, tho.
You can see an example here: http://jsfiddle.net/yo3uta96/
Problem:
I have none-public pages with statistical weather data showing rain, wind, temperature etc. which are represented in a number of charts one below each 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. Every chart on the page has the same number of datapoints. When there are more than 80 datapoints to show, then bar charts turn into area charts, line chart into line charts without markers.
What I want to achieve:
I want to have the charts, datapoints, guides and ticks lined up the same way as x-axis labels do.
What I tried:
I managed to line up datapoints by adding offsetStart and offsetEnd to line-only charts, this is necesseary because in a combined chart the first marker of a line chart is placed centered to the corresponding first bar and does no longer sit on the y-axis as in line charts. The same goes for the last marker.
Unfortunately, adding an offset does not solve my alignment problem with ticks and guides. I tried nearly every possible combination with guides, minorTicks, minorGuides and offsets to no avail. In an ideal world and some edgecases where every x-axis label is shown on the chart, disabling guides and setting minor ticks to 1 might work. But this method stops working when increasing the number of datapoints.
Question:
How can I line up guides and ticks in bar charts and line charts with the same number of datapoints in the same way ZingCharts handles x-axis labels which seem to be perfectly aligned across charts?
429
I do not believe the following fix will work in the CFCharts in ColdFusion 11 since it uses a ~late-2015 version of ZingChart, but a change was added in v2.2.2 of ZingChart that gives a remedy for this issue.
By setting the scale-x offset:0, the scale will be centered on the node and will behave as a line chart will. Do note that an additional property inside of plotarea called "maskTolerance" will need to be set to [0,0]. This will ensure the bars do not bleed past the scale-y boundaries.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
