numbers are too long to show correctly in highcharts/javascript

Question

I have a weird question:

The series1 variable is an array of date-times, which are too long. Because of this, the chart cannot display correctly. However, if I change series1 to make it contain the values of series2. It will work correctly. Can you let me know what I should do?

Also, how can I get each value in series1 shown as a date? suppose it is a variable from flask {{series1}}. thank you.

    $(function () { 

        var series1 = [1489298400000L, 1492923600000L, 1492318800000L, 1480226400000L, 1494133200000L, 1490504400000L, 1488088800000L, 1475384400000L, 1493528400000L, 1491109200000L, 1480831200000L, 1471755600000L]
        var series2 = [1, 7, 2, 1, 4, 1, 1, 1, 4, 6, 1, 1]
        var series3 = [102, 95, 110, 111, 81, 104, 99, 92, 90, 100, 103, 98]
        var myChart = 
            Highcharts.chart('container', {
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: 'Average Monthly Temperature and Rainfall in Tokyo'
                },
                credits: {
                    text: 'Songhuiming',
                    href: 'http://www.songhuiming.com'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: [{
                    categories: series1,
                    crosshair: true
                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '{value}°C',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: 'Temperature',
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    }
                }, { // Secondary yAxis
                    title: {
                        text: 'Rainfall',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    labels: {
                        format: '{value} mm',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    x: 120,
                    verticalAlign: 'top',
                    y: 100,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                series: [{
                    name: 'Rainfall',
                    type: 'column',
                    yAxis: 1,
                    data: series2,
                    tooltip: {
                        valueSuffix: ' mm'
                    }

                }, {
                    name: 'Temperature',
                    type: 'spline',
                    data: series3,
                    tooltip: {
                        valueSuffix: '°C'
                    }
                }]
            });
    });

How do you expect your output chart to look? – Kamil Kulig Feb 19 '18 at 08:43 — Kamil Kulig, Feb 19 '18 at 08:43

score 1 · Answer 1 · answered Feb 17 '18 at 10:44

About suffix "L" on the end you can read here.

What you need at first to make all items in series1 array be a string, because as it now, you will have an error. Then remove "L" and convert to dates

let series = ['1489298400000L', '1492923600000L', '1492318800000L', '1480226400000L', '1494133200000L', '1490504400000L', '1488088800000L', '1475384400000L', '1493528400000L', '1491109200000L', '1480831200000L', '1471755600000L'];
let series1 = series.map((item) => {
  let date = new Date(parseInt(item.replace("L", ""))));
  return `${date.getMonth()} ${date.getFullYear()}`;
});

numbers are too long to show correctly in highcharts/javascript

1 Answers1