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
On Tuesday, June 15, 2021 at 6:07:10 AM UTC-4 [email protected] wrote:
> 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
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/e1d2bbef-f4d1-487c-aa17-112d5f42d15bn%40googlegroups.com.
