jQuery UI Widgets Forums Chart Series not being plotted

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 10 years, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Series not being plotted #45864

    gduarte
    Participant

    Hello you all!

    I am trying to plot some data using a jqxChart but I’m having a trouble… The series I want to plot, only the first on is being inserted into the graph. I got the following code, it’s based on the examples:

    // prepare the data

    //var json_str;// = “[{\”name\” : \”Date\”}, {\”name\” : \”S&P 500\”},{\”name\” : \”NASDAQ\”}]”;
    var fields;

    $.ajax({
    async: false,
    type: “GET”,
    url: “/posto/tools/getbicosgraph/15”,
    success : function(data) {
    fields = $.parseJSON(data)
    }
    });
    console.log(fields[1][“serie_vals”]);
    console.log(fields[0][“serie_names”]);
    //var json_src = $.parseJSON(fields);
    var data = fields[1][“serie_vals”];

    var source =
    {
    datatype: “json”,
    datafields: fields[0][“serie_names”],
    localdata: data,
    url: “/posto/tools/getbicosgraph/15”,
    async: false
    };

    console.log(source);

    var dataAdapter = new $.jqx.dataAdapter(source);//, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

    var months = [‘Jan’, ‘Fev’, ‘Mar’, ‘Abr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Set’, ‘Out’, ‘Nov’, ‘Dez’];

    // prepare jqxChart settings
    var settings = {
    title: “U.S. Stock Market Index Performance (2011)”,
    description: “NASDAQ Composite compared to S&P 500”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 10, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    // source: dataAdapter,
    source: data,
    // source: source,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘Date’,
    formatFunction: function (value) {
    return months[value.getMonth()];
    },
    type: ‘date’,
    baseUnit: ‘month’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: true,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    valuesOnTicks: false
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘spline’,
    toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
    if (serie.dataField == “NASDAQ”) {
    serie.toolTipLineColor = ‘#2B8C3F’;
    serie.toolTipBackground = ‘#2B8C3F’;
    }
    else {
    serie.toolTipLineColor = ‘#2190C4’;
    serie.toolTipBackground = ‘#2190C4’;
    }
    //console.log(value);

    return ‘<DIV style=”padding: 5px; font-weight: bold; color: #fff; text-align:left”>’ + dataAdapter.formatDate(categoryValue, ‘f’) + ‘ – ‘ + dataAdapter.formatNumber(value, ‘f’) + ‘</DIV>’;
    },
    valueAxis:
    {
    unitInterval: 500,
    minValue: 0,
    maxValue: 3000,
    displayValueAxis: true,
    description: ‘Daily Closing Price’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888′
    },
    //series: //[
    //{ dataField: ’06’, displayText: ’06’ },
    //{ dataField: ’04’, displayText: ’04’ },
    //{ dataField: ’05’, displayText: ’05’ },
    //{ dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ }
    //]
    series: fields[0][“serie_names”].slice(1)
    //]
    }
    ]
    };

    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);

    });

    The code consumes the following json:

    [{ “serie_names” : [ { “dataField” : “Date”}, { “dataField” : “06”, “displayText” : “06” },{ “dataField” : “05”, “displayText” : “05” },{ “dataField” : “04”, “displayText” : “04” }] }, {“serie_vals” : [ { “Date” : “10/15/13,12:12:12”, “06” : “1001990.0”,”05″ : “15792.0”,”04″ : “15072.0” }, {“Date” : “11/27/13,14:07:59”, “06” : “0.0”,”05″ : “15792.0”,”04″ : “15072.0” }, {“Date” : “11/27/13,14:08:01”, “06” : “0.0”,”05″ : “15792.0”,”04″ : “15072.0” }] } ]

    The problem is that only the “06” is being plotted 🙁

    http://imgur.com/5blQqoR

    Idea about what’s happening?

    Any help is appreciated 🙂

    Cheers

    Series not being plotted #45908

    Dimitar
    Participant

    Hello gduarte,

    This happens because the properties maxValue and unitInterval are not set to comply the data in the source. Please try setting them this way:

    unitInterval: 50000,
    maxValue: 1100000,

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Series not being plotted #45927

    gduarte
    Participant

    Dimitar, REALLY THANKS! 😀

    It worked fine!!

    Thank you very much!!

    Cheers,
    Gabriel

    Series not being plotted #45995

    gduarte
    Participant

    Sorry for annoying you again, but I realized that only 2 of 3 series are being plotted and I got no idea why. The last one is being ignored. Any ideas?

    Cheers

    • This reply was modified 10 years, 7 months ago by  gduarte.
    Series not being plotted #46023

    Dimitar
    Participant

    Hi gduarte,

    It is possible that the third deries cannot be seen, because its data points are too close to the ones of the second series.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Series not being plotted #46035

    gduarte
    Participant

    Hmmm I see… Is there a way to select the serie I want in front?

    Series not being plotted #46053

    Dimitar
    Participant

    Hi gduarte,

    You can do this by reordering the series in the series array. E.g.:

    from:

    series: [
            { dataField: 'HPI', displayText: 'Real Home Price Index' },
            { dataField: 'BuildCost', displayText: 'Building Cost Index' }
        ]

    to:

    series: [
            { dataField: 'BuildCost', displayText: 'Building Cost Index' },
            { dataField: 'HPI', displayText: 'Real Home Price Index' }
        ]

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.