jQWidgets Forums

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..!

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..!

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…!

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
}
]

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?

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