Welcome Guest Search | Active Topics |

jqChart rendering incorrectly - x-axis labels all over the place.
Options
Previous Topic Next Topic
gbjake
#1 Posted : Thursday, August 7, 2014 5:16:36 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Screenshot of issue:



Code:

Code:


$.ajax({
                url: 'http://XXXXXXXXXXXXXXXXX:8081/appServer/gbReader/Session/cpuinfo/<?php echo $hash;?>/',
                dataType: 'json',
                async: false,
                success: function(data) {
                        window.numCores = data.numCores;
                        genChart();
                }
        });


function genChart() {
                        $('#cpucchartdiv').jqChart({
                                title: { text: 'CPU Core Usage', font: '18px sans-serif' },
                                axes: [
                                      {
                                              type: 'linear',
                                              location: 'bottom',
                                              zoomEnabled: true
                                      }
                                ],
                                border: { strokeStyle: '#6ba851' },
                                background: '#FFFFFF',
                                tooltips: {
                                      type: 'shared'
                                },
                                crosshairs: {
                                        enabled: true,
                                        hLine: false,
                                        vLine: { strokeStyle: '#cc0a0c' }
                                },
                                series: []
                        });
                        setupChart();
}

function setupChart() {
        var y = 0;
        var series = $('#cpucchartdiv').jqChart('option', 'series');
        while(y<window.numCores) {
                $.ajax({
                        url: 'http://XXXXXXXXXXXXX:8081/appServer/gbReader/Session/coresusage/<?php echo $hash;?>/'+y+'/',
                        dataType: 'json',
                        async: false,
                        success: function(data2) {
                                        window["core"+y] = data2;
                                        var newSeries = {
                                                type: 'line',
                                                data: window["core"+y],
                                                xValuesField: {
                                                        name: 'timestamp',
                                                        type: 'numeric'
                                                },
                                                yValuesField: {
                                                        name: 'coreUsage',
                                                        type: 'numeric'
                                                }
                                        }
                                        console.log(newSeries);
                                        series.push(newSeries);
                        }
                });
        y++;
        }
        $('#cpucchartdiv').jqChart('update');

}


Data Example:

Code:

[{"id":5419954,"coreNumber":0,"coreUsage":60.6383,"timestamp":2},{"id":5415915,"coreNumber":0,"coreUsage":42.22222,"timestamp":3},{"id":5423837,"coreNumber":0,"coreUsage":42.22222,"timestamp":4}]


I'm using the 30-day trial right now to see if I can replace amCharts with jqChart - and from everything I've seen, it looks like I can, except for this issue. Any help would be appreciated.
Back to top
Dragan
#2 Posted : Thursday, August 7, 2014 6:05:29 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You need to set your data to the "dataSource" like in this example:
http://www.jqchart.com/jquery/chart/ChartData/BindingDataSource

Try changing your code to this:
Code:

  $.ajax({
            url: 'http://XXXXXXXXXXXXXXXXX:8081/appServer/gbReader/Session/cpuinfo/<?php echo $hash;?>/',
            dataType: 'json',
            async: false,
            success: function (data) {
                window.numCores = data.numCores;
                genChart();
            }
        });


        function genChart() {
            $('#cpucchartdiv').jqChart({
                title: { text: 'CPU Core Usage', font: '18px sans-serif' },
                axes: [
                      {
                          type: 'linear',
                          location: 'bottom',
                          zoomEnabled: true
                      }
                ],
                border: { strokeStyle: '#6ba851' },
                background: '#FFFFFF',
                tooltips: {
                    type: 'shared'
                },
                crosshairs: {
                    enabled: true,
                    hLine: false,
                    vLine: { strokeStyle: '#cc0a0c' }
                },
                series: [
                    {
                        type: 'line',
                        xValuesField: {
                            name: 'timestamp',
                            type: 'numeric'
                        },
                        yValuesField: {
                            name: 'coreUsage',
                            type: 'numeric'
                        }
                    }
                ]
            });
            setupChart();
        }

        function setupChart() {
            var y = 0;
            while (y < window.numCores) {
                $.ajax({
                    url: 'http://XXXXXXXXXXXXX:8081/appServer/gbReader/Session/coresusage/<?php echo $hash;?>/' + y + '/',
                    dataType: 'json',
                    async: false,
                    success: function (data2) {
                        window["core" + y] = data2;

                        $('#cpucchartdiv').jqChart('option', 'dataSource', window["core" + y]);

                    }
                });
                y++;
            }
            $('#cpucchartdiv').jqChart('update');
        }

and let me know if it is working.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
gbjake
#3 Posted : Thursday, August 7, 2014 6:15:11 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Dragan,

