简体   繁体   中英

How to display a highchart with more than one line?

I am having a list name aaa. It is an list of list

aaa[0] = [[{'a',1},{'b',2}]

aaa[1] = [[{'q',2},{'bd',0}]

aaa[2] = [[{'sa',3},{'bs',6}]

aaa[2] = [[{'sa',5},{'vb',8}]

I got the response from the model

Now I need to populate this value into Chart My Chart will contain four lines for aaa[0] , aaa[1] , aaa[2] , aaa[3]

Here is my High Chart Code

<script>
    $(document).ready(function () {

        //Default time zone
        moment.tz.setDefault("America/New_York");

        // Global option to disable UTC time usage
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        // Chart configurations
        var options = {
            chart: {
                renderTo: 'container2',
                type: 'area',
                marginRight: 45,
                zoomType: 'x'
            },
            title: {
                text: 'aaaa'
            },
            xAxis: {

                type: 'datetime',
                minRange: 8 * 24 * 3600000,
                labels: {
                    format: '{value:%m-%d-%Y}',
                    rotation: 45

                }


            },
            yAxis: {
                title: {
                    text: 'count'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },

            plotOptions: {
                area: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    },
                    lineWidth: 1,
                    threshold: null
                }
            },
            series: [{
                fillOpacity: 0.1,
                name: 'aaa',
                pointInterval: 24 * 3600 * 1000,
                pointStart: 1375295400000,
                data: GetPercentage()

            }]
        };

        // Rendering the Highcharts
        chart = new Highcharts.Chart(options);


         function GetPercentage() {

            var data = @Html.Raw(JsonConvert.SerializeObject(Model.aaa));

            //  alert(data)

            @foreach(var val in Model.aaa) //loop of getting a list from aaa
            {

                     var percentages = [];


                for (var x = 0; x < @val.Count; x++)
                {                                 
                     //Here I need to push the list 

                }
                //percentages.sort(SortByDate);
                // return percentages;
            }
        }

        //Sort the array based on first array element
        function SortByDate(a,b){
            //alert(a[0] +" - " +b[0]);
            return (a[0] - b[0]);
        }


        //Timeout function to reload page on everyone hour
        setTimeout(function () {
            location.reload(true);
        }, 60* 60 * 1000);

        //Progress bar to display feed delivery percentage
        $('.progress .progress-bar').progressbar({
            transition_delay: 500,
            display_text: 'fill',
            refresh_speed: 500
        });
    });
</script>

Could anyone help me to diplay a chart with four lines ?

Thanks in advance

Here you can see the series is an object array

$(function () { 
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

});

You should add more objects into series array to create more than one line.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM