Stacked line series Chart Data from two diffrent sources - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chartContainer, data, data adapter, dataadapter, datafield, datafields, jqxChart, jqxDataAdapter, multiple, source

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.

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

Author

Stacked line series Chart Data from two diffrent sources Posts
October 29, 2014 at 4:26 pm Stacked line series Chart Data from two diffrent sources #61824

riyasrawther
Participant

The below code is took from /demos/jqxchart/javascript_chart_column_series.htm. Is it possible to show Date, SearchPaid and SearchNonPaid from one source and Referral from another source?

`<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Stacked Line Series Example</title>
<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/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 () {
<strong> // Data One from a txt
var source =
{
datatype: “tab”,
datafields: [
{ name: ‘Date’ },

{ name: ‘SearchPaid’ },
{ name: ‘SearchNonPaid’ }
],
url: ‘../sampledata/website_analytics.txt’
};
// Data Two from a txt
var source =
{
datatype: “tab”,
datafields: [

{ name: ‘Referral’ }

],
url: ‘../sampledata/website_analytics2.txt’
};</strong>

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];

// prepare jqxChart settings
var settings = {
title: “Web Site Traffic Analysis”,
description: “Monthly unique visitors (stacked)”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘Date’,
formatFunction: function (value) {
return value.getDate();
},
toolTipFormatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()] + ‘-‘ + value.getFullYear();
},
showTickMarks: true,
type: ‘date’,
baseUnit: ‘day’,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 31,
gridLinesColor: ‘#888888′,
minValue: ’01/01/2012′,
maxValue: ’01/31/2012’,
valuesOnTicks: false
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘stackedline’,
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 4500,
description: ‘Daily Visits’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Referral’, displayText: ‘Referral Traffic’ },
{ dataField: ‘SearchPaid’, displayText: ‘Paid Search Traffic’ },
{ dataField: ‘SearchNonPaid’, displayText: ‘Non-Paid Search Traffic’ }
]
}
]
};

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

});
</script>
</head>
<body class=’default’>
<div id=’chartContainer’ style=”width:850px; height:500px”>
</div>
</body>
</html>`

Thanks

October 30, 2014 at 7:45 am Stacked line series Chart Data from two diffrent sources #61849

Dimitar
Participant

Hello riyasrawther,

jqxChart can be bound to only one data adapter instance. This means you would have to combine both sources into one before initializing the chart.

Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.