[jrobinson]

Thanks for the function! I was attempting to come up with a personal solution using bounds and plotArea but your function at least works better than what I was coming up with. However it’s still not quite pixel perfect. The JSFiddle you linked has the bottom third chart just slightly out of alignment with the top two charts given its Y scale into the 1000s. With your function I’m still getting similar results when loading different sets of data having varying axes scale. I’ve seen some test cases with the Y1 axes slightly misaligned and/or the Y2 axes. Granted the margin of error is usually very small, but still noticeable and it throws off the alignment of the gridlines. Does this have to do with calculating the width of the Y axis title and labels included with the margin?

I was attempting to restructure my Excel function in Javascript using what properties CanvasJS exposes. Excel VBA had Width and InsideWidth properties for PlotArea which included and excluded the width of the axes labels respectfully.

• This reply was modified 2 years, 7 months ago by jrobinson.
• This reply was modified 2 years, 7 months ago by jrobinson.

[jrobinson]

Thanks for the reply! Your JSFiddle code was very helpful including the addition of the groupName attribute, however I noticed it had one issue. Toggling Efficiency visibility would unhide any other hidden series in the legend. I modified it a bit to achieve the desired result.

		legend: {
			fontFamily: "Open Sans, Arial",
			fontSize: 14,
			cursor: "pointer",
			itemclick: function(e) {
				var hideEfficiencySeries = false;
				for (var i = 0; i < e.chart.options.data.length; i++) {
					if (e.chart.options.data[i].groupName === "efficiency" && e.dataSeriesIndex === e.chart.data[i]._index) {
						hideEfficiencySeries = true;
					}
				}
				if (hideEfficiencySeries) {
					for (var i = 0; i < e.chart.options.data.length; i++) {
						if (typeof (e.chart.data[i].visible) === "undefined" || e.chart.data[i].visible && e.chart.options.data[i].groupName === "efficiency") {
							e.chart.options.data[i].visible = false;
						} else if (!e.chart.data[i].visible && e.chart.options.data[i].groupName === "efficiency") {
							e.chart.options.data[i].visible = true;
						}
					}
				} else {
					if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
						e.dataSeries.visible = false;
					} else {
						e.dataSeries.visible = true;
					}
				}
				e.chart.render();
			}
		}

I was attempting to store parts of the chart into a JSON file specific to that pump. That way I could simply load the desired JSON file and render the curve. Mostly everything unique to the pump curve resides within data:[].

• This reply was modified 5 years, 2 months ago by jrobinson.