Create update_datasets.go

[mcdoyaji]

support aggregation chart update.

usage :

	dataset1 := []*charts.UpdateDataSet{
		charts.NewUpdateDataSet([]float64{25, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateDataSet([]float64{25, 50, -10, 15, 18, 32, 27}),
		charts.NewUpdateDataSet([]float64{25, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateDataSet([]float64{25, 50, -10, 15, 18, 32, 27}),
	}
	dataset2 := []*charts.UpdateDataSet{
		charts.NewUpdateDataSet([]float64{25, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateDataSet([]float64{25, 50, -10, 15, 18, 32, 27}),
		charts.NewUpdateDataSet([]float64{25, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateDataSet([]float64{25, 50, -10, 15, 18, 32, 27}),
	}

	moreBarchartDatasets := [][]*charts.UpdateDataSet{
		dataset1,
		dataset2,
	}

	mainChart.AddDataSelectListener(func(event*charts.DataSelectEvent){
		updateDataset := &charts.UpdateDatasetsArgs{
			Values: [][]*charts.UpdateDataSet{moreBarchartDatasets [event.Index]},
			Labels: barchart.Labels,
		}
		barchart.UpdateDatasets(updateDataset)
	})

[cnguy]

Hi! I have a few questions.

1. Were you able to get this example working in your code? I assume there is a lot more that needs to be implemented (each appropriate chart needs an UpdateDatasets).

2. Which does this fix implement?

UpdateValues (in line_chart.go and bar_chart.go) implements this:
(from https://frappe.github.io/charts/)

// Update entire datasets
  chart.update_values(
    [
      {values: new_dataset_1_values},
      {values: new_dataset_2_values}
    ],
    new_labels
  );

I believe this is the only updating method exposed by frappe-charts at the moment?

Is UpdateValues not basically aggregation updating or am I missing something (maybe I'm tired right now haha).

edit: Ok I'm more awake now; I think I understand the code now.

Instead of updating simply one value set at a time, it updates all the values at a time, which is like you said (aggregation data).

Does this count as aggregation update then?

package main

import (
	charts "github.com/cnguy/gopherjs-frappe-charts"
)

func main() {
	// Make bar chart
	reportCountList := []float64{17, 40, 33, 44, 126, 156,
		324, 333, 478, 495, 373}
	barChartData := charts.NewChartData()
	barChartData.Labels = []string{
		"2007", "2008", "2009", "2010", "2011", "2012",
		"2013", "2014", "2015", "2016", "2017",
	}
	barChartData.Datasets = []*charts.Dataset{
		charts.NewDataset("Events", reportCountList),
	}
	barChartTitle := "Fireball/Bolide Events - Yearly (more than 5 reports"
	barChart := charts.NewBarChart("#chart", barChartData).
		WithTitle(barChartTitle).
		WithHeight(180).
		WithColors([]string{"orange"}).
		SetIsNavigable(true).
		SetIsSeries(true).
		Render()

	// Make line chart
	lineChartValues := []float64{36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0}
	lineChartData := charts.NewChartData()
	lineChartData.Labels = []string{
		"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
	}
	lineChartData.Datasets = []*charts.Dataset{
		charts.NewDataset("", lineChartValues),
		charts.NewDataset("", []float64{1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 12}),
	}
	lineChart := charts.NewLineChart("#chart-2", lineChartData).
		WithHeight(180).
		WithColors([]string{"green"}).
		SetIsSeries(true).
		Render()

	// Prepare update values for event listener
	moreLineData := []*charts.UpdateValueSet{
		charts.NewUpdateValueSet([]float64{4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1}),
		charts.NewUpdateValueSet([]float64{2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4}),
		charts.NewUpdateValueSet([]float64{7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1}),
		charts.NewUpdateValueSet([]float64{0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10}),
		charts.NewUpdateValueSet([]float64{9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13}),
		charts.NewUpdateValueSet([]float64{9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24}),
		charts.NewUpdateValueSet([]float64{20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38}),
		charts.NewUpdateValueSet([]float64{29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 2}),
		charts.NewUpdateValueSet([]float64{36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26}),
		charts.NewUpdateValueSet([]float64{37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35}),
		charts.NewUpdateValueSet([]float64{36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0}),
	}

	testLineData := []*charts.UpdateValueSet{
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 5, 6, 7, 58, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 45, 6, 7, 48, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{50, 2, 3, 14, 5, 6, 7, 8, 39, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 5, 6, 72, 8, 29, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 35, 36, 7, 8, 9, 100, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 13, 24, 5, 6, 7, 8, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 3, 4, 5, 6, 47, 8, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 2, 53, 4, 5, 6, 7, 8, 9, 10, 11, 12}),
		charts.NewUpdateValueSet([]float64{99, 22, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12}),
	}

	barChart.AddDataSelectListener(func(event *charts.DataSelectEvent) {
		updateValues := &charts.UpdateValuesArgs{
			Values: []*charts.UpdateValueSet{moreLineData[event.Index], testLineData[event.Index]},
			// keep labels same as before
			Labels: lineChartData.Labels,
		}
		lineChart.UpdateValues(updateValues)
	})
}

[mcdoyaji]

My commit doesn't work. It's an idea.

and. I try your suggestion.

1. multiple dataset could be second charts's []*.charts.UpdateValuesSet' argument.

	week3 := []*charts.UpdateValueSet{
		charts.NewUpdateValueSet([]float64{35, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{75, 50, -10, 15, 18, 32, 27}),
		charts.NewUpdateValueSet([]float64{-20, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{25, 50, -10, 15, 18, 32, 27}),
	}
	week4 := []*charts.UpdateValueSet{
		charts.NewUpdateValueSet([]float64{35, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{75, 50, -10, 15, 18, 32, 27}),
		charts.NewUpdateValueSet([]float64{-20, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{25, 50, -10, 15, 18, 32, 27}),
	}
	week5 := []*charts.UpdateValueSet{
		charts.NewUpdateValueSet([]float64{35, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{75, 50, -10, 15, 18, 32, 27}),
		charts.NewUpdateValueSet([]float64{-20, 40, 30, 35, 8, 52, 17}),
		charts.NewUpdateValueSet([]float64{25, 50, -10, 15, 18, 32, 27}),
	}

	/* Add Select Event listener to Second Chart with Third chart update data */
	주간공부량차트.AddDataSelectListener(func(이벤트 *charts.DataSelectEvent) {
		업데이트값 := &charts.UpdateValuesArgs{
			Values: []*charts.UpdateValueSet{
				week1[이벤트.Index], week2[이벤트.Index],
				week3[이벤트.Index], week4[이벤트.Index],
				week5[이벤트.Index],
				},
			// keep labels same as before
			Labels: 요일별공부량차트자료.Labels,
		}
		요일별공부량차트.UpdateValues(업데이트값)
	})

2. but only first dataset apply second charts. I don't know how to apply another dataset to second chart.

here's result.

https://rawgit.com/baram204/cal-heatmap-with-gopherjs/master/src/client/

and codes here.

https://github.com/baram204/cal-heatmap-with-gopherjs/blob/master/src/client/main.go