0

I trying to create chart with 4 lines from data that comes from server. Data likes this:

[  
      [  

      ],
      [  
         [  
            1467561054626,
            5.625
         ]
         [  
            1468240074898,
            5.625
         ],
         [  
            1468240407929,
            5.625
         ],
         [  
            1468240416132,
            5.625
         ],
         [  
            1468240793293,
            9.758625000000002
         ]
      ],
      [  
         [  
            1468242942684,
            195.1725
         ],
         [  
            1468243836667,
            195.1725
         ],
         [  
            1468243849911,
            195.1725
         ],
         [  
            1468246225600,
            270.1725
         ]
      ],
      [  

      ]
   ]

But if time one of lines is earlier than others, then it's only shows. My code:

var data = [
	[],
[ // referals
  [1467561054626,5.625],[1467561055277,5.625],[1467561055942,5.625],[1467561073180,5.625],		[1467561073628,5.625],[1468240004473,5.625],[1468240074898,5.625],[1468240407929,5.625],		[1468240416132,5.625],[1468240793293,9.758625000000002]
],[ // surveys
  [1468242942684,195.1725],[1468243836667,195.1725],[1468243849911,195.1725],									[1468246225600,270.1725]
],[]
]; // it's request that comes from server
Highcharts.setOptions({
                global: {
                    // timezoneOffset: +1,
                    useUTC: false
                }
            });
            var options = {
                chart: {
                    backgroundColor: 'transparent',
                    style: {
                        fontFamily: 'Roboto',
                        '-webkit-font-smoothing': 'antialiased'
                    },
                    renderTo: document.getElementById("chart"),
                    animation: {
                        duration: 1000
                    }
                },

                rangeSelector : {
                    selected : 1
                },

                title : {
                    text : 'Revenue stats'
                },

                credits: {
                    enabled: false
                },
                colors: [
                    'rgb(0, 144, 197)',
                    '#feb23a',
                    'rgb(255, 68, 134)',
                    '#8dc73f',
                    '#ef5d2c',
                    '#9b56b3'
                ],

                plotOptions: {
                    column: {
                        borderWidth: 0,
                        maxPointWidth: 17
                    },
                    pie: {
                        borderWidth: 0,
                        colors: ['#D1592C', '#DC6900', '#E2A200', '#E8C600', '#97C31B', '#F0F0F0']
                    },
                    series: {
                        lineWidth: 3,
                        marker: {
                            radius: 5,
                            symbol: 'circle',
                            lineWidth: 0,
                            states: {
                                hover: {
                                    lineWidth: 1.5,
                                    lineColor: 'rgba(255,255,255,0.62)',
                                    radius: 6
                                }
                            }
                        }
                    }
                },
                xAxis: {
                    gridLineWidth: 0,
                    gridLineColor: "#ddd",
                    gridLineDashStyle: "longdash",
                    labels: {
                        style: {
                            color: '#ACACAC'
                        }
                    },
                    tickWidth: 0,
                    lineWidth: 0,
                    type: 'datetime',
                },
                yAxis: {
                    gridLineWidth: 1,
                    gridLineColor: "#ddd",
                    gridLineDashStyle: "longdash",
                    labels: {
                        style: {
                            color: '#ACACAC'
                        }
                    }
                },

                series : [{
                    name : '1 Referals',
                    data : []
                }, {
                    name : 'Referals',
                    data : []
                }, {
                    name : 'Surveys',
                    data : []
                }, {
                    name : 'Offers',
                    data : []
                }]
            };

            window.chart = new Highcharts.StockChart(options);

            setTimeout(() => chart.reflow(), 100); // resize at load
						(function (data) { // emulating server request
            	for (var index in data) chart.series[index].setData(data[index]);
            })(data);
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="chart"></div>

or JSFiddle

Try scroll time period and you can see how sharply draws "Surveys" line.

How get enter image description here Instead of enter image description here

6
  • in primary investigation,its seems there is no data for that datetime..Is It ?
    – Sagar R
    Jul 13, 2016 at 12:58
  • @Sagar R yes, but i can't edit data in backend
    – blits
    Jul 13, 2016 at 13:00
  • in a first chart,its showing perfect right ? so how you have done that ? with hardcoded data ?
    – Sagar R
    Jul 13, 2016 at 13:04
  • I manually edit array and add missed data
    – blits
    Jul 13, 2016 at 13:19
  • I am not sure I understand what the question is exactly. It seems, at the moment, to be "how do I plot data that isn't there?" Where would the values in your first image come from, if not from the data itself? You need to clearly define what you want to plot, and process your data accordingly
    – jlbriggs
    Jul 13, 2016 at 13:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.