Hello:
I am trying to get a spline chart to render, and I am having difficulty getting the data to render. I am using a model and controller to post the data to a webpage. The webpage that the data is being posted to is http://localhost:1265/ICSPTE/ICSPTE_Chart and the JSON that is posted is as follows. (I am trying to get a chart to render where date is the x axis, rate is the y- axis, and the volume changes the thickness of the spline.)
I am trying to get the RatemateData to render.
here is the data that gets queried and then posted to this link:
{"ContentEncoding":null,"ContentType":null,"Data":[{"Origin":"217176","oLoc":null,"Destination":"330948","dLoc":null,"EquipmentType":0,"eqpTyp":0,"hubPair":null,"defaultView":true,"transcore":false,"ratemate":false,"icsHistory":false,"otrHistory":false,"useOtrData":false,"chainalytics":false,"otrPercentPTEmarkup":0,"pteAvg":0,"listRate":0,"spotRate":0,"spotRateDesc":null,"fuel":0,"miles":0,"HistICSPTEData":null,"TranscoreData":null,"RatemateData":[{"rate":2.25,"volume":35,"date":"\/Date(1388901600000)\/"},{"rate":2.07,"volume":76,"date":"\/Date(1389506400000)\/"},{"rate":2.04,"volume":78,"date":"\/Date(1390111200000)\/"},{"rate":2.03,"volume":57,"date":"\/Date(1390716000000)\/"},{"rate":2.1,"volume":67,"date":"\/Date(1391320800000)\/"},{"rate":2.11,"volume":77,"date":"\/Date(1391925600000)\/"},{"rate":2.39,"volume":123,"date":"\/Date(1392530400000)\/"},{"rate":2.25,"volume":142,"date":"\/Date(1393135200000)\/"},{"rate":2.29,"volume":178,"date":"\/Date(1393740000000)\/"},{"rate":2.58,"volume":127,"date":"\/Date(1394344800000)\/"},{"rate":2.57,"volume":149,"date":"\/Date(1394946000000)\/"},{"rate":2.51,"volume":117,"date":"\/Date(1395550800000)\/"},{"rate":2.6,"volume":150,"date":"\/Date(1396155600000)\/"},{"rate":2.57,"volume":122,"date":"\/Date(1396760400000)\/"},{"rate":2.35,"volume":114,"date":"\/Date(1397365200000)\/"},{"rate":2.19,"volume":80,"date":"\/Date(1397970000000)\/"},{"rate":2.28,"volume":93,"date":"\/Date(1398574800000)\/"},{"rate":2.16,"volume":75,"date":"\/Date(1399179600000)\/"},{"rate":2.01,"volume":76,"date":"\/Date(1399784400000)\/"},{"rate":2.13,"volume":80,"date":"\/Date(1400389200000)\/"},{"rate":2.28,"volume":57,"date":"\/Date(1400994000000)\/"},{"rate":2.18,"volume":82,"date":"\/Date(1401598800000)\/"},{"rate":2.52,"volume":95,"date":"\/Date(1402203600000)\/"},{"rate":2.44,"volume":133,"date":"\/Date(1402808400000)\/"},{"rate":2.32,"volume":139,"date":"\/Date(1403413200000)\/"},{"rate":2.72,"volume":144,"date":"\/Date(1404018000000)\/"},{"rate":2.51,"volume":98,"date":"\/Date(1404622800000)\/"},{"rate":2.21,"volume":83,"date":"\/Date(1405227600000)\/"},{"rate":2.32,"volume":86,"date":"\/Date(1405832400000)\/"},{"rate":2.2399999999999998,"volume":120,"date":"\/Date(1406437200000)\/"},{"rate":2.27,"volume":123,"date":"\/Date(1407042000000)\/"},{"rate":2.18,"volume":102,"date":"\/Date(1407646800000)\/"},{"rate":2.22,"volume":76,"date":"\/Date(1408251600000)\/"},{"rate":2.04,"volume":77,"date":"\/Date(1408856400000)\/"},{"rate":2.21,"volume":120,"date":"\/Date(1409461200000)\/"},{"rate":2.25,"volume":106,"date":"\/Date(1410066000000)\/"},{"rate":2.2,"volume":77,"date":"\/Date(1410498000000)\/"},{"rate":2.19,"volume":62,"date":"\/Date(1411275600000)\/"},{"rate":2.32,"volume":67,"date":"\/Date(1411880400000)\/"},{"rate":2.4,"volume":77,"date":"\/Date(1412485200000)\/"},{"rate":2.31,"volume":95,"date":"\/Date(1413090000000)\/"},{"rate":2.2399999999999998,"volume":51,"date":"\/Date(1413694800000)\/"},{"rate":2.23,"volume":85,"date":"\/Date(1414299600000)\/"},{"rate":2.12,"volume":90,"date":"\/Date(1414904400000)\/"},{"rate":2.11,"volume":109,"date":"\/Date(1415512800000)\/"},{"rate":2.22,"volume":138,"date":"\/Date(1416117600000)\/"},{"rate":2.27,"volume":146,"date":"\/Date(1416722400000)\/"},{"rate":2.43,"volume":89,"date":"\/Date(1417327200000)\/"},{"rate":2.35,"volume":124,"date":"\/Date(1417932000000)\/"},{"rate":2.23,"volume":67,"date":"\/Date(1418536800000)\/"},{"rate":2.27,"volume":109,"date":"\/Date(1419141600000)\/"},{"rate":2.52,"volume":86,"date":"\/Date(1419746400000)\/"},{"rate":2.4899999999999998,"volume":80,"date":"\/Date(1420351200000)\/"},{"rate":2.36,"volume":97,"date":"\/Date(1420956000000)\/"},{"rate":2.08,"volume":108,"date":"\/Date(1421560800000)\/"},{"rate":2,"volume":97,"date":"\/Date(1422165600000)\/"},{"rate":1.96,"volume":65,"date":"\/Date(1422770400000)\/"},{"rate":1.92,"volume":118,"date":"\/Date(1423375200000)\/"},{"rate":1.9300000000000002,"volume":89,"date":"\/Date(1423980000000)\/"},{"rate":2.02,"volume":43,"date":"\/Date(1424584800000)\/"},{"rate":2.02,"volume":93,"date":"\/Date(1425189600000)\/"},{"rate":2.11,"volume":121,"date":"\/Date(1425794400000)\/"},{"rate":2.09,"volume":129,"date":"\/Date(1426395600000)\/"},{"rate":2.15,"volume":164,"date":"\/Date(1427000400000)\/"},{"rate":2.12,"volume":85,"date":"\/Date(1427605200000)\/"},{"rate":2.05,"volume":60,"date":"\/Date(1428210000000)\/"},{"rate":1.9899999999999998,"volume":72,"date":"\/Date(1428814800000)\/"},{"rate":1.77,"volume":66,"date":"\/Date(1429419600000)\/"},{"rate":2.01,"volume":74,"date":"\/Date(1430024400000)\/"},{"rate":1.83,"volume":46,"date":"\/Date(1430629200000)\/"},{"rate":2.14,"volume":50,"date":"\/Date(1431234000000)\/"},{"rate":1.98,"volume":46,"date":"\/Date(1431838800000)\/"}],"winMode":false,"windowRatemateAvg":0,"windowRatemateAvgListRate":0,"windowTranscoreAvg":0,"windowTranscoreAvgListRate":0,"windowIcsHistoryAvg":0,"windowIcsHistoryAvgListRate":0,"windowStart":"\/Date(1427898531237)\/","windowStop":"\/Date(1435674531237)\/","otrWindowMargin":0,"alpha":0,"minRange":"\/Date(-62135575200000)\/","maxRange":"\/Date(-62135575200000)\/","minRangeDouble":0,"maxRangeDouble":0,"minDate":0,"maxDate":0,"picData":null,"xMinPix":0,"xMaxPix":0,"yMinPix":0,"yMaxPix":0,"OriginDesc":"","DestinationDesc":"","windowType":"","windowStartInt":42093,"windowStopInt":42183,"wPteAvg":0,"wListRate":0,"startDateInt":-693594,"stopDateInt":-693594,"MinDate":"0","MaxDate":"0"}],"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}
then I am trying to render in http://localhost:1265/ICSPTE/Test_Chart
here is the code for that:
<!DOCTYPE html><html> <head> <title>Testing With Just Rate Mate from /chart.cshtml data</title> <script src="http://igniteui.com/js/modernizr.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script> <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link> <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link> <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>
</head> <body> <div style="80%; min-width: 210px;"> <div id="chart"></div> <script type="text/javascript">
$(function () { var data = "http://localhost:1265/ICSPTE/ICSPTE_Chart" $("chart").igDataChart
$("#chart").igDataChart({ width: "100%", height: "50%", legend: { element: "lineLegend" }, title: "Ratemate Test", subtitle: "This is a test to see if the Iinfragistics methods being called will work with just ratemate data", dataSource: data, axes: [ { name: "DateAxis", type: "categoryX", label: "date" }, { name: "RateAxis", type: "numericY", minimumValue: 0, title: "USD/Mi" } ],
series: [ { name: "Ratemate", type: "line", title: "Ratemate Data", xAxis: "date", yAxis: "RateAxis" } ]
}) })
</script> </div> </body></html>
Hello,
I am still following up. Have you been able to resolve the issue?If you have any concerns or questions, please feel free to contact me, I will be glad to help you.
Thank you for choosing Infragistics components!
Hello Michael,
Thank you for contacting Infragistics!
In order to render the datachart it should have correct dataSource. Which I believe in your scenario is data.Data[0].RatemateData.
The chart height should be set in pixels in order to display, because you do not have set height of the parent and it cannot know how much place it should take.
You are missing valueMemberPath which points the values for the y axis.
You do not have xAxis defined with name date, I do believe it should be DateAxis instead.
I am attaching the modified code so you can review it.
Let me know if you need further assistance.