Number of legends per page on pagination in Highcharts

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• mysql return 360 degrees returned with strengths

  I have a table of wind directions and strengths over a 24 hour period, sample data at the bottom of this question.

  only directions that have strengths are stored in the database, I'm currently using the following SQL:

  SELECT winddirection, avespeed 
  FROM  wp_weather_data 
  WHERE ID%10 = 0 
  

  what I would like to return is an entry for every degree (0 value for any degree not in the db) and where there are multiple entries for a given degree to only return the highest value. Oh, and they need to be in ascending order of degrees.

  Is this possible?

  This is so I can plot a wind distribution chart on a polar chat plugin in WordPress.

  sample data returned from the above sql:

  294 2
  271 3
  269 2
  285 3
  289 2
  123 1
  130 1
  144 1
  160 0
  168 0
  161 0
  135 0
  138 0
  331 0
  115 0
  136 0
  161 0
  267 0
  114 0
  265 0
  204 0
  248 1
  206 0
  199 1
  250 2
  244 3
  257 3
  272 5
  267 5
  208 3
  221 3
  223 4
  253 6
  233 5
  
• FusionCharts/FusionTime stepline chart leaves off data points and binning aggregation distorts the data

  I'm trying to reproduce a Pillow app timeline chart using FusionTime. Pillow tracks sleep quality and the different sleep stages using Apple Watch. The following is an example chart:

  example Pillow chart

  From the app you can export a json file with the data points. For example:

  "sleepStageDataPoints": [
      {
          "stage": 1,
          "timeStamp": 673239278.32947648
      },
  

  `Stage legend: 0=Deep, 1=Light, 2=REM, 3=Awake

  I import the data into mysql, converting the Unix time in the process. I also increment the stage number so that Deep=1, etc., because the axis would be 0 in FusionTime.

  So there is a start time and the level of the stage at that time, which remains the level until the next timestamp data point where the stage would change, etc.

  Besides this metric, there will be other health related metrics I plan to capture that will model the data in a similar way. Only the starting time and the level at that time, which should remain the same until the next data point.

  So that's the general plan. Now the problems...

  I'm having trouble figuring out the best way. I think stepline would be the best chart type for this source data. I'm not expecting to be able to have the different stages have different colors. Just being able to see the height differences is sufficient.

  But FusionTime doesn't show all of the data points and the ones it does show don't seem to be accurate. I'm blaming data binning.

  FusionTime chart

  As you can see the first point charted is on May 3rd, 12:24-12:26. But there are 5 data points from May 2nd that it just leaves off. I don't know why. And as you can see from comparing the two charts, the patterns don't match. For instance at 1am the Fusion chart says the level would be REM (3), but if you look at the Pillow chart, it would have to be either Deep (1) or Light (2). Looking at the data points in the database confirms that.

  So it has to be the data binning aggregation that is changing the chart. I've tried every aggregation other than average and none of them makes a difference.

  I'd like for the data to be 100% time accurate. I want to see every datapoint and not have the first ones disappear. If I mouse over 1am I should see the correct stage level for that time. As I zoom in or out, I'd like the columns to get more wide/narrow as appropriate, but the height should never be wrong. If I zoom too far out, I'd rather the data disappear than be wrong. I'd be fine to lock the zoom level if necessary, not that I know how to.

  Is this possible with FusionCharts/FusionTime? Would there be a better chart type to accomplish what I'm trying to do? Is there a different charting software that would do this? I want to use FusionTime, because I want to have the multivariate charts to compare multiple metrics along the same timeline. And I do want to be able to zoom in and out because other metrics I'm tracking wouldn't be limited to this time frame. So I need to be able to zoom/scroll through the entire day.
• Use an array as chart values

  I need an array with chart values, I obtained one but after exiting from the function it became blank, here's what happens: Example

      function AddvotoTec(votor) {
        class Avg {
          constructor() {}
          static average(votor) {
            var total = 0;
            var count = 0;
            jQuery.each(votor, function(index, value) {
                  total += value;
                  count++;
            });
            return total / count;
          }
        }
        var mvoti = Avg.average(votor);
        var mvoti = Math.round((mvoti + Number.EPSILON) * 10) / 10;
        const myJSON = JSON.stringify(mvoti);
        voti(myJSON);
      }
      
      var allvoti = [];
      function voti(Voti) {
        allvoti.push(Voti);
      }
      
    const data = {
      labels: labels,
      datasets: [{
        label: 'My First dataset',
        backgroundColor: [
          'rgb(255, 132, 0)'
        ],
        borderColor: 'rgb(255, 99, 132)',
        data: allvoti,
      }]
    };
  

  The chart that I used is Chart.js.
• R efficient Drilldown chart with loop using Highchart

  I bring you a problem in which I have found myself when doing a job. I need to perform a 'drilldown' that contains around 100 columns and I am running into an efficiency issue. The data set contains the years from 1913 to 2021.

  # Load packages
  library(tidyverse)
  library(lubridate)
  library(highcharter)
  

  # Example Data Frame
  df <- data.frame(year = c('1913-01-01',
                            '1913-01-02',
                            '1913-01-03',
                            '1913-01-04',
                            '1913-01-05',
                            '1913-01-06',
                            '1913-01-07',
                            '1913-01-08',
                            '1913-01-09',
                            '1913-01-10',
                            '1913-01-11',
                            '1913-01-12',
                            '1914-01-01',
                            '1914-01-02',
                            '1914-01-03',
                            '1914-01-04',
                            '1914-01-05',
                            '1914-01-06',
                            '1914-01-07',
                            '1914-01-08',
                            '1914-01-09',
                            '1914-01-10',
                            '1914-01-11',
                            '1914-01-12'),
                   value = 1:12)
  

  I need to create a drilldown where the average of the values in each year are shown, in this example they would be only 2 but in the original data frame there would be around 100 columns that should be shown in the graph

  The way I can think of is the following:

  df1913 <- df %>%
    filter(year(year) == 1913) %>%
    data.frame()
  
  df1914 <- df %>%
    filter(year(year) == 1914) %>%
    data.frame()
  

  dfDD <- tibble(name = year(df$year),
                 y = mean(df$value),
                 drilldown = substr(name, 1, 4))
  

  I would have to repeat this code for each data frame I would need to create and I recognize that it is not efficient.

  Example:

  highchart() %>%
    hc_chart(type = "column") %>%
    hc_title(text = "Example Drilldown") %>%
    hc_xAxis(type = "category") %>%
    hc_legend(enabled = FALSE) %>%
    hc_plotOptions(series = list(boderWidth = 2,
                                 dataLabels = list(enabled = TRUE))) %>%
    hc_add_series(data = dfDD,
                  name = "Mean",
                  colorByPoint = TRUE) %>%
    hc_drilldown(allowPointDrilldown = TRUE,
                 series = list(list(id = "1913",
                                    data = list_parse2(df1913)),
                               list(id = '1914',
                                    data = list_parse2(df1914))))
  

  UPDATE: May 07, 2022

  EDIT:

  It was necessary for me to reformulate my question since I have expressed myself in an incorrect way and that is why I did not get the answer to my main problem. First of all I thank everyone who has read and commented on his opinion about my problem.

  Reformulated question:

  I need to create a 'drilldown' style chart. My original dataset has only 2 columns: date value For each year I have 12 values ​​(1 for each month of the year). The problem is that the data set has the years from 1913 to 2021 registered in the 'years' column. It would be around 1300 rows. If I don't count wrong, it's 109 years where each year has 12 values ​​and only the year 2021 has 7.

  In the way that I had explained before, my way of solving the problem was inefficient and very long. Having to create a data frame for each subset of the year would be tedious and I would have more than 100 data frames created.

  Is there a more efficient way to solve my problem!? If so, could you explain it to me with an example? Thank you very much and sorry for expressing myself poorly at first.

  Data Source
• Add extra labels to line charts

  I have a line chart that has 100 points on X Axis, each 25 points need to be labels separately. Its like there are 4 rectangles in the chart conceptually each covering 25 points. How can i put a label in this example on each rectangle. I have not found anything in the API that seems to support this.
• Convert HighCharts .Net Core 2.1 Application to .Net 5

  I am trying to use HighCharts in a .Net5 Application. All of the examples that they provide appear to be written for .Net Core 2.1. As an example, here is the code that HighSoft provides for creating a bubble chart. I pasted this into my view. I added the appropriate code in my controller. I added the HighSoft.HighCharts and Newtonsoft.Json packages thru Nuget.

  @using Highsoft.Web.Mvc.Charts;
  @using Highsoft.Web.Mvc.Charts.Rendering;
  
  <h1>@ViewData["Title"]</h1>
  <div>
      @{ var chartOptions = new Highcharts
          {
              Chart = new Highsoft.Web.Mvc.Charts.Chart
              {
                  ZoomType = ChartZoomType.Xy
              },
              Title = new Title
              {
                  Text = "Highcharts Bubbles"
              },
              Series = new List<Series>
              {
                  new BubbleSeries
                  {
                      Data = @ViewData["bubble1"] as List<BubbleSeriesData>
                  },
                  new BubbleSeries
                  {
                      Data = @ViewData["bubble2"] as List<BubbleSeriesData>
                  },
                  new BubbleSeries
                  {
                      Data = @ViewData["bubble3"] as List<BubbleSeriesData>
                  }
              }
          };
       chartOptions.ID = "chart";
       var renderer = new HighchartsRenderer(chartOptions);
       }
  
      @Html.Raw(renderer.RenderHtml())
  </div>
  

  Under .Net Core 2.1, there are no errors. When I switch to .Net5 (or .Net Core 3.1 for that matter). the following lines throw errors:

  Data = @ViewData["bubble1"] as List<BubbleSeriesData>
  Data = @ViewData["bubble2"] as List<BubbleSeriesData>
  Data = @ViewData["bubble3"] as List<BubbleSeriesData>
  

  Intellisense is telling me "The BubbleSeriesData element was not closed. All elements must be self closing or having a matching end tag.

  How do I change those lines so they work in .Net5?