asantibanez / livewire-charts

Neat Livewire Charts for your Laravel projects
MIT License
804 stars 120 forks source link

MultiColumn is not grouping correctly #116

Open dfurda18 opened 8 months ago

dfurda18 commented 8 months ago

Describe the bug This is an issue I've found when trying to set a multi column chart. It is an error of rendering the chart since the chart data seems to be fine. When it is rendering, it groups some series into one replacing the title.

To Reproduce Steps to reproduce the behavior:

  1. Create a Column chart with different seriesNames, titles and value. In my example I am populating my chart with:
    $chartModel->addSeriesColumn('Male', 'ArchitecturalGlassandMetalTechnician', 1);
    $chartModel->addSeriesColumn('Male', 'Not specified', 1);
    $chartModel->addSeriesColumn('Female', 'AgriculturalEquipmentTechnician', 1);
    $chartModel->addSeriesColumn('Prefer not to disclose', 'AboriginalChildPractitioner', 3, $color);
    $chartModel->addSeriesColumn('Prefer not to disclose', 'Not specified', 5, $color);
  2. Display the Chart

Expected behavior The chart should group differently those with ArchitecturalGlassandMetalTechnician, AgriculturalEquipmentTechnician, AboriginalChildPractitioner Instead, it is grouping them together and replacing the title with ArchitecturalGlassandMetalTechnician

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Solution Ideas My guess is in multiColumnChart.js at lines 37-40 it is defaulting the series with the first element. charts_data charts_graph

ZayRTun commented 8 months ago

I am having the same issue with multiLine chart. Is there a way to work around this?

sylfel commented 6 months ago

Hello

I think you need null value in your serie colum :

            ->addSeriesColumn('Male', 'ArchitecturalGlassandMetalTechnician', 1)
            ->addSeriesColumn('Male', 'AgriculturalEquipmentTechnician', null)
            ->addSeriesColumn('Male', 'Not specified', 1)
            ->addSeriesColumn('Female', 'ArchitecturalGlassandMetalTechnician', null)
            ->addSeriesColumn('Female', 'AgriculturalEquipmentTechnician', 1)
            ->addSeriesColumn('Female', 'Not specified', null)
            ->addSeriesColumn('Prefer not to disclose', 'ArchitecturalGlassandMetalTechnician', null)
            ->addSeriesColumn('Prefer not to disclose', 'AgriculturalEquipmentTechnician', 3)
            ->addSeriesColumn('Prefer not to disclose', 'Not specified', 5);

image

Or


            ->addSeriesColumn('ArchitecturalGlassandMetalTechnician', 'Male', 1)
            ->addSeriesColumn('AgriculturalEquipmentTechnician', 'Male', null)
            ->addSeriesColumn('Not specified', 'Male', 1)
            ->addSeriesColumn('ArchitecturalGlassandMetalTechnician', 'Female', null)
            ->addSeriesColumn('AgriculturalEquipmentTechnician', 'Female', 1)
            ->addSeriesColumn('Not specified', 'Female', null)
            ->addSeriesColumn('ArchitecturalGlassandMetalTechnician', 'Prefer not to disclose', null)
            ->addSeriesColumn('AgriculturalEquipmentTechnician', 'Prefer not to disclose', 3)
            ->addSeriesColumn('Not specified', 'Prefer not to disclose', 5);

image