Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I put categories in highcharts?

    Hi all friends

    I have a problem I want to put in highcharts category and is dynamically

    I have an array with names like the Aryeh Data1 defines the category to dynamically put in highcharts

    I put my code

    http://upload.ugm.ac.id/733WebApplication2.zip

    Thank you

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <title></title>  
     
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/v2.1.9/js/highcharts.src.js"></script>
            <script>
                    var data0 = [10, 5, 95, 30, 4, 33, 90, 80, 42, 14, 17];
                    var data1 = ['02:59:27', '02:59:41', '02:59:49', '02:59:58', '03:00:06', '03:00:14', '03:00:23', '03:00:32', '03:00:39', '03:00:47'];
                    setInterval(function (data1) {
                            var cats = chart.xAxis[0].categories;
                            cats.push(data1);
                            chart.xAxis.setCategories(data1, false);
                            chart.series[0].addPoint(Math.floor((Math.random() * 100) + 1), true, true);
                    }, 2000);
                    $(function () {
                            //chart.xAxis[0].setCategories(['One', 'Two', 'Three', 'four', 'One', 'Two', 'Three', 'four', 'One', 'Two', 'Three']);
                            chart = new Highcharts.Chart({
                                    chart: {
                                            renderTo: 'chart',
                                            zoomType: 'x',
                                            defaultSeriesType: 'areaspline'
                                    },
                                    legend: {
                                            layout: 'vertical',
                                            align: 'right',
                                            verticalAlign: 'top',
                                            borderWidth: 0
                                    },
                                    title: {
                                            text: 'Online Users',
                                            x: -20 //center
                                    },
                                    xAxis: {
                                            categories: cats,
                                            labels: {
                                                    rotation: -45,
                                                    style: { color: '#000' }
                                            },
                                            tickInterval: 25
                                    },
                                    yAxis: {
                                            title: {
                                                    text: 'Count'
                                            },
                                            plotLines: [{
                                                    value: 0,
                                                    width: 1,
                                                    color: '#808080'
                                            }]
                                    },
                                    series: [
                    
                                     {
                                             name: 'WLAN TX',
                                             data: data0
                                             , lineWidth: 1
                                     },
                                    ]
                               , plotOptions: {
                                       //series: {
                                       //   stacking: null
                                       //},
                                       areaspline: {
                                               marker: {
                                                       enabled: false,
                                                       symbol: 'circle'
                                               }
                                       }
                                       , spline: {
                                               marker: {
                                                       enabled: false,
                                                       symbol: 'circle'
                                               }
                                       }
                               }
                            });
                    });
            </script>
    </head>
    <body>
            <div id="chart"></div>
    </body>
    </html>
    I'm arrays Datta 1 in category chart view to dynamically
    var data1 = ['02:59:27', '02:59:41', '02:59:49', '02:59:58', '03:00:06', '03:00:14', '03:00:23', '03:00:32', '03:00:39', '03:00:47'];


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •