unable to bind side
I am unable to bind the side by side chart in my project. Though i have successfully used the BarCharts,bubble charts and guage charts , i find it extremely difficult to find out why i am unable to bind the SIde-By-Side chart . Here is my MVC view
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
<div class="media-list is-grid p-10 list-items" data-plugin="animateList" data-animate="fade" data-child="li">
<ul class="blocks blocks-100 blocks-xxl-2 blocks-xl-2 blocks-lg-2 blocks-md-2 blocks-sm-2" data-plugin="animateList" data-child=">li">
<li>
<div class="panel">
<div class="panel-body p-10 custom-Pb">
<div id="barChartz1" style="width:100%"></div>
</div>
</div>
</li>
<li>
<div class="panel">
<div class="panel-body p-10 custom-Pb">
<div id="barChartz2" style="width:100%"></div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="~/Scripts/bundle.js" charset="utf-8"></script>
<script>
var MOAPIURL = '';
var StoryCardContext = '';
var Chart1Obj1 = [];
var Chart1Obj2 = [];
var Panel1Id='';
var Panel2Id='';
var Story1Id='';
var Story2Id='';
var Chart1Name = '';
var Chart2Name = '';
var Chart1YAxis = '';
var Chart2YAxis = '';
var Chart3YAxis = '';
var Chart4YAxis = '';
var Chart5YAxis = '';
var RadioLakhMioValue = '';
var ChartColor1 = "";
var ChartColor2 = "";
var ChartColor3 = "";
$(document).ready(
function ()
{
MOAPIURL = '@System.Configuration.ConfigurationManager.AppSettings["MOAPIURL"]';
$('#DashBoardName').text('@ViewBag.DashBoardName');
StoryCardContext = '';
Chart1Obj1 = [];
Chart1Obj2 = [];
if(@ViewBag.Menu=='20')
{
Panel1Id='1';
Panel2Id='2';
Story1Id='17';
Story2Id='18';
}
DisplayStoryCards(@ViewBag.Menu);
});
function JsonObjectSlice(result, TopCount) {
var StoryCardContext = JSON.parse(JSON.stringify(result));
var top10 = StoryCardContext.sort(function (a, b) { return a.MetricValue1 < b.MetricValue1 ? 1 : -1; })
.slice(0, TopCount);
return top10;
}
function DisplayStoryCards(MenuId) {
$.ajax({
url: MOAPIURL + 'Home/GetStoryCardInfo/' + MenuId + "",
async: false,
type: 'get',
dataType: 'json',
success: function (data) {
StoryCardContext = data;
BuildStoryCardByID(data);
},
error: function (data) {
alert('err');
}
});
function BuildStoryCardByID(data) {
var ids = Enumerable.From(data).Select("$.StoryCardID").Distinct().ToArray();
for (j = 0; j < ids.length; j++) {
var queryResult = Enumerable.From(data).Where(function (x) { return (x.StoryCardID == ids[j] && x.IsDefault == 'Y'); }).ToArray();
GetInputParameters(queryResult, j + 1);
}
}
}
function GetInputParameters(data, Sequence) {
var DefaultTopCount = 10;
var url = MOAPIURL;
var reqobj = {};
var ApiMethod = '';
var StoryCardName = '';
var title = '';
var YAxis = "";
var SeriesColor = "#AF7AC5";//"#F7DC6F";//#82E0AA";//"#EC7063";// "#E74C3C";
if (Sequence == "1") {
SeriesColor = "#EC7063";// "#E67E22";
ChartColor1 = "#EC7063";
}
if (Sequence == "2") {
SeriesColor = "#008ae6";//"#2ECC71 e95949";
ChartColor2 = "#008ae6";
}
if (Sequence == "3") {
SeriesColor = "#b35900";
ChartColor3 = "#b35900";
}
if (Sequence == "4") {
SeriesColor = "#00cccc";
}
for (var i = 0; i < data.length; i++) {
ApiMethod = data[i].APIMethod;
StoryCardName = data[i].Description;
title = data[i].Title + data[i].FilterValue;
reqobj[data[i].ParamTxt] = data[i].ParamVal;
YAxis = data[i].Name;
}
url = url + ApiMethod;
StoryCardName = "#" + StoryCardName + Sequence;
var toolDiv = "#toolDiv" + Sequence;
reqobj["Searchfilters"] = getFinalSearchCriteria();//GetSearchFilter(); //need to call search filter
BindChartWithData(StoryCardName, title, url, reqobj, DefaultTopCount, YAxis, SeriesColor);
}
function BindChartWithData(divid, title, myurl, StoryCardContext, TopCount, YAxis, SeriesColor) {
$.ajax({
url: myurl,
type: 'POST',
async: false,
//contentType: 'application/json; charset=utf-8',
data: StoryCardContext,
success: function (result) {
if (divid == "#barChartz1") {
Chart1Name = title;
Chart1Obj1 = result;
Chart1YAxis = YAxis;
}
if (divid == "#barChartz2") {
Chart2Name = title;
Chart1Obj2 = result;
Chart2YAxis = YAxis;
}
var res = result;
if (divid == "#barChartz1" || divid == "#barChartz2") {
if(divid == "#barChartz1")
{
TopCount=$('#txtTopCount1').val();
}
if(divid == "#barChartz2")
{
TopCount=$('#txtTopCount2').val();
}
res = JsonObjectSlice(res, TopCount);
}
EntryPoint.SideBySideBar(divid, title, res, YAxis, SeriesColor, 'state', 'year2004','year2001');
},
error: function (response) {
if (response.status == '500') {
CommonAlert()
}
}
});
}
</script>
The result of the successful ajax call is this object
var dataSource = [{
state: "Illinois",
year2001: 476.851,
year2004: 528.904
}, {
state: "Indiana",
year2001: 195.769,
year2004: 227.271
}, {
state: "Michigan",
year2001: 335.793,
year2004: 372.576
}, {
state: "Ohio",
year2001: 374.771,
year2004: 418.258
}, {
state: "Wisconsin",
year2001: 182.373,
year2004: 211.727
}];
I can for sure assure that the ajax call is a success and the execution even moves to EntryPoint.SideBySideBar(divid, title, res, YAxis, SeriesColor, 'state', 'year2004','year2001'); and executes without any exception but the chart doesn't bind.
And This is my JS where i am binding the data with the chart.
var $ = require('jquery');
require('devextreme/viz/bar_gauge');
require('devextreme/viz/chart');
require('jszip');
SideBySideBar: function CreateSideBySideChart(id, Title, dataset, YAxis, SeriesColor, XParam, YParam1, YParam2) {
$(id).dxChart({
dataSource: dataset,
commonSeriesSettings: {
argumentField: 'state',
type: "bar",
hoverMode: "allArgumentPoints",
selectionMode: "allArgumentPoints",
label: {
visible: true,
format: {
type: "fixedPoint",
precision: 2
}
}, bar: {
color: SeriesColor
},
},
series: [
{ valueField: "year2004", name: "2004" },
{ valueField: "year2001", name: "2001" }],
title: Title,
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
"export": {
enabled: true
}
});
}
上一篇: DevExtreme如何创建文件
下一篇: 无法绑定一方