5 Replies Latest reply on Jul 6, 2016 2:34 AM by markpelleymounter

    Highcharts and JSFiddle for dashboard

    markpelleymounter

      Good afternoon all.

       

      Hoping some of you have experience of the above and can help me in my quest to set up a dashboard.

       

      I have managed (probably though luck and trial and error) to get a pie chart integrated, working and pulling data which is crafted via sql, but am looking to add more elements to a dashboard.

       

      I have settled on Highcharts via a series of webviewers, and now want to add a gauge and a couple of other charts.

       

      When I look at the examples on Highcharts and then goto edit on jsfiddle, I am struggling with how to take the code there and place it into a custom web address in a webviwer.  Once I have it working I will be able to sort the data myself, but does anybody have a good walk through of what to place where in the custom web address?

       

      Hoping someone can point me in the right direction.

       

      Many thank in anticipation.

        • 2. Re: Highcharts and JSFiddle for dashboard
          BeatriceBeaubien

          Hello,

           

          I'm not sure I understand your question, but I have used the files FileMakerRocks and HammerOz posted in the following thread to get up and running with a couple of Highcharts examples. It is an easy-to-follow teaching tool demonstrating how to take the framework from the Highcharts website and integrate it into FileMaker solutions.

           

          https://community.filemaker.com/message/528911#528911

           

          Best wishes,

           

          Beatrice

          • 3. Re: Highcharts and JSFiddle for dashboard
            markpelleymounter

            Thanks for the help and pointers so far, but I must admit that I am still struggling.

             

            If we take a look at the gauge example from HightCharts and run that into JSFiddle : Edit fiddle - JSFiddle

            , how can I take the generated codes and use them as the custom web address in a webviewer on a layout.?

             

            I have managed, by guess work? to get an example working and using my realtime data:

            "data:text/html," & "<html>

            ¶<head>

            ¶<title></title>

            ¶<style type=\"text/css\">

            ¶   

            ¶    html, body {

            ¶        background-color: #FFF;

            ¶margin: 0px;

            ¶padding: 0px;

            ¶border: 0px;

            ¶scrolling:no;

            ¶    }

            ¶</style>

            ¶<script>" & $$_jquery_js & "</script>

            ¶<script>" & $$_highcharts_js & "</script>

                    <!-- 2. Add the JavaScript to initialize the chart on document ready -->

            ¶        <script type=\"text/javascript\">

            ¶       

            ¶            var chart;

            ¶            $(document).ready(function() {

            ¶                chart = new Highcharts.Chart({

            ¶                    chart: {

            ¶                        renderTo: 'container',

            ¶                        zoomType: 'x',

            ¶                        spacingRight: 20

            ¶                    },

            ¶                credits: {

            ¶                enabled: false

            ¶                },

            ¶                    title: null,

            ¶                    subtitle: {

            ¶                        text: document.ontouchstart === undefined ?

            ¶                            'Click and drag in the plot area to zoom in' :

            ¶                            'Drag your finger over the plot to zoom in'

            ¶                    },

            ¶                    xAxis: {

            ¶                        type: 'Week',

            ¶                        maxZoom: 3,

            ¶                        title: {

            ¶                            text: 'Week Number'

            ¶                        }

            ¶                    },

            ¶                    yAxis: {

            ¶                        title: {

            ¶                            text: 'Sales'

            ¶                        },

            ¶                        min: 0.6,

            ¶                        startOnTick: false,

            ¶                        showFirstLabel: false

            ¶                    },

            ¶                    tooltip: {

            ¶                        shared: true                   

            ¶                    },

            ¶                    legend: {

            ¶                        enabled: false

            ¶                    },

            ¶                    plotOptions: {

            ¶                        area: {

            ¶                            fillColor: {

            ¶                                linearGradient: [0, 0, 0, 300],

            ¶                                stops: [

            ¶                                    [0, Highcharts.getOptions().colors[2]],

            ¶                                    [1, 'rgba(2,0,0,0)']

            ¶                                ]

            ¶                            },

            ¶                            lineWidth: 1,

            ¶                            marker: {

            ¶                                enabled: false,

            ¶                                states: {

            ¶                                    hover: {

            ¶                                        enabled: true,

            ¶                                        radius: 5

            ¶                                    }

            ¶                                }

            ¶                            },

            ¶                            shadow: true,

            ¶                            states: {

            ¶                                hover: {

            ¶                                    lineWidth: 1                       

            ¶                                }

            ¶                            }

            ¶                        }

            ¶                    },

            ¶               

            ¶                    series: [{

            ¶                        type: 'area',

            ¶                        name: 'TOV',

            ¶                        pointInterval: 1,

            ¶                        pointStart: 2 ,

            ¶                        data: [

            ¶                            " & Substitute ( List ( salesbyweekchart::TOV ) ; "¶" ; "," ) & "

            ¶                        ]

            ¶                    }]

            ¶                });

            ¶               

            ¶               

            ¶            });

            ¶               

            ¶        </script>

            ¶       

            ¶    </head>

            ¶    <body>

            ¶       

            ¶        <!-- 3. Add the container -->

            ¶        <div id=\"container\" style=\"width: 95%; height: 99%; margin: 0 auto\"></div>

            ¶       

            ¶               

            ¶    </body>

            ¶</html>"

            , but cannot figure out how to get any other working, they always fail to display

            • 4. Re: Highcharts and JSFiddle for dashboard
              BeatriceBeaubien

              Hi markpelleymounter,

               

              I used the files provided in the aforementioned thread and added the stacked bar chart and half-donut Highcharts demos. I then replicated what I had done in my database. It worked.

               

              So I'm not sure what to suggest except to add the gauge example to the HighchartsJS_Working_005_FC example file, and work out issues in that file before integrating the method into your real database.

               

              Sorry I can't be of more help.

               

               

              Best wishes,

               

              Beatrice

               

              On May 20, 2016, at 9:32, markpelleymounter <noreply@filemaker.com> wrote

               

              Highcharts and JSFiddle for dashboard

              reply from markpelleymounter in Discussions - View the full discussion

               

              Thanks for the help and pointers so far, but I must admit that I am still struggling.

               

               

              /snip

              • 5. Re: Highcharts and JSFiddle for dashboard
                markpelleymounter

                Thanks for your replies, suggestions to date, but I am still really stuggling with this ( I have an awful lot to learn when it comes to creating web code!!

                 

                Perhaps someone would be kind enough to do the following:

                 

                Take the following example

                 

                Edit fiddle - JSFiddle

                 

                and translate that into a webveiwer custom web address on a blank layout in FileMaker so that it displays, then copy the code back on here so that I can paste it into a custom web viewer in my solution.  I can then get my data into it at my end.

                 

                Hope I am not asking too much!