linechart-jqwidgetHigh-comparison

JavaScript performance comparison

Test case created by paulo

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id='chartContainer' style="width: 50%; height: 250px; float: left">
        </div>
<div id="highChart" style="width: 50%; height: 250px; float: right"></div>
<script type="text/javascript">
function highChart() {
          $('#highChart').highcharts({
                title: {
                    text: 'Population Growth'
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    data: [{
                        name: "Asia",
                        y: 53.8
                    }, {
                        name: "Europe",
                        y: 16.1
                    }, {
                        name: "Latin America",
                        y: 11.3
                    }, {
                        name: "Africa",
                        y: 9.6
                    }, {
                        name: "Middle East",
                        y: 5.2
                    }, {
                        name: "North America",
                        y: 3.6
                    }]
                }]
            });
}

function writeChart() {          
          // prepare jqxChart settings
          var settings = {
            source: [{
                        name: "Asia",
                        y: 53.8
                    }, {
                        name: "Europe",
                        y: 16.1
                    }, {
                        name: "Latin America",
                        y: 11.3
                    }, {
                        name: "Africa",
                        y: 9.6
                    }, {
                        name: "Middle East",
                        y: 5.2
                    }, {
                        name: "North America",
                        y: 3.6
                    }],
          title: "Population Growth",
          description: false,
          showBorderLine: false,
          categoryAxis: {
                    axisSize: 'auto',
                    dataField: 'name',
                    showGridLines: true
          },
          seriesGroups: [{
              type: 'line',
              valueAxis: {
                    description: "Name",// Labels do eixo X: pega sempre a primeira column do databind
                    verticalTextAlignment: 'top',
                    gridLinesColor: '#EFEFEF',
                    showGridLines: true
                },
              showLabels: true,
              showLegend: false,
              series: [{
                   dataField: 'y',
                   displayText: 'name'
              }]
       }]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
}
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jqWidget
writeChart();
pending…
highChart
highChart();
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment