charts

<html><head></head><body><p>I’ve written some about <a href="/blog/2018/03/20/gathering-data-filemaker-charting/">Charting</a>, and I’ve written about <a href="/blog/2018/03/13/filemaker-json-parsing-generator/">JSON</a>. I realized I like working with these tools. It recently dawned on me, thanks to a conversation with Todd, that I could combine the two together into “FileMaker JSON Charting”.</p>
<p>So, I laid in the floor of my loft while the dogs happily chewed on bones or toys and worked through it. I tried to think of how JSON could work with a chart.</p>
<blockquote><p>It took a bit, but I started with the idea that a chart needs a list of values for the x- and y-axis. And a chart needs its two lists to match up line by line. Read the previous posts for more detail.</p></blockquote>
<div class="embed-vimeo" style="text-align: center;"><iframe loading="lazy" src="https://player.vimeo.com/video/262399352" width="1500" height="844" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>
<p>I realized JSON is the PERFECT structure to keep the lists intact. I can create an array of JSON objects with the attributes:&nbsp; “month”, and “sales”.</p>
<pre>{
"lineChart" :[
{
"month" : "January",
"sales" : 50
},
{
"month" : "February",
"sales" : 3
},
{
"month" : "March",
"sales" : 0
},
…
]}</pre>
<p>If I could somehow pull the values out of each item in the array, I could easily create a list and put it in the correct axis. It turns, out we have a custom function that will help with this:</p>
<p>JSON.GetValuesAtPath(array, path).&nbsp;found in our <a href="https://github.com/geistinteractive/fm-json-additions">JSONAdditions.fmp12</a> file.</p>
<p>This function “returns a list containing only the values at that path”.</p>
<p>So I could do:</p>
<pre>Let (
_array = JSONGetElement ( zSystem::JSON ; ".lineChart" );

JSON.GetValuesAtPath( _array ; "sales")
)</pre>
<p>and get “50¶3¶0” in return.</p>
<p>Look. It’s a list. It is easily stuffed into the y-axis. For the x-axis&nbsp; I can use the same calculation as above, but take out “sales” and put in “month”. Easy easy easy.</p>
<h2>Expansion</h2>
<p>It occurred to me during the JSON object creation process that I could add another attribute and use the new attribute in another chart:</p>
<pre>{
"lineChart" :[
{
"dollars" : 415,
"month" : "January",
"sales" : 50
},
{
"dollars" : 22.8,
"month" : "February",
"sales" : 3
},
{
"dollars" : 0,
"month" : "March",
"sales" : 0
},
…
]}</pre>
<p>So chart 1 works with month and sales attributes. And Chart 2 works with “month” and “dollars” attributes. Two charts for the price of one JSON object, AND they stay in sync.</p>
<div id="attachment_328464" style="width: 824px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-328464" decoding="async" loading="lazy" class="wp-image-328464 size-full" src="https://www.geistinteractive.com/wp-content/uploads/2018/03/TwoCharts.png" alt="Two charts for the price of one JSON object" width="814" height="847" srcset="https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts.png 814w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts-288x300.png 288w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts-768x799.png 768w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts-36x36.png 36w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts-678x705.png 678w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/TwoCharts-450x468.png 450w" sizes="(max-width: 814px) 100vw, 814px"><p id="caption-attachment-328464" class="wp-caption-text">Two charts for the price of one JSON object</p></div>
<p>That’s very cool. In fact, as I drifted off to sleep, I remembered there are JavaScript libraries that do this same thing. They are designed to pull from different attributes of the same JSON object.</p>
<p>So my main task became gathering the data from the fields into the array and, as you see above, placing it in a field.</p>
<h2>Generating the Data</h2>
<p>I won’t go into a lot of detail about the method I used to generate the data. You can see it in the download. Here are the highlights:</p>
<ol>
<li>Find the records with the matching year and product.</li>
<li>Gather the JSON data in some format. I’m looping through the records and creating objects which will go into an array, but there are other ways.
<p></p><div id="attachment_328463" style="width: 410px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-328463" decoding="async" loading="lazy" class="wp-image-328463 size-full" src="https://www.geistinteractive.com/wp-content/uploads/2018/03/GatheringData.png" alt="Collecting data into an array" width="400" height="209" srcset="https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/GatheringData.png 400w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/GatheringData-300x157.png 300w" sizes="(max-width: 400px) 100vw, 400px"><p id="caption-attachment-328463" class="wp-caption-text">Collecting data into an array</p></div></li>
<li>Update the existing JSON object in the correct path. In my case: “.lineChart”.</li>
</ol>
<h2>Ever Expanding</h2>
<p>I can expand the idea of FileMaker JSON Charting. A JSON object is useful for holding the data necessary to fill out a chart. A JSON object can have many parts to it. The line and column chart above run off of the “lineChart” nested array. I realized I could have another nested array for another chart: “pieChart”. In fact, it occurred to me one JSON object could run an entire dashboard, including a virtual list! Woo!</p>
<div id="attachment_328461" style="width: 1596px" class="wp-caption alignnone"><img aria-describedby="caption-attachment-328461" decoding="async" loading="lazy" class="wp-image-328461 size-full" src="https://www.geistinteractive.com/wp-content/uploads/2018/03/Dashboard.png" alt="An entire dashboard powered by one JSON object. Complete FileMaker JSON Charting" width="1586" height="852" srcset="https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard.png 1586w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-300x161.png 300w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-768x413.png 768w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-1030x553.png 1030w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-1500x806.png 1500w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-705x379.png 705w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/Dashboard-450x242.png 450w" sizes="(max-width: 1586px) 100vw, 1586px"><p id="caption-attachment-328461" class="wp-caption-text">An entire dashboard powered by one JSON object.</p></div>
<p>This dashboard runs off of one JSON object. The JSON object contains a nested array for “pieChart”, and one for “lineChart”.</p>
<div id="attachment_328462" style="width: 346px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-328462" decoding="async" loading="lazy" class="wp-image-328462 size-full" src="https://www.geistinteractive.com/wp-content/uploads/2018/03/FullArray.png" alt="The JSON object" width="336" height="454" srcset="https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/FullArray.png 336w, https://giprod.wpenginepowered.com/wp-content/uploads/2018/03/FullArray-222x300.png 222w" sizes="(max-width: 336px) 100vw, 336px"><p id="caption-attachment-328462" class="wp-caption-text">The JSON object</p></div>
<p>The Year field at top left determines&nbsp; the data to be shown, so the JSON object is re-rendered each time. And the additional choices at top further refine the data displayed.</p>
<h2>Updating the Data</h2>
<p>My scripting gathers the data and then overwrites what’s already in the JSON object with new data. So if a user chooses 2016 and “Peaches” whatever is in the “lineChart” key will be replaced with new data. This is useful. I don’t wipe out other data that is powering other charts.</p>
<h2>FileMaker JSON Charting Further Considerations</h2>
<p>I woke up in the morning and, as often happens, an idea popped into my head. I could set up my JSON object to collect data for the entire range of years and products and refine the calculation for each axis in the charts to drill down to the path for the year and the product the user chose above. No re-capturing of the data.</p>
<p>But why would I do all this? I could very easily create many table occurrences and filters and such to display the same data. I think that answers my question. These charts are completely context-free. the JSON is stored in a field (or could be in a global variable) and available no matter where the objects happen to be.</p>
<p>Again, JavaScript libraries do this: ‘reduce’ and filter from a huge JSON object to what is needed for a particular chart.</p>
<p>I’m sure there’s some more that can be done here. I’ll continue to play with it and see what else I come up with, but if you’ve got any ideas, let me know in the comments below.</p>
<h3>Download the Demo</h3>
<p><a href="/downloads/filemaker-charts-json/">Click here!</a></p>
</body></html>

Blogs tagged with: charts

FileMaker Charting: JSON as the Data Source

RECEIVE THE OCCASIONAL UPDATE.

NEW PROJECT OR COLLABORATION?

FOLLOW US.