Get change in percentage between two points. Google Charts

[Al-Khedhir Al-Shadeedi]

I have the following chart that calculates premium for each month.

    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["corechart"] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

    

    

    

            var options = {

                title: 'Monthly Total Production',

                curveType: 'function',

                legend: { position: 'bottom' },

                height: 600,

                vAxis: {

                    viewWindow: { min: 0 },

                    format: 'currency',

                },

    

    

    

    

            };

            $.ajax({

    

                type: "POST",

                url: "url",

                data: '{}',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (r) {

                    var data = google.visualization.arrayToDataTable(r.d);

                    var chart = new google.visualization.LineChart($("#monthlyProductionChart")[0]);

                    var view = new google.visualization.DataView(data);

                    view.setColumns([0, 1, {

                        calc: "stringify",

                        sourceColumn: 1,

                        type: "string",

                        role: "annotation"

                    },]);

                    chart.draw(view, options);

                },

                failure: function (r) {

                    alert(r.d);

                },

                error: function (r) {

                    alert(r.d);

                }

            });

        }

    

    

    </script>

The chart displays total premium. Is there a way to show the difference in percentage between two points alongside the premium? I found a way in another post on how to show the percentage change, but that would replace the premium on the chart.

Thanks

[Ray Thomas]

One way might be to show the change in a tooltip. Tooltips can show whatever you like - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content - but it does mean creating a new column to show it. There's no reason you cannot show the current premium, percentage change from the previous data point as well percentage change to the next data point.

Here's an example from a live site of mine:

dataCollege.addColumn({type: 'string', 'role': 'tooltip', 'p': {'html': true}})

and then loop through the datatable and create the data for that column

for (i=0;  i < rowsRaw; i++) {

           // Create a new row in dataCollege

           dataCollege.addRow();

           // Save the original data for use later

          var Title = dataRaw.getValue(i,0);

          var Name = dataRaw.getValue(i,1);

          var startYear = dataRaw.getValue(i,2);

          var endYear = dataRaw.getValue(i,3);

          var photoLoc = dataRaw.getValue(i,4);

           // for each new column (there are 5 of them). No need to do column 1 (the bar labels) as they're null anyway

           for (j = 0; j < 5; j++){

                if (j==0) { dataCollege.setValue(i, j, Title); }

                if (j==1) {dataCollege.setValue(i, j, Name); }

                if (j==2) { if (photoLoc == null) {dataCollege.setValue(i, j, "<p><b>" +  Name + "</b><br>Service: " + startYear + " to " + endYear + " (" + (endYear - startYear) + " years)</p>");}

                     else {dataCollege.setValue(i, j, "<p><img src='" + photoLoc + "'><b>" +  Name + "</b><br>Service: " + startYear + " to " + endYear + " (" + (endYear - startYear) + " years)</p>"); }

                }

                if (j==3) { dataCollege.setValue(i, j, new Date(startYear, 0, 0)); }

                if (j==4) { dataCollege.setValue(i, j, new Date(endYear, 0, 0)); }

           }

      }

The calculation for the tooltip is done in the line where J==2. Here I show an image (photoLoc) , but not all data points have an image, so it tests for that as well as the calculation. 

The result is shown in the Google timeline chart on https://www.indstate.edu/business/history/timeline

-----------

Another way you might be able to show the information is to create a new datatable or dataview  from what you've already got - https://developers.google.com/chart/interactive/docs/reference and https://developers.google.com/chart/interactive/docs/datatables_dataviews - but create a new column showing the percentage change from the previous data point and using that to create a new chart using that value.

Some people have problems showing multiple charts on a page but see https://developers.google.com/chart/interactive/docs/basic_multiple_charts and  something I wrote at http://brisray.com/google-charts/multiple.htm - the timing when drawing multiple charts on a page is important!

Ray