FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Series Groups and Dynamic Loading

Series Groups and Dynamic Loading

Viewing 4 posts - 1 through 4 (of 4 total)
  • October 4, 2019 at 6:45 pm #26995

    jrobinson

    I’m a developer working on a web-based project for my company. I found the CanvasJS library and it’s quite awesome! I’m using the trial version at the moment to test a build. We manufacture pumps and I’ve been looking for a means to display pump data (namely a performance curve) for a project. I extracted some test data from one of our pump tests, added CAD data from a formal plotted version, and with some tweaking I was able to to build a phenomenal pump curve using CanvasJS! See code below.

    I’ve been looking for a means to add some extra interactivity by grouping a few series’ together in the legend. In my chart, there’s several series: Trim, Motor HP, Efficiency and NPSHR. The trims are shown in the legend, because they define the possible performance for this pump’s impeller when trimmed to a certain diameter. This is essentially the main data we emphasize. I like that I can toggle the visibility of each Trim in the legend. However, I’d like to group the Efficiency lines into a single legend item that when clicked toggles the visibility of all Efficiency lines. Then apply this to Motor HP and NPSHR as well. The trouble I had with NPSHR was that I had to create the lines as stripLines within axisX to achieve the desired effect and then define the labels separately.

    My other issue is attempting to make this dynamically load. This is just but one pump and I would have to extract the data for various other pumps. The chart trims, HP, etc. all change drastically and there’s possibly fewer or more series lines. I saw it’s possible to load dataPoints, however is it possible to store and load each series from within data, axisX etc.

    <div id="myChart" style="width:100%; height: 650px;"></div>

    	$("#myChart").CanvasJSChart({
		interactivityEnabled: true,
		zoomEnabled: false,
		toolTip:{
			fontFamily: "Open Sans, Arial",
			fontStyle: "normal"
		},
		legend: {
			fontFamily: "Open Sans, Arial",
			fontSize: 14,
			cursor: "pointer",
			itemclick: function(e) {
				if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
					e.dataSeries.visible = false;
				} else {
					e.dataSeries.visible = true;
				}
				e.chart.render();
			}
		},
		axisX: {
			labelFontFamily: "Open Sans, Arial",
			labelFontSize: 14,
			title: "Flow Rate (GPM)",
			titleFontFamily: "Open Sans",
			titleFontSize: 18,
			titleFontColor: "#000000",
			gridThickness: 1,
			gridColor: "#dddddd",
			stripLines:[
				{
					value:16.9985,
					color:"#c6d7e9",
					thickness: 2
				},{
					value:24.9985,
					color:"#c6d7e9",
					thickness: 2
				},{
					value:30.9985,
					color:"#c6d7e9",
					thickness: 2
				}, {
					value:34.9985,
					color:"#c6d7e9",
					thickness: 2
				},{
					value:36.9985,
					color:"#c6d7e9",
					thickness: 2
				}
			]
		},
		axisY: {
			labelFontFamily: "Open Sans, Arial",
			labelFontSize: 14,
			title: "Head (feet)",
			titleFontFamily: "Open Sans",
			titleFontSize: 18,
			titleFontColor: "#000000",
			gridThickness: 1,
			gridColor: "#dddddd"
		},
		data: [
			{
				name: "NPSHR",
				showInLegend: false,
				type: "scatter",
				indexLabelOrientation: "horizontal",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontColor: "#5781ab",
				indexLabelBackgroundColor: "#ffffff",
				indexLabelFontSize: 14,
				toolTipContent: null,
				highlightEnabled: false,
				fillOpacity: 0,
				dataPoints:[
					{x:16.9985,y:3,indexLabel:"2' NPSHR"},
					{x:24.9985,y:3,indexLabel:"3'"},
					{x:30.9985,y:3,indexLabel:"4'"},
					{x:34.9985,y:3,indexLabel:"5'"},
					{x:36.9985,y:3,indexLabel:"6'"}
				]
			}, {
				name: "1/2 HP",
				legendMarkerType: "none",
				showInLegend: false,
				indexLabel: "{name}",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 12,
				indexLabelFontColor: "#000000",
				lineThickness: 2,
				lineDashType: "longDash",
				markerSize: "none",
				type: "line",
				color: "#aaaaaa",
				toolTipContent: "{name}",
				highlightEnabled: false,
				dataPoints: [
					{x:1.0296,y:113.7592172},{x:42.3485,y:7.898428198}
				]
			}, {
				name: "3/4 HP",
				legendMarkerType: "none",
				showInLegend: false,
				indexLabel: "{name}",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 12,
				indexLabelFontColor: "#000000",
				lineThickness: 2,
				lineDashType: "longDash",
				markerSize: "none",
				type: "line",
				color: "#aaaaaa",
				toolTipContent: "{name}",
				highlightEnabled: false,
				dataPoints: [
					{x:8.9133,y:115.81106364},{x:50.7573,y:7.898428198}
				]
			}, {
				name: "1 HP",
				legendMarkerType: "none",
				showInLegend: false,
				indexLabel: "{name}",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 12,
				indexLabelFontColor: "#000000",
				lineThickness: 2,
				lineDashType: "longDash",
				markerSize: "none",
				type: "line",
				color: "#aaaaaa",
				toolTipContent: "{name}",
				highlightEnabled: false,
				dataPoints: [
					{x:21.5570,y:115.81106364},{x:55.5644,y:22.27175859}
				]
			}, {
				name: "45% Efficient",
				legendMarkerType: "none",
				showInLegend: false,
				lineThickness: 1,
				markerSize: "none",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 14,
				indexLabelBackgroundColor: "white",
				indexLabelOrientation: "horizontal",
				indexLabelFontColor: "#000000",
				indexLabelFormatter: function(e) { return e.dataPoint.label == undefined ? null : e.dataPoint.label; },
				type: "spline",
				color: "#99cc99",
				toolTipContent: null,
				highlightEnabled: false,
				dataPoints: [
					{label:"45%",x:13.2924,y:100.388371972},{x:13.3823,y:98.41979409},{x:13.4756,y:96.45399154},{x:13.5746,y:94.49259122},{x:13.681,y:92.53759417},{x:13.7932,y:90.58779978},{x:13.9101,y:88.64240763},{x:14.0326,y:86.70221813},{x:14.1613,y:84.7684319},{x:14.2969,y:82.84264975},{x:14.4402,y:80.92567209},{x:14.5916,y:79.01869954},{x:14.752,y:77.1233329},{x:14.9221,y:75.2415732},{x:15.1024,y:73.37542146},{x:15.2938,y:71.52687871},{x:15.4967,y:69.69794595},{x:15.7118,y:67.89182483},{x:15.9396,y:66.11051636},{x:16.1806,y:64.35722218},{x:16.4352,y:62.63514392},{x:16.7038,y:60.94748322},{x:16.9867,y:59.2978419},{x:17.2839,y:57.6886212},{x:17.5946,y:56.12102172},{x:17.9179,y:54.59504347},{x:18.2532,y:53.11068645},{x:18.5996,y:51.66755045},{x:18.9564,y:50.26603568},{x:19.3229,y:48.90454132},{x:19.6984,y:47.58346757},{x:20.0823,y:46.30201403},{x:20.4741,y:45.05857988},{x:20.8731,y:43.85276491},{x:21.2789,y:42.68336852},{x:21.691,y:41.5507909},{x:22.1095,y:40.45583247},{x:22.5341,y:39.39929364},{x:22.9647,y:38.38197481},{x:23.4011,y:37.40547679},{x:23.8431,y:36.4701998},{x:24.2905,y:35.57694424},{x:24.7432,y:34.72731093},{x:25.2009,y:33.92210027},{x:25.6635,y:33.16291309},{x:26.1307,y:32.45054978},{x:26.6024,y:31.78661117},{x:27.0782,y:31.17189767},{x:27.5579,y:30.60760988},{x:28.0412,y:30.09574883},{x:28.5279,y:29.63711493},{x:29.0175,y:29.23090776},{x:29.5096,y:28.87752754},{x:30.0039,y:28.57617385},{x:30.4999,y:28.32484567},{x:30.9973,y:28.12194219},{x:31.4958,y:27.96546239},{x:31.995,y:27.85420564},{x:32.4947,y:27.78577074},{x:32.9946,y:27.75895707},{x:33.4946,y:27.7717636},{x:33.9945,y:27.82218932},{x:34.494,y:27.9086334},{x:34.9931,y:28.02909484},{x:35.4916,y:28.1815726},{x:35.9895,y:28.36446588},{x:36.4867,y:28.57617385},{x:36.9831,y:28.81469549},{x:37.4788,y:29.07843},{x:37.9736,y:29.36617675},{x:38.4676,y:29.67513432},{x:38.9608,y:30.0049025},{x:39.4531,y:30.35267987},{x:39.9447,y:30.71766601},{x:40.4355,y:31.10026113},{x:40.9254,y:31.50046524},{x:41.4144,y:31.91827832},{x:41.9024,y:32.35330018},{x:42.3895,y:32.80633123},{x:42.8754,y:33.27657105},{x:43.3603,y:33.76482006},{x:43.8441,y:34.27067805},{x:44.3267,y:34.79414501},{x:44.808,y:35.33562117},{x:45.2881,y:35.8947063},{x:45.7669,y:36.47180062},{x:46.2443,y:37.06650392},{x:46.7203,y:37.6788162},{x:47.195,y:38.30753684},{x:47.6685,y:38.95026463},{x:48.1409,y:39.60499855},{x:48.6124,y:40.27093818},{x:49.082,y:40.95848883},{x:49.5488,y:41.67445397},{x:50.0137,y:42.41203014},{x:50.4395,y:43.10238221}
				]
			}, {
				name: "50% Efficient",
				legendMarkerType: "none",
				showInLegend: false,
				lineThickness: 1,
				markerSize: "none",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 14,
				indexLabelBackgroundColor: "white",
				indexLabelOrientation: "horizontal",
				indexLabelFontColor: "#000000",
				indexLabelFormatter: function(e) { return e.dataPoint.label == undefined ? null : e.dataPoint.label; },
				type: "spline",
				color: "#99cc99",
				toolTipContent: null,
				highlightEnabled: false,
				dataPoints: [
					{label:"50%",x:15.5341,y:99.91415622},{x:15.6354,y:97.95475693},{x:15.7402,y:95.99815906},{x:15.849,y:94.04516303},{x:15.9623,y:92.09616905},{x:16.0809,y:90.15197751},{x:16.2055,y:88.21418924},{x:16.337,y:86.28360464},{x:16.4761,y:84.36182453},{x:16.6239,y:82.45004953},{x:16.7811,y:80.55068085},{x:16.9487,y:78.66531931},{x:17.1275,y:76.79676635},{x:17.3185,y:74.94742319},{x:17.5225,y:73.12049145},{x:17.7403,y:71.31957298},{x:17.973,y:69.54866982},{x:18.2211,y:67.81138381},{x:18.4854,y:66.11291759},{x:18.7664,y:64.45807362},{x:19.0643,y:62.85125414},{x:19.3778,y:61.29245915},{x:19.7059,y:59.78288927},{x:20.0474,y:58.32134389},{x:20.4011,y:56.90702258},{x:20.7661,y:55.53952516},{x:21.1414,y:54.217651},{x:21.5262,y:52.9397993},{x:21.9196,y:51.70476943},{x:22.321,y:50.511761},{x:22.7296,y:49.35877297},{x:23.1454,y:48.24740618},{x:23.568,y:47.17806081},{x:23.9973,y:46.15233769},{x:24.433,y:45.17103723},{x:24.8751,y:44.23616044},{x:25.3232,y:43.34850774},{x:25.7771,y:42.50967994},{x:26.2367,y:41.72127785},{x:26.7016,y:40.9853025},{x:27.1715,y:40.3025543},{x:27.6463,y:39.67503427},{x:28.1255,y:39.10474342},{x:28.6089,y:38.59288237},{x:29.096,y:38.14145214},{x:29.5864,y:37.75125314},{x:30.0795,y:37.42028435},{x:30.5747,y:37.14614453},{x:31.0717,y:36.92723289},{x:31.57,y:36.76074798},{x:32.0691,y:36.64468879},{x:32.5688,y:36.57665409},{x:33.0688,y:36.55344226},{x:33.5687,y:36.57385266},{x:34.0685,y:36.63428348},{x:34.5679,y:36.7335341},{x:35.0667,y:36.86840289},{x:35.565,y:37.03688881},{x:36.0624,y:37.23699087},{x:36.5591,y:37.46630782},{x:37.055,y:37.72323885},{x:37.55,y:38.00538275},{x:38.0441,y:38.31073848},{x:38.5374,y:38.63770523},{x:39.0299,y:38.98388178},{x:39.5215,y:39.34846772},{x:40.0123,y:39.73106284},{x:40.5022,y:40.13166715},{x:40.9911,y:40.55068085},{x:41.479,y:40.98770373},{x:41.9659,y:41.443136},{x:42.4516,y:41.91737786},{x:42.9363,y:42.40962891},{x:43.4197,y:42.92068955},{x:43.9019,y:43.45015958},{x:44.3828,y:43.998039},{x:44.8623,y:44.56432781},{x:45.3405,y:45.14942621},{x:45.8172,y:45.75253379},{x:46.2925,y:46.37365056},{x:46.7665,y:47.0107755},{x:47.2393,y:47.66110716},{x:47.7112,y:48.32304475},{x:48.1823,y:48.99338663},{x:48.6528,y:49.67053197},{x:49.1096,y:50.33206936}
				]
			}, {
				name: "55% Efficient",
				legendMarkerType: "none",
				showInLegend: false,
				lineThickness: 1,
				markerSize: "none",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 14,
				indexLabelBackgroundColor: "white",
				indexLabelOrientation: "horizontal",
				indexLabelFontColor: "#000000",
				indexLabelFormatter: function(e) { return e.dataPoint.label == undefined ? null : e.dataPoint.label; },
				type: "spline",
				color: "#99cc99",
				toolTipContent: null,
				highlightEnabled: false,
				dataPoints: [
					{label:"55%",x:18.2339,y:99.0737276},{x:18.3052,y:97.09311749},{x:18.3868,y:95.11891064},{x:18.4798,y:93.15270788},{x:18.5857,y:91.19731063},{x:18.7056,y:89.25471991},{x:18.8407,y:87.32813735},{x:18.992,y:85.42116479},{x:19.1597,y:83.53620346},{x:19.3432,y:81.67485418},{x:19.5421,y:79.83911795},{x:19.7559,y:78.0301954},{x:19.9841,y:76.25008754},{x:20.2264,y:74.49959479},{x:20.4823,y:72.78071817},{x:20.7516,y:71.09465828},{x:21.0339,y:69.44341614},{x:21.3291,y:67.82819238},{x:21.6368,y:66.25138821},{x:21.9569,y:64.71420424},{x:22.2892,y:63.21904171},{x:22.6334,y:61.76790163},{x:22.9895,y:60.36318522},{x:23.3572,y:59.00729372},{x:23.7363,y:57.70302854},{x:24.1267,y:56.45279092},{x:24.5282,y:55.2605829},{x:24.9405,y:54.12880569},{x:25.3634,y:53.06146135},{x:25.7965,y:52.06175149},{x:26.2395,y:51.13407838},{x:26.6915,y:50.27924241},{x:27.1517,y:49.49724359},{x:27.6192,y:48.78768172},{x:28.0931,y:48.14975638},{x:28.5725,y:47.58146655},{x:29.0566,y:47.08121142},{x:29.5446,y:46.64698996},{x:30.036,y:46.27680117},{x:30.53,y:45.96864401},{x:31.0261,y:45.71971706},{x:31.5237,y:45.52801929},{x:32.0226,y:45.39074928},{x:32.5221,y:45.30630622},{x:33.022,y:45.27148846},{x:33.522,y:45.28469519},{x:34.0218,y:45.34312499},{x:34.5211,y:45.44557724},{x:35.0198,y:45.58965072},{x:35.5177,y:45.77334441},{x:36.0146,y:45.99505748},{x:36.5104,y:46.25318913},{x:37.0051,y:46.54573833},{x:37.4984,y:46.87150447},{x:37.9903,y:47.22888673},{x:38.4808,y:47.61708471},{x:38.9699,y:48.03409739},{x:39.4573,y:48.47912435},{x:39.9432,y:48.95096499},{x:40.4275,y:49.44841869},{x:40.9102,y:49.97068505},{x:41.3912,y:50.51736386},{x:41.8705,y:51.08645409},{x:42.3482,y:51.67795576},{x:42.8241,y:52.29106844},{x:43.2985,y:52.92379113},{x:43.7713,y:53.57492321},{x:44.2426,y:54.24206345},{x:44.7128,y:54.92321084},{x:45.1818,y:55.61676455},{x:45.6499,y:56.31992316},{x:46.1173,y:57.03108585},{x:46.5841,y:57.7474512},{x:47.0506,y:58.46741838},{x:47.2613,y:58.79318452}
				]
			}, {
				name: "60% Efficient",
				legendMarkerType: "none",
				showInLegend: false,
				lineThickness: 1,
				markerSize: "none",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 14,
				indexLabelBackgroundColor: "white",
				indexLabelOrientation: "horizontal",
				indexLabelFontColor: "#000000",
				indexLabelFormatter: function(e) { return e.dataPoint.label == undefined ? null : e.dataPoint.label; },
				type: "spline",
				color: "#99cc99",
				toolTipContent: null,
				highlightEnabled: false,
				dataPoints: [
					{label:"60%",x:22.2966,y:97.24879689},{x:22.3793,y:95.27539045},{x:22.4701,y:93.30758687},{x:22.5705,y:91.34738717},{x:22.6821,y:89.39679236},{x:22.8064,y:87.45900409},{x:22.9452,y:85.53642358},{x:23.1001,y:83.63425347},{x:23.2731,y:81.75689602},{x:23.4658,y:79.91075448},{x:23.68,y:78.10263234},{x:23.917,y:76.34093388},{x:24.1782,y:74.63526398},{x:24.4643,y:72.99442716},{x:24.7756,y:71.4288287},{x:25.1116,y:69.94767331},{x:25.4704,y:68.55456283},{x:25.8492,y:67.24909704},{x:26.2456,y:66.02967513},{x:26.6575,y:64.89589691},{x:27.083,y:63.84536113},{x:27.5206,y:62.87766761},{x:27.969,y:61.99241613},{x:28.4269,y:61.1892065},{x:28.8933,y:60.46883911},{x:29.3673,y:59.83211438},{x:29.8478,y:59.27903231},{x:30.3337,y:58.80799208},{x:30.824,y:58.41739287},{x:31.3179,y:58.10563387},{x:31.8144,y:57.87071406},{x:32.3127,y:57.70943181},{x:32.8122,y:57.61938589},{x:33.3122,y:57.59777487},{x:33.812,y:57.64219752},{x:34.3113,y:57.74945222},{x:34.8095,y:57.91753794},{x:35.3063,y:58.14325306},{x:35.8013,y:58.42419634},{x:36.2943,y:58.75836677},{x:36.7849,y:59.14296291},{x:37.273,y:59.57638396},{x:37.7584,y:60.05662888},{x:38.2409,y:60.58209687},{x:38.7203,y:61.1507869},{x:39.1964,y:61.76109816},{x:39.6693,y:62.41062942},{x:40.1391,y:63.09537864},{x:40.6059,y:63.81214419},{x:41.07,y:64.55692403},{x:41.5317,y:65.32571612},{x:41.9911,y:66.1145184},{x:42.4489,y:66.92012927},{x:42.9052,y:67.73774625},{x:43.3606,y:68.56416773},{x:43.8154,y:69.39539165},{x:43.9272,y:69.60029615}
				]
			}, {
				name: "65% Efficient",
				legendMarkerType: "none",
				showInLegend: false,
				lineThickness: 1,
				markerSize: "none",
				indexLabelFontFamily: "Open Sans, Arial",
				indexLabelFontSize: 14,
				indexLabelBackgroundColor: "rgba(255,255,255,0.25)",
				indexLabelOrientation: "horizontal",
				indexLabelFontColor: "#000000",
				indexLabelFormatter: function(e) { return e.dataPoint.label == undefined ? null : e.dataPoint.label; },
				type: "spline",
				color: "#99cc99",
				toolTipContent: null,
				highlightEnabled: false,
				dataPoints: [
					{label:"65% Eff.",x:28.2392,y:93.29958279},{x:28.4284,y:91.4478384},{x:28.6508,y:89.65652483},{x:28.9094,y:87.94445167},{x:29.2055,y:86.33282974},{x:29.5365,y:84.83406537},{x:29.8976,y:83.45095999},{x:30.2848,y:82.18551461},{x:30.6945,y:81.03933006},{x:31.124,y:80.01520776},{x:31.5705,y:79.11634934},{x:32.032,y:78.34715705},{x:32.5063,y:77.71443436},{x:32.9911,y:77.22698576},{x:33.4839,y:76.89281534},{x:33.9817,y:76.70992206},{x:34.4815,y:76.66750043},{x:34.9809,y:76.75354431},{x:35.4784,y:76.95444677},{x:35.9726,y:77.25540025},{x:36.4631,y:77.64399844},{x:36.9495,y:78.10663438},{x:37.432,y:78.63170217},{x:37.9108,y:79.20759587},{x:38.3865,y:79.82391019},{x:38.8412,y:80.44502696}
				]
			},{
				name: "3 3/8\" trim",
				legendMarkerType: "none",
				showInLegend: true,
				lineThickness: 3,
				markerSize: "none",
				type: "spline",
				toolTipContent: "<strong>{name}</strong><br/>{x} GPM<br/>{y} feet",
				highlightEnabled: false,
				dataPoints: [
					{x:0.4271,y:39.8634537},{x:0.9272,y:39.8554537},{x:1.4272,y:39.8445457},{x:1.9271,y:39.8334567},{x:2.4271,y:39.8245457},{x:2.9271,y:39.8198544},{x:3.4271,y:39.8134534},{x:3.9271,y:39.8045457},{x:4.1303,y:39.76347937},{x:4.6302,y:39.75187346},{x:5.1302,y:39.7366657},{x:5.6302,y:39.7170557},{x:6.1302,y:39.69344366},{x:6.6301,y:39.66502916},{x:7.13,y:39.63141202},{x:7.63,y:39.59219202},{x:8.1298,y:39.54736916},{x:8.6297,y:39.49574283},{x:9.1295,y:39.43771323},{x:9.6292,y:39.37288017},{x:10.1289,y:39.30004302},{x:10.6285,y:39.219602},{x:11.128,y:39.13115689},{x:11.6274,y:39.03390729},{x:12.1267,y:38.927453},{x:12.6258,y:38.81179401},{x:13.1248,y:38.68653013},{x:13.6237,y:38.55086094},{x:14.1224,y:38.40478644},{x:14.6208,y:38.24710602},{x:15.119,y:38.07661908},{x:15.6169,y:37.89252519},{x:16.1144,y:37.69282334},{x:16.6115,y:37.47711333},{x:17.108,y:37.24419454},{x:17.6041,y:36.99206595},{x:18.0994,y:36.72032737},{x:18.594,y:36.42737796},{x:19.0878,y:36.11241733},{x:19.5806,y:35.77424486},{x:20.0723,y:35.41125974},{x:20.5628,y:35.02306176},{x:21.0519,y:34.60845031},{x:21.5396,y:34.16582457},{x:22.0256,y:33.69598495},{x:22.5098,y:33.19813105},{x:22.9923,y:32.67226285},{x:23.4727,y:32.11838037},{x:23.9511,y:31.53648361},{x:24.4273,y:30.92657255},{x:24.9012,y:30.2878468},{x:25.3726,y:29.62110676},{x:25.8414,y:28.92515183},{x:26.3074,y:28.20038219},{x:26.7706,y:27.44679787},{x:27.2307,y:26.66359844},{x:27.6876,y:25.8507839},{x:28.1411,y:25.00795406},{x:28.591,y:24.13550911},{x:29.0372,y:23.23264865},{x:29.4795,y:22.29897248},{x:29.9174,y:21.33327997},{x:30.3502,y:20.3315691},{x:30.777,y:19.28943761},{x:31.1969,y:18.20288347},{x:31.6088,y:17.06910524},{x:32.012,y:15.8853015},{x:32.4048,y:14.64747021},{x:32.7798,y:13.32479565},{x:33.1242,y:11.87565658},{x:33.4196,y:10.26323425},{x:33.643,y:8.476322925},{x:33.7996,y:6.576954247}
				]
			}, {
				name: "3 7/8\" trim",
				legendMarkerType: "none",
				showInLegend: true,
				lineThickness: 3,
				markerSize: "none",
				type: "spline",
				toolTipContent: "<strong>{name}</strong><br/>{x} GPM<br/>{y} feet",
				highlightEnabled: false,
				dataPoints: [
					{x:0.4272,y:56.80376992},{x:0.9272,y:56.82658156},{x:1.4272,y:56.84899299},{x:1.9271,y:56.8702038},{x:2.4271,y:56.88981381},{x:2.9271,y:56.90822319},{x:3.4271,y:56.92423136},{x:3.9271,y:56.9382385},{x:4.427,y:56.94944422},{x:4.927,y:56.9578485},{x:5.427,y:56.96305116},{x:5.927,y:56.96425177},{x:6.427,y:56.96185054},{x:6.927,y:56.95504707},{x:7.427,y:56.94384136},{x:7.927,y:56.92743299},{x:8.427,y:56.90582197},{x:8.9269,y:56.87900829},{x:9.4269,y:56.84579135},{x:9.9268,y:56.80657135},{x:10.4266,y:56.76094808},{x:10.9265,y:56.70852135},{x:11.4262,y:56.64889093},{x:11.926,y:56.58165664},{x:12.4256,y:56.50681848},{x:12.9252,y:56.42357602},{x:13.4247,y:56.33232949},{x:13.924,y:56.23187826},{x:14.4233,y:56.12262254},{x:14.9224,y:56.00336171},{x:15.4213,y:55.87369558},{x:15.9201,y:55.73322394},{x:16.4186,y:55.58074618},{x:16.9169,y:55.41546189},{x:17.415,y:55.23737106},{x:17.9126,y:55.04527309},{x:18.41,y:54.83876777},{x:18.9069,y:54.61665449},{x:19.4033,y:54.37893326},{x:19.8993,y:54.12480365},{x:20.3947,y:53.85306506},{x:20.8894,y:53.5637175},{x:21.3834,y:53.25556034},{x:21.8767,y:52.92779317},{x:22.3691,y:52.58001581},{x:22.8605,y:52.21182803},{x:23.3509,y:51.82162903},{x:23.8402,y:51.40981901},{x:24.3283,y:50.97479715},{x:24.815,y:50.51616324},{x:25.3002,y:50.03351709},{x:25.7838,y:49.52645849},{x:26.2658,y:48.99338663},{x:26.7459,y:48.4347017},{x:27.224,y:47.84880289},{x:27.7,y:47.23609041},{x:28.1736,y:46.59576384},{x:28.6449,y:45.92662258},{x:29.1134,y:45.22826642},{x:29.5792,y:44.50029515},{x:30.0418,y:43.74150817},{x:30.5012,y:42.95190547},{x:30.9571,y:42.13028645},{x:31.4093,y:41.27625089},{x:31.8574,y:40.38899839},{x:32.3014,y:39.46812875},{x:32.7408,y:38.51364196},{x:33.1754,y:37.52433741},{x:33.605,y:36.50021511},{x:34.0291,y:35.44087485},{x:34.4476,y:34.34631662},{x:34.8602,y:33.21574003},{x:35.2665,y:32.04914506},{x:35.6662,y:30.84733214},{x:36.0589,y:29.60910064},{x:36.4436,y:28.33084873},{x:36.8181,y:27.00497254},{x:37.1798,y:25.62386817},{x:37.5258,y:24.17953156},{x:37.8527,y:22.66595964},{x:38.1569,y:21.07794975},{x:38.434,y:19.41310068},{x:38.6798,y:17.67101222},{x:38.8901,y:15.8560866},{x:39.0593,y:13.9739267},{x:39.1797,y:12.0329368},{x:39.2312,y:10.04912505},{x:39.2424,y:8.048904942},{x:39.2515,y:6.049485237}
				]
			}, {
				name: "4 3/8\" trim",
				legendMarkerType: "none",
				showInLegend: true,
				lineThickness: 3,
				markerSize: "none",
				type: "spline",
				toolTipContent: "<strong>{name}</strong><br/>{x} GPM<br/>{y} feet",
				highlightEnabled: false,
				dataPoints: [
					{x:0.4271,y:77.44149516},{x:0.9269,y:77.49152068},{x:1.4268,y:77.54074578},{x:1.9266,y:77.58917048},{x:2.4265,y:77.63559415},{x:2.9264,y:77.68001681},{x:3.4263,y:77.72203824},{x:3.9262,y:77.76125824},{x:4.4261,y:77.79727661},{x:4.926,y:77.83009335},{x:5.426,y:77.85850784},{x:5.9259,y:77.88292029},{x:6.4259,y:77.90213009},{x:6.9259,y:77.91653743},{x:7.4259,y:77.92494172},{x:7.9259,y:77.92774315},{x:8.4259,y:77.92414131},{x:8.9259,y:77.91373601},{x:9.4259,y:77.89612702},{x:9.9258,y:77.87131437},{x:10.4258,y:77.83809743},{x:10.9257,y:77.79687641},{x:11.4255,y:77.74645069},{x:11.9253,y:77.68722048},{x:12.425,y:77.61838538},{x:12.9246,y:77.53954517},{x:13.4241,y:77.45069986},{x:13.9235,y:77.35064883},{x:14.4227,y:77.23979229},{x:14.9218,y:77.11773004},{x:15.4206,y:76.98406187},{x:15.9193,y:76.83838758},{x:16.4178,y:76.68030696},{x:16.9159,y:76.50982001},{x:17.4138,y:76.32692673},{x:17.9114,y:76.13042652},{x:18.4087,y:75.92071957},{x:18.9056,y:75.69740568},{x:19.402,y:75.46008464},{x:19.8981,y:75.20875647},{x:20.3936,y:74.94222053},{x:20.8887,y:74.66127725},{x:21.3831,y:74.36472601},{x:21.877,y:74.05336722},{x:22.3703,y:73.72600026},{x:22.8629,y:73.38262514},{x:23.3548,y:73.02364206},{x:23.8459,y:72.64865081},{x:24.3363,y:72.2576514},{x:24.8258,y:71.85024362},{x:25.3145,y:71.42682768},{x:25.8022,y:70.98660317},{x:26.289,y:70.53037049},{x:26.7749,y:70.05732924},{x:27.2597,y:69.56747941},{x:27.7434,y:69.06162143},{x:28.226,y:68.53855466},{x:28.7075,y:67.99867933},{x:29.1877,y:67.44119501},{x:29.6665,y:66.8649011},{x:30.1439,y:66.2701978},{x:30.6198,y:65.6558845},{x:31.094,y:65.021561},{x:31.5664,y:64.36642688},{x:32.037,y:63.69008194},{x:32.5055,y:62.99172578},{x:32.9719,y:62.27055798},{x:33.4361,y:61.52657856},{x:33.8978,y:60.75858688},{x:34.3569,y:59.96618275},{x:34.8133,y:59.14856577},{x:35.2667,y:58.30493552},{x:35.717,y:57.435292},{x:36.1639,y:56.5384346},{x:36.6074,y:55.61396312},{x:37.0471,y:54.66147735},{x:37.4828,y:53.67977669},{x:37.9142,y:52.66846092},{x:38.3412,y:51.62753004},{x:38.7635,y:50.55578345},{x:39.1807,y:49.45322114},{x:39.5927,y:48.31944292},{x:39.999,y:47.15324816},{x:40.3995,y:45.95543727},{x:40.7937,y:44.72480965},{x:41.1815,y:43.4617655},{x:41.5624,y:42.16550441},{x:41.9362,y:40.83642658},{x:42.3022,y:39.4733314},{x:42.6598,y:38.07461806},{x:43.008,y:36.63868573},{x:43.346,y:35.16433381},{x:43.6728,y:33.64996148},{x:43.9875,y:32.09516854},{x:44.2892,y:30.49955477},{x:44.5766,y:28.86231978},{x:44.8488,y:27.18386377},{x:45.1044,y:25.46418674},{x:45.3408,y:23.70128766},{x:45.5547,y:21.89276531},{x:45.7422,y:20.03821949},{x:45.8993,y:18.13885081},{x:46.0218,y:16.19946173},{x:46.1072,y:14.22805631},{x:46.1589,y:12.2382415},{x:46.1707,y:10.23962221},{x:46.1812,y:8.238601687},{x:46.1819,y:6.23798137}
				]
			}, {
				name: "4 7/8\" trim",
				legendMarkerType: "none",
				showInLegend: true,
				lineThickness: 3,
				markerSize: "none",
				type: "spline",
				toolTipContent: "<strong>{name}</strong><br/>{x} GPM<br/>{y} feet",
				highlightEnabled: false,
				dataPoints: [
					{x:0.4271,y:100.3491781},{x:0.927,y:100.3952016},{x:1.4269,y:100.4404246},{x:1.9267,y:100.4844471},{x:2.4266,y:100.5272689},{x:2.9265,y:100.5680897},{x:3.4264,y:100.6069095},{x:3.9263,y:100.6433281},{x:4.4263,y:100.676545},{x:4.9262,y:100.7065603},{x:5.4262,y:100.7329738},{x:5.9261,y:100.7553852},{x:6.4261,y:100.7733944},{x:6.9261,y:100.7866012},{x:7.4261,y:100.7950055},{x:7.9261,y:100.7978069},{x:8.4261,y:100.7950055},{x:8.9261,y:100.7858008},{x:9.4261,y:100.7701928},{x:9.926,y:100.7473812},{x:10.426,y:100.7177661},{x:10.9259,y:100.6801469},{x:11.4258,y:100.6349238},{x:11.9256,y:100.5808963},{x:12.4253,y:100.5184644},{x:12.925,y:100.4468279},{x:13.4246,y:100.3659867},{x:13.9241,y:100.2751403},{x:14.4235,y:100.1742889},{x:14.9227,y:100.0634324},{x:15.4218,y:99.94297092},{x:15.9207,y:99.81210417},{x:16.4195,y:99.67123233},{x:16.9181,y:99.52035538},{x:17.4164,y:99.35947333},{x:17.9146,y:99.18858618},{x:18.4126,y:99.00769392},{x:18.9103,y:98.81679657},{x:19.4078,y:98.61589411},{x:19.905,y:98.40498654},{x:20.4019,y:98.18407388},{x:20.8986,y:97.95315611},{x:21.3949,y:97.71223324},{x:21.891,y:97.46170547},{x:22.3867,y:97.20077239},{x:22.8821,y:96.92983422},{x:23.3772,y:96.64889093},{x:23.8719,y:96.35794255},{x:24.3662,y:96.05698906},{x:24.8601,y:95.74603048},{x:25.3536,y:95.42426638},{x:25.8466,y:95.09129656},{x:26.3392,y:94.74712103},{x:26.8312,y:94.39093938},{x:27.3226,y:94.0227516},{x:27.8135,y:93.64135709},{x:28.3037,y:93.24715605},{x:28.7932,y:92.83934807},{x:29.2819,y:92.41753294},{x:29.7699,y:91.98131047},{x:30.2571,y:91.53028044},{x:30.7433,y:91.06444287},{x:31.2286,y:90.58299733},{x:31.7129,y:90.08554363},{x:32.1962,y:89.57208176},{x:32.6783,y:89.04181132},{x:33.1592,y:88.49473231},{x:33.6389,y:87.93044453},{x:34.1173,y:87.34814756},{x:34.5943,y:86.74864181},{x:35.0699,y:86.13032647},{x:35.5439,y:85.49400194},{x:36.0164,y:84.83886782},{x:36.4871,y:84.16452391},{x:36.9561,y:83.4713704},{x:37.4233,y:82.75820669},{x:37.8885,y:82.02503277},{x:38.3516,y:81.27064803},{x:38.8125,y:80.49425207},{x:39.2709,y:79.69504447},{x:39.7266,y:78.87262504},{x:40.1796,y:78.02539295},{x:40.6296,y:77.152948},{x:41.0763,y:76.25408959},{x:41.5196,y:75.32841749},{x:41.9592,y:74.37513132},{x:42.3948,y:73.39263024},{x:42.8261,y:72.38091427},{x:43.2529,y:71.33838258},{x:43.6748,y:70.26463496},{x:44.0915,y:69.15887102},{x:44.5026,y:68.01989014},{x:44.9078,y:66.84769232},{x:45.3067,y:65.64067675},{x:45.6987,y:64.39924361},{x:46.0836,y:63.12179211},{x:46.4609,y:61.80872245},{x:46.83,y:60.45923421},{x:47.1906,y:59.07292719},{x:47.5422,y:57.6502016},{x:47.8845,y:56.19185785},{x:48.2177,y:54.69989695},{x:48.542,y:53.17672013},{x:48.8575,y:51.62432841},{x:49.1644,y:50.04512301},{x:49.463,y:48.44030456},{x:49.7537,y:46.81187406},{x:50.0365,y:45.16183253},{x:50.3119,y:43.49178081},{x:50.5801,y:41.80291949},{x:50.8396,y:40.09244715},{x:51.0875,y:38.35476093},{x:51.3207,y:36.58505838},{x:51.5356,y:34.77853705},{x:51.7286,y:32.93279573},{x:51.8955,y:31.04663378},{x:52.0322,y:29.12245245},{x:52.1369,y:27.16625479},{x:52.2132,y:25.18884631},{x:52.266,y:23.19903151},{x:52.3,y:21.20281343},{x:52.3167,y:19.20339373},{x:52.3181,y:17.20277341},{x:52.3197,y:15.20175289},{x:52.3225,y:13.20073237},{x:52.3277,y:11.19971185},{x:52.329,y:9.198691333},{x:52.3307,y:7.197670812}
				]
			}
		]
	});
    • This topic was modified 4 years, 6 months ago by jrobinson.
    October 7, 2019 at 6:09 pm #27008

    Vishwas R

    @jrobinson,

    With few lines of code, you can hide / unhide multiple dataSeries by clicking just one legend and grouping them as shown in this JSFiddle.

    My other issue is attempting to make this dynamically load. This is just but one pump and I would have to extract the data for various other pumps. The chart trims, HP, etc. all change drastically and there’s possibly fewer or more series lines. I saw it’s possible to load dataPoints, however is it possible to store and load each series from within data, axisX etc.

    CanvasJS Just renders chart with the data being passed to it. You can pass and store anything inside chart, data, etc and access it as chart.options.propertyName (chart.options.data[index].propertyName if stored within dataSeries).

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements. Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away. I request you to share JSFiddle with your use-case if you have further queries or facing any issue.

    —
    Vishwas R
    Team CanvasJS

    October 8, 2019 at 7:21 pm #27016

    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 4 years, 6 months ago by jrobinson.
    October 9, 2019 at 6:45 pm #27035

    Vishwas R

    @jrobinson,

    Glad that it worked for you with some minor modifications :)

    And thanks for sharing the modified code, which would help others if they are looking for something similar :)

    —
    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.