jQuery UI Widgets Forums Chart Unable to Bind JSON Data with Stacked Line Series Chart

This topic contains 15 replies, has 3 voices, and was last updated by  Dimitar 8 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author

  • fresher
    Participant

    I have a JSON Data as below

    [
    {
    “SiteId”: “1”,
    “Year”: “2012”,
    “Amount”: “15.80004”,
    “Percentage”: 0.00007517660185636339
    },
    {
    “SiteId”: “2”,
    “Year”: “2012”,
    “Amount”: “104217.14068”,
    “Percentage”: 0.495865231449349
    },
    {
    “SiteId”: “2”,
    “Year”: “2013”,
    “Amount”: “1265527.14610”,
    “Percentage”: 6.021379085165576
    },
    {
    “SiteId”: “2”,
    “Year”: “2014”,
    “Amount”: “1071990.91208”,
    “Percentage”: 5.100533542388375
    },
    {
    “SiteId”: “3”,
    “Year”: “2014”,
    “Amount”: “537846.80100”,
    “Percentage”: 2.5590754718656226
    }

    In X axis I would like to have Year and in Y axis Amount
    charts for different sites eg: for siteid “1” one graph I mean a coloured line and siteid 2 another colured line

    I cannot mention like this
    series: [
    { dataField: ‘SiteId’, displayText: ‘SiteID’ }

    because mapping will be between site id’s and year but I want mapping between Year and Amount for different sites

    IF the data is like this:

    [
    {
    “1”: “15.08004”,
    “Year”: “2012”,
    “Percentage”: 0.00007517660185636339
    },
    {
    “2”: “20136.254”,
    “Year”: “2012”,
    “Percentage”: 0.495865231449349
    },
    {
    “3”: “1265527.14610”,
    “Year”: “2013”,
    “Percentage”: 6.021379085165576
    }
    ]

    then I can bind like this:
    series: [
    { dataField: ‘1’, displayText: ‘SiteID’ },
    { dataField: ‘2’, displayText: ‘SiteID’ }
    { dataField: ‘3’, displayText: ‘SiteID’ }
    but thats not the case here !
    Can I bind such type of JSON Data? If Yes , how? and if No what could be the alternative
    Please do the needful as soon as possible

    Thanks in Advance


    Dimitar
    Participant

    Hello fresher,

    The data has to be based around the datafield that will be displayed on the x-axis (“Year”). This means your second approach is more suitable. A correctly set JSON data can be seen used in the example Negative Values.

    If you cannot directly modify the data from your source, you may be able to load it through data adapter and modify it in its beforeLoadComplete callback before finally populating the chart with it.

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Thanks Dimitar, I’m unable to modify the data in beforeloadcomplete call back, any source code or example will help ..!

    Anyway,
    I have given data like this :

    { Year: ‘2010’, site1: 200.3696, site2: 350.369, site3: 350.369 },
    { Year: ‘2011’, site1: 250, site2: 25, site3: 210.369 },
    { Year: ‘2012’, site1: 309, site2: 20, site3: 156.369 },
    { Year: ‘2013’, site1: 459, site2: 25, site3: 453.369 },
    { Year: ‘2014’, site1: 225, site2: 20, site3: 481.369 },
    { Year: ‘2015’, site1: 398, site2: 20, site3: 225.369 },
    { Year: ‘2016’, site1: 607, site2: 45, site3: 300.369 }
    and Series as

    { dataField: ‘site1’, displayText: ‘site1’ },
    { dataField: ‘site2’, displayText: ‘site2’ },
    { dataField: ‘site3’, displayText: ‘site3’ }

    Its working good but…

    I want datafields to be dynamic .

    Does the JQX Charts support dynamic functionality ?

    I want to compare only site1 and site3 and also foe X axis years 2010 and 2012 how can I pass dynamically?

    any source code available? or references would help

    2.Can we Customize these charts with CSS? I have my own custom CSS , Can I control these charts with my custom CSS?

    3. Can we have filters with the charts…

    I’m preparing a sample to demo my stake holders, so solution with source code will do great help
    we are looking forward to buy the license if these charts meet our business needs .
    ASAP

    Thanks in advance..!


    Dimitar
    Participant

    Hi fresher,

    1) Please share several dynamic data results so that we may determine if it is possible to plot the chart dynamically as per your requirements.

    2) You can take a look at the Chart Styling tutorial.

    3) Maybe the functionality you are looking for is the chart range selector?

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Thanks for the quick reply.
    Data from my service will be as below … I have shown earlier for different sites (dynamic)

    [
    {
    “SiteId”: “1”,
    “Year”: “2012”,
    “Amount”: “15.80004”,
    “Percentage”: 0.00007517660185636339
    },
    {
    “SiteId”: “2”,
    “Year”: “2012”,
    “Amount”: “104217.14068”,
    “Percentage”: 0.495865231449349
    },
    {
    “SiteId”: “3”,
    “Year”: “2013”,
    “Amount”: “1265527.14610”,
    “Percentage”: 6.021379085165576
    },
    {
    “SiteId”: “4”,
    “Year”: “2014”,
    “Amount”: “1071990.91208”,
    “Percentage”: 5.100533542388375
    }
    ]

    How can I make the chart dynamic?

    Some times I want to show comparison between 2 sites and some times between 4 charts i.e I can get data from my API for 2 sites ,sometimes 5 sites

    Now if I write

    Series as

    { dataField: ‘site1′, displayText: ‘site1′ },
    { dataField: ‘site2′, displayText: ‘site2′ },
    { dataField: ‘site3′, displayText: ‘site3′ }

    Statically I couldn’t bind data for 5 sites if I get Data for 5 sites.

    Can you help in transforming the datasource using dataadapter? As I have shown the data which I’m receiving from service and the data format jqxcharts are expecting..!


    Dimitar
    Participant

    Hello fresher,

    1) In beforeLoadComplete you have access to the data as it is loaded from the data source. These records are in the form of an array of objects. You can use the common JavaScript methods to transform this array into another one that can be loaded in the chart and return it as a result of beforeLoadComplete. An example can be found in the jqxDataAdapter guide.

    2) You may load all datafields but still show only the series you require by hiding the others with the method hideSerie. You can read more about it in the jqxChart API Documentation.

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Here is my sample data from service

    {
    ResposeType: “xyz”
    Response: [21]
    0: {
    __type: “”
    SiteId: “1”
    Year: “2012”
    Amount: “15.80004”
    Percentage: 0.00007517660185636339
    }-
    1: {
    __type: “”
    SiteId: “2”
    Year: “2012”
    Amount: “104217.14068”
    Percentage: 0.495865231449349
    }-
    2: {
    __type: “”
    SiteId: “2”
    Year: “2013”
    Amount: “1265527.14610”
    Percentage: 6.021379085165576
    }-
    3: {
    __type: “”
    SiteId: “2”
    Year: “2014”
    Amount: “1071990.91208”
    Percentage: 5.100533542388375
    }-
    4: {
    __type: “”
    SiteId: “3”
    Year: “2011”
    Amount: “32521.62347”
    Percentage: 0.15473790821584965
    }-
    5: {
    __type: “”
    SiteId: “3”
    Year: “2012”
    Amount: “631009.18208”
    Percentage: 3.0023421490665636
    }-
    6: {
    __type: “”
    SiteId: “3”
    Year: “2013”
    Amount: “707817.67093”
    Percentage: 3.3677969950964077
    }-
    7: {
    __type: “”
    SiteId: “3”
    Year: “2014”
    Amount: “537846.80100”
    Percentage: 2.5590754718656226
    }-
    8: {
    __type: “”
    SiteId: “4”
    Year: “2011”
    Amount: “3873984.08417”
    Percentage: 18.432419101061555
    }-
    9: {
    __type: “”
    SiteId: “4”
    Year: “2012”
    Amount: “3042441.56889”
    Percentage: 14.475939206210434
    }
    ]

    I’m getting issues in using beforeLoadComplete and binding to chart, a sample code to bind the above data to stacked line chart will be a great help…!


    Dimitar
    Participant

    Hi fresher,

    Before any modifications can be done to your data, it has to be a valid JSON object which can be loaded by jqxDataAdapter, i.e.:

    [{
        ResposeType: "xyz",
        Response: [21],
        0: {
            __type: "",
            SiteId: "1",
            Year: "2012",
            Amount: "15.80004",
            Percentage: 0.00007517660185636339
        },
        1: {
            __type: "",
            SiteId: "2",
            Year: "2012",
            Amount: "104217.14068",
            Percentage: 0.495865231449349
        },
        ...
    }]

    If you can get your data as a valid object, we may be able to assist you in transforming it in beforeLoadComplete.

    Best Regards,
    Dimitar

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


    fresher
    Participant

    I think this is a valid one loaded by jqxDataadapter
    [
    {
    “SiteId”: “1”,
    “Year”: “2012”,
    “Amount”: “15.80004”,
    “Percentage”: 0.00007517660185636339
    },
    {
    “SiteId”: “2”,
    “Year”: “2012”,
    “Amount”: “104217.14068”,
    “Percentage”: 0.495865231449349
    },
    {
    “SiteId”: “2”,
    “Year”: “2013”,
    “Amount”: “1265527.14610”,
    “Percentage”: 6.021379085165576
    },
    {
    “SiteId”: “2”,
    “Year”: “2014”,
    “Amount”: “1071990.91208”,
    “Percentage”: 5.100533542388375
    },
    {
    “SiteId”: “3”,
    “Year”: “2014”,
    “Amount”: “537846.80100”,
    “Percentage”: 2.5590754718656226
    },
    {
    “SiteId”: “3”,
    “Year”: “2012”,
    “Amount”: “375846.80100”,
    “Percentage”: 1.569754718656226
    },
    {
    “SiteId”: “4”,
    “Year”: “2012”,
    “Amount”: “453146.80100”,
    “Percentage”: 1.9790754718656226
    },
    {
    “SiteId”: “4”,
    “Year”: “2014”,
    “Amount”: “416146.80100”,
    “Percentage”: 1.5290754718656226
    }
    ]


    Dimitar
    Participant

    Hi fresher,

    Here is a complete example that shows how to load your data:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var initialData = [{
                    "SiteId": "1",
                    "Year": "2012",
                    "Amount": "15.80004",
                    "Percentage": 0.00007517660185636339
                }, {
                    "SiteId": "2",
                    "Year": "2012",
                    "Amount": "104217.14068",
                    "Percentage": 0.495865231449349
                }, {
                    "SiteId": "2",
                    "Year": "2013",
                    "Amount": "1265527.14610",
                    "Percentage": 6.021379085165576
                }, {
                    "SiteId": "2",
                    "Year": "2014",
                    "Amount": "1071990.91208",
                    "Percentage": 5.100533542388375
                }, {
                    "SiteId": "3",
                    "Year": "2014",
                    "Amount": "537846.80100",
                    "Percentage": 2.5590754718656226
                }, {
                    "SiteId": "3",
                    "Year": "2012",
                    "Amount": "375846.80100",
                    "Percentage": 1.569754718656226
                }, {
                    "SiteId": "4",
                    "Year": "2012",
                    "Amount": "453146.80100",
                    "Percentage": 1.9790754718656226
                }, {
                    "SiteId": "4",
                    "Year": "2014",
                    "Amount": "416146.80100",
                    "Percentage": 1.5290754718656226
                }]
    
                // prepare chart data as an array            
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'SiteId' },
                        { name: 'Year' },
                        { name: 'Amount', type: "number" },
                        { name: 'Percentage', type: "number" }
                    ],
                    localdata: initialData
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
                    beforeLoadComplete: function (records) {
                        newRecords = new Array({ Year: 2012, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2013, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2014, Site1: 0, Site2: 0, Site3: 0, Site4: 0 });
                        for (var i = 0; i < records.length; i++) {
                            var currentRecord = records[i];
                            switch (currentRecord.Year) {
                                case "2012":
                                    newRecords[0]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2013":
                                    newRecords[1]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2014":
                                    newRecords[2]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                            }
                        }
                        return newRecords;
                    },
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Site Amount",
                    description: "by year",
                    showLegend: true,
                    enableAnimations: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    xAxis:
                        {
                            dataField: 'Year',
                            showGridLines: true
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                valueAxis:
                                {
                                    unitInterval: 50000,
                                    displayValueAxis: true,
                                    description: 'Site Amount'
                                },
                                series: [
                                        { dataField: 'Site1', displayText: 'Site 1' },
                                        { dataField: 'Site2', displayText: 'Site 2' },
                                        { dataField: 'Site3', displayText: 'Site 3' },
                                        { dataField: 'Site4', displayText: 'Site 4' }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Yeah thanks a lot…! That helped me

    Last thing
    We have given
    series: [
    { dataField: ‘Site1’, displayText: ‘Site 1’ },
    { dataField: ‘Site2’, displayText: ‘Site 2’ },
    { dataField: ‘Site3’, displayText: ‘Site 3’ },
    { dataField: ‘Site4’, displayText: ‘Site 4’ }
    ]
    For my data which is dynamic these names site1 and site2 are Not fixed
    I may get some names , how can I make it dynamic i.e how can I read it from initial data itself , like looping and the number of sites are also not constant. Isthat possible?


    Dimitar
    Participant

    Hi fresher,

    This would require further modifications. Have in mind that series is an array that, like newRecords, can be dynamically built according to your requirements. You may create the dynamic series array in beforeLoadComplete, too, but make sure it is a global variable, so that it is available when you pass it in the chart’s settings.

    Best Regards,
    Dimitar

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


    fresher
    Participant

    Hi Dimitar,

    That was awesome , it helped me…

    I have loaded the chart in a asp.net user control and when I try to load in a widget in JQXDocking window, the whole chart getting distorted and coming out of the window. I knew its due to the conflict of css or reference js files but I couldn’t figure out the exact issue . Kindly help me

    1.My Main Page

    <%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true”
    CodeBehind=”JqDocking2.aspx.cs” Inherits=”JQChartss.JqDocking2″ %>

    <%@ Register Src=”~/ucStackelineChart.ascx” TagName=”StackedChart” TagPrefix=”ucChart” %>
    <asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
    </asp:Content>
    <asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
    <meta name=”keywords” content=”jqxDocking, jQuery Docking, jQWidgets, Events” />
    <meta name=”description” content=”jqxDocking has events which are connected with some actions on the windows inside. Common events which probably you’ll need
    to handle are the dragEnd and dragStart event. You can see these events down in the demo.” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    <title id=’Description’>Docking Keyboard Navigation.</title>
    <link rel=”stylesheet” href=”jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”Scripts/demos.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxdocking.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”JqWidgets/jqxchart.core.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#docking’).jqxDocking({ keyboardNavigation: true, orientation: ‘horizontal’, width: 650, mode: ‘default’ ,windowsMode: { window0: ‘floating’} });
    $(“#docking”).jqxDocking(‘showAllCollapseButtons’);
    $(‘#docking’).jqxDocking(‘enable’);
    $(“#docking”).jqxDocking(‘focus’);
    });
    </script>
    <div id=”docking”>
    <div>
    <div id=”window0″ style=”height: 150px”>
    <div>
    ChartControl
    </div>
    <div>
    <ucChart:StackedChart ID=”chartControll” runat=”server” />
    </div>
    </div>
    <div id=”window1″ style=”height: 150px”>
    <div>
    Database management system
    </div>
    <div>
    A database management system (DBMS) is a software package with computer programs
    that control the creation, maintenance, and the use of a database. It allows organizations
    to conveniently develop databases…
    </div>
    </div>
    </div>
    <div>
    <div id=”window2″ style=”height: 150px”>
    <div>
    RISC
    </div>
    <div>
    Some aspects attributed to the first RISC-labeled designs around 1975 include the
    observations that the memory-restricted compilers of the time were often unable
    to take advantage…
    </div>
    </div>
    </div>
    </div>
    <br />
    <br />
    </asp:Content>

    2.User Control

    <%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”ucStackelineChart.ascx.cs” Inherits=”JQChartss.ucStackelineChart” %>

    <link href=”jqx.base.css” type=”text/css” rel=”stylesheet” />
    <script type=”text/javascript” src=”jquery-1.10.2.js”></script>
    <script type=”text/javascript” src=”jqxcore.js”></script>
    <%–<script type=”text/javascript” src=”jqxchart.js”></script>–%>
    <script type=”text/javascript” src=”jqxdata.js”></script>
    <script type=”text/javascript” src=”jqxdraw.js”></script>
    <script type=”text/javascript” src=”jqxchart.core.js”></script>
    <%–<script type=”text/javascript” src=”jqxall.js”></script>–%>
    <script type=”text/javascript”>
    $(document).ready(function () {

    // Checks whether an array contains object: false if contains & true if it does’nt contains
    function contains(a, obj) {
    for (var i = 0; i < a.length; i++) {
    if (a[i] === obj) {
    return false;
    }
    }
    return true;
    }

    function indexOfElement(a, obj) {
    for (var i = 0; i < a.length; i++) {
    if (a[i] === obj) {
    return i;
    }
    }
    return “”;
    }

    var sampleData = [
    {
    “SiteId”: “1”,
    “Year”: “2012”,
    “Amount”: “15.80004”,
    “Percentage”: 0.00007517660185636339
    },
    {
    “SiteId”: “2”,
    “Year”: “2012”,
    “Amount”: “35.14068”,
    “Percentage”: 0.495865231449349
    },
    {
    “SiteId”: “2”,
    “Year”: “2013”,
    “Amount”: “45.14610”,
    “Percentage”: 6.021379085165576
    },
    {
    “SiteId”: “2”,
    “Year”: “2014”,
    “Amount”: “65.91208”,
    “Percentage”: 5.100533542388375
    },
    {
    “SiteId”: “3”,
    “Year”: “2014”,
    “Amount”: “87.80100”,
    “Percentage”: 2.5590754718656226
    },
    {
    “SiteId”: “3”,
    “Year”: “2012”,
    “Amount”: “75.80100”,
    “Percentage”: 1.569754718656226
    },
    {
    “SiteId”: “4”,
    “Year”: “2012”,
    “Amount”: “65.80100”,
    “Percentage”: 1.9790754718656226
    },
    {
    “SiteId”: “4”,
    “Year”: “2014”,
    “Amount”: “83.80100”,
    “Percentage”: 1.5290754718656226
    }
    ]

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘SiteId’ },
    { name: ‘Year’ },
    { name: ‘Amount’, type: “number” },
    { name: ‘Percentage’, type: “number” }
    ],
    localdata: sampleData
    // url: ‘SpenDataFromAPI.txt’
    };

    //Initializing the arrays
    var myRecords = [];
    var YearArray = [];
    var siteArray = [];
    var seriesArray = [];

    // Modifying Raw Data in to required Format
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
    beforeLoadComplete: function (records) {
    for (var j = 0; j < records.length; j++) {
    // item = {};
    //item[“Year”] = records[j].Year;
    // if ($.inArray(records[j].SiteId, siteArray)!=”-1″)
    if (contains(siteArray, records[j].SiteId))
    siteArray.push(records[j].SiteId);
    if (contains(YearArray, records[j].Year))
    YearArray.push(records[j].Year);
    }

    //Preparing Formatted Data
    for (var i = 0; i < YearArray.length; i++) {
    item = {};
    item[“Year”] = YearArray[i];
    for (var j = 0; j < siteArray.length; j++) {
    item[“Site” + siteArray[j]] = 0;

    }
    myRecords.push(item);
    }

    //Preparing Dynamic Series
    for (var j = 0; j < siteArray.length; j++) {
    itemSeries = {};
    itemSeries[“dataField”] = “Site” + siteArray[j];
    itemSeries[“displayText”] = “Site” + siteArray[j];
    seriesArray.push(itemSeries);
    }

    for (var i = 0; i < records.length; i++) {
    var currentRecord = records[i];

    var index = indexOfElement(YearArray, currentRecord.Year);
    if (index) {
    myRecords[index][“Site” + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
    }
    }
    return myRecords;
    },
    loadError: function (xhr, status, error) {
    alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);
    }
    });

    var settings = {
    title: “Site Amount”,
    description: “by year”,
    showLegend: true,
    enableAnimations: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘Year’,
    showGridLines: true
    },
    colorScheme: ‘scheme01′,
    seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 50,
    valueAxis:
    {
    unitInterval: 100,
    displayValueAxis: true,
    description: ‘Site Amount’
    },
    series: seriesArray
    }
    ]
    };

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

    });
    </script>
    <div id=’chartContainer’ style=”width: 850px; height: 500px;”>
    </div>

    Should I include references in both USer control and Main page?I have added DOCTYPE etc but its not working

    When I load usercontrol in a empty page , it was working fine but when I load in a jqxdockjing window I’m facing issues.

    Thanks


    Dimitar
    Participant

    lisaB
    Participant

    Hey! I have a similar issue!
    Can you let me know if in the code below “year” can be made dynamic as well??

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
                    beforeLoadComplete: function (records) {
                        newRecords = new Array({ Year: 2012, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2013, Site1: 0, Site2: 0, Site3: 0, Site4: 0 }, { Year: 2014, Site1: 0, Site2: 0, Site3: 0, Site4: 0 });
                        for (var i = 0; i < records.length; i++) {
                            var currentRecord = records[i];
                            switch (currentRecord.Year) {
                                case "2012":
                                    newRecords[0]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2013":
                                    newRecords[1]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                                case "2014":
                                    newRecords[2]["Site" + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
                                    break;
                            }
                        }
                        return newRecords;
                    },
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });

    And how?

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.