Thanks for the quick response, below is an image of what appears now.



The issue is that I have up to 16 different datasets, for which I'll need a line for each. That's why I had tried to generate the series and select the data for each series as opposed to a single dataset for the entire chart. I was attempting to utilise the functionality I saw here:

Dynamic jqChart Series

Any ideas? I can provide you with access to the page itself if you'd like.
Back to top
Dragan
#4 Posted : Thursday, August 7, 2014 6:23:33 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
In this case you can convert the data yourself with a function like:

Code:
        function convertData(data) {

            var seriesData = [];

            for (var i = 0; i < data.length; i++) {
                var item = data[i];

                seriesData.push(
                    [item.timestamp, item.coreUsage]
                );
            }

            return seriesData;
        }


and after that adding a new series can be done with:
Code:
window["core" + y] = data2;
                        var newSeries = {
                            type: 'line',
                            data: convertData(window["core" + y])
                        }
                        console.log(newSeries);
                        series.push(newSeries);
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
gbjake on 8/7/2014(UTC)
gbjake
#5 Posted : Thursday, August 7, 2014 6:24:49 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Ah - that's what I'm having to do with amCharts as well - I'll see what the performance differences are, and go from there. Thanks for all your help :)
Back to top
Dragan
#6 Posted : Thursday, August 7, 2014 7:06:40 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Can you inform us how is our performance compared to theirs, once you check it?
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
gbjake
#7 Posted : Thursday, August 7, 2014 7:32:26 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Dragan,

So, it appears that you guys are faster for initialisation, though usage after initialisation is about the same for most data sources. Huge data sources such as the chart that I'm working on now (up to 16 lines of around 50K points), you guys appear to be faster.

The only other thing is that there are more features with amCharts in regards to:

-Setting default zoom level for long datasets
-Allowing me to use strings for series xValueField/tick display ("00:01", "00:02")
-I can bind to data updates and redraw only after all the data has been inserted

Those are rather important points for this project, so if I've missed them in the documentation and you could point me to them, that would be awesome.
Back to top
Dragan
#8 Posted : Thursday, August 7, 2014 7:56:25 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Quote:
-Setting default zoom level for long datasets

- You can use visibleMinimum/visibleMaximum options like in this example:
http://www.jqchart.com/jquery/chart/ChartAxes/AxisZooming
Quote:
-Allowing me to use strings for series xValueField/tick display ("00:01", "00:02")

- Can you show me an example of this?
Quote:
-I can bind to data updates and redraw only after all the data has been inserted

- If you have something like:

Code:
var data = [...];
....

series: [
{
     data : data
},...


you can change some of the data points and update the chart:

Code:
data[2] = [2, 3];
$('#cpucchartdiv').jqChart('update');


Best Regards,
Dragan Matek
jqChart Inc.
Back to top
gbjake
#9 Posted : Thursday, August 7, 2014 8:13:31 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Dragan,

Ah - zoom is working properly now (I was using actualVisibleMin/Max instead of just visibleMin/Max).

For the string tick example:




I understand about the $.jqChart('update') method, but I'm wondering if there is any way that I can tell that all the data has been pushed, as I'm adding the series asynchronously.

-Jake


EDIT:

PS: I've got the update working properly - if you can get me the string ticks then I'll be buying a license sometime in the next 48 hours.
Back to top
 |  Edit by user
Dragan
#10 Posted : Thursday, August 7, 2014 9:42:57 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
When you have big data sets it is better to remove the line markers. This will optimize the performance:
http://www.jqchart.com/jquery/chart/ChartPerformance/LineChart

You can use string x-axis values with this option:
Code:
                axes: [
                    {
                        location: 'bottom',
                        labels: {
                            resolveOverlappingMode: 'hide'
                        }
                    }
                ],..


http://www.jqchart.com/docs/jquery/#!/api/Common.AxisLabels-cfg-resolveOverlappingMode
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
gbjake
#11 Posted : Thursday, August 7, 2014 9:55:48 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Dragan,

Thanks for the tip - I picked up on that while I was toying with the Update method and implemented it.

This is what I get when I use the resolveOverlap:



I'm wondering if stringFormat would allow me to do this, but the documentation for it doesn't provide any examples that I could use for this.
Back to top
gbjake
#12 Posted : Thursday, August 7, 2014 10:08:55 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 8/7/2014(UTC)
Posts: 7

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
I got it - had to remove the "type: linear" line.

Once I get a purchase order finished then I'll be buying the license :)

Thanks so much for your help, you've just made my life a LOT easier.
Back to top
Users browsing this topic
Guest (5)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.173 seconds.