SharePoint 2013, D3 and Dimple Connection (SharePoint D3) by Stephan A. Onisick

Author:Stephan A. Onisick [Onisick, Stephan A.]
Language: eng
Format: azw3
Published: 2017-04-20T04:00:00+00:00

Figure 29 Toggle button Setup - Chart 2

The table structure in Figure 3o is also less complex because there is only one <th> and one <td> HTML element in each of the two table rows:

Figure 30 RampUp Toggle button - Chart 2

The code in Figure 30 is similar to the last routine where we build a table structure with D3.

The next line filters the data based on Run Type as shown in Figure 31.

Figure 31 Chart 2 Filtering and SVG setup

Chart 1 filters by Prod Cycle--so that only one Prod Cycle at a time is displayed. Chart 2 is only interested in the Run Type of Prod--not the Avg; but all Prod Cycles for Run Type Prod are in the filtered data.

The console.log line after the filtering line is again just for debug output to the console.

The next line creates the <svg> element and attaches it to the <div> element labeled dimpleChartContainer.

The final two lines in Figure 31 are practically identical to the code for Chart 1. The new dimple.chart() command initializes the chart with the data from variable whateverRunType and an <svg> element in which to render.

The only real difference is the name of the variable that was deliberately renamed to whateverRunType to reflect different filtering for Chart 2.

The setBounds command sets the size of the chart within the <svg> element as was previously discussed.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.