Tip:
Highlight text to annotate it
X
STEP1 Overview: JQ Plot is one option
STEP1 Overview: jChartFX is another option
STEP 2: jChartFx has extensive documentation and more of data representation techniques.
PLEASE NOTE: The procedure we will follow is applicable to both, and to any JQ library you might wish to include, so Enjoy
Download jChartFX for our example
Extract the downloaded archive.
STEP 3-1: Create the Index.html file that will be the base for the Storyline Web-Object.
STEP 3-2: Open the Index.HTML file, with your favorite editor, and add the respective HTML Tags as shown.
Now, we need to get started.
STEP 3-3: The required Library at all times.
STEP 3-4A: Choose CoreBasic library for basic visual needs.
STEP 3-4B: Choose CoreVector for more visual enhanced representations.
STEP 3-4: Choose ONE of them ONLY
STEP 3-5: Additional libraries are added as needed for extra features.
STEP 3-6: Each visualization has its own library to reference.
STEP 3-7: Now, lets add references to the needed libraries.
STEP 3-7A: HEAD-TAG: Add reference to the Core Libraries. (CSS is ignored, to style it in Index.html file, for those not aware of CSS).
STEP 3-7A: HEAD-TAG: Check the Location of the referenced JS files.
STEP 3-7B: BODY TAG: Add the HTML container (DIV) that will contain the chart.
STEP 3-7B: BODY TAG: To illustrate a concept, the DIV's ID is renamed.
STEP 3-7C: BODY TAG: Trigger a JS function on the BODY load.
STEP 3-7C: BODY TAG: The function is renamed to illustrate the concept. Now, a JS function called "STORYCHART" will be triggered on BODY load.
STEP 3-7D: JS Function: Create the "STORYCHART" function.
STEP 3-7E: JS Function: Rename the function as required.
STEP 3-7F: JS Function: Create an instance of the Chart and assign it to the VARiable created: Chart1.
STEP 3-7G: JS Function: Set the Chart Type, in this case, its a Pie Chart.
STEP 3-7H: JS Function: Create the Chart and populate it, in the DIV created in the BODY TAG, and rename accordingly to "STORYLINE".
CORRECTION: A missing quotation in the BODY TAG.
STEP 3-7I: JS Function: These 3 lines are essential.
STEP 3-7I: The CREATE function should be called at the last step. The Data we will get is inserted in between.
STEP 3-8: Now, its time to get Data to populate our Chart.
STEP 3-8A: View Page Source to Get the Data that populate the PieChart here.
STEP 3-8B: Search for the Pie Data, Copy it and Paste it in the Index.html File
STEP 3-8C: The 3D view should be disabled, until its referenced in the HEADER TAG.
STEP 3-9A: Let's view the Index.html file
NOTE: Enabling the 3D view without referencing it in the Header will not work.
STEP 3-9B: Let's Explode all the Slices in the PieChart. Refer to the Documentation for more you can do.
IN THE NEXT VIDEO, WE WILL EXPLORE STEP 4 THAT WILL DISCUSS ANIMATIONS, AND DATA-BINDING TO STORYLINE.