Create update_datasets.go

mcdoyaji commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

and. I try your suggestion.

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(업데이트값)
    })

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

cnguy / gopherjs-frappe-charts

Create update_datasets.go #8