Hello,
Trying to figure out how to add multiple Lines to a Line Chart from a single json data source. I want the lines to be separated based off an ID that is in the json response. Code to create the chart is below as well as the JSON response. I want the lines to plot based on the volume field, but each line to be created based on the TankId field. I'm still experimenting with these controls, and if i'm going about this the wrong way, please point me down the right road.
Thanks in advance
$.ajax({ url: "@Url.Action("GetAllTankLevels", "Home")", type: "POST", dataType: "json", data: { "id": rowId }, success: function(db) { console.log(db); $("#chart").igDataChart({ width: "100%", height: "400px", title: "Weekly Usage", subtitle: "Weekly Usages", dataSource: jQuery.parseJSON(db), axes: [ { name: "NameAxis", type: "categoryX", title: "Date", label: "DisplayDateTime" }, { name: "VolumeAxis", type: "numericY", minimumValue: 0, title: "Last 7 Days" } ], series: [ { name: "Volume", type: "line", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "NameAxis", yAxis: "VolumeAxis", valueMemberPath: "Volume", showTooltip: true, title: "Gallons Remaining" } ] }); } });
[{ "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 67.9, "Height": 24.9, "RateChange": 0, "Temperature": 63.5, "Battery": 97, "RSSI": 48, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-20T17:15:36-05:00", "LastUpdatedTimeUTCForXml": "2215", "LastUpdatedDateUTCForXml": "2018-12-20", "LastUpdatedDateForXml": "2018-12-20", "LastUpdatedLocalTimeForXml": "1715", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.57857132, "DisplayDateTime": "12/20/2018 12:15:36 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 168, "Temperature": 63.5, "Battery": 97, "RSSI": 59, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-20T20:45:59-05:00", "LastUpdatedTimeUTCForXml": "0145", "LastUpdatedDateUTCForXml": "2018-12-21", "LastUpdatedDateForXml": "2018-12-20", "LastUpdatedLocalTimeForXml": "2045", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/20/2018 3:45:59 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 0, "Temperature": 63.5, "Battery": 97, "RSSI": 55, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-21T11:15:22-05:00", "LastUpdatedTimeUTCForXml": "1615", "LastUpdatedDateUTCForXml": "2018-12-21", "LastUpdatedDateForXml": "2018-12-21", "LastUpdatedLocalTimeForXml": "1115", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/21/2018 6:15:22 AM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 0, "Temperature": 63.5, "Battery": 97, "RSSI": 55, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-21T17:15:58-05:00", "LastUpdatedTimeUTCForXml": "2215", "LastUpdatedDateUTCForXml": "2018-12-21", "LastUpdatedDateForXml": "2018-12-21", "LastUpdatedLocalTimeForXml": "1715", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/21/2018 12:15:58 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 0, "Temperature": 63.5, "Battery": 97, "RSSI": 51, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-21T21:15:24-05:00", "LastUpdatedTimeUTCForXml": "0215", "LastUpdatedDateUTCForXml": "2018-12-22", "LastUpdatedDateForXml": "2018-12-21", "LastUpdatedLocalTimeForXml": "2115", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/21/2018 4:15:24 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 0, "Temperature": 62.7, "Battery": 97, "RSSI": 53, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-22T11:15:48-05:00", "LastUpdatedTimeUTCForXml": "1615", "LastUpdatedDateUTCForXml": "2018-12-22", "LastUpdatedDateForXml": "2018-12-22", "LastUpdatedLocalTimeForXml": "1115", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/22/2018 6:15:48 AM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 16, "Id": 0, "CustomerId": 7, "TankName": "TESTTANK", "CustomerName": "IGHQ CUSTOMER", "LocationName": "IGHQ SHOP", "Volume": 61.9, "Height": 22.7, "RateChange": 0, "Temperature": 62.7, "Battery": 97, "RSSI": 51, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-22T17:15:24-05:00", "LastUpdatedTimeUTCForXml": "2215", "LastUpdatedDateUTCForXml": "2018-12-22", "LastUpdatedDateForXml": "2018-12-22", "LastUpdatedLocalTimeForXml": "1715", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "4MCN31WW", "RateChangeAlarmLevel": 15.0, "LocationId": 18, "AverageDailyUse": 3.74, "DisplayDateTime": "12/22/2018 12:15:24 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|TESTTANK", "LocationZip": null, "TimeZone": null }, { "TankId": 18, "Id": 0, "CustomerId": 10, "TankName": "LOGANTEST", "CustomerName": "PJPD", "LocationName": "Station 1", "Volume": 111.4, "Height": 40.9, "RateChange": 370, "Temperature": 62.7, "Battery": 97, "RSSI": 53, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-30T15:45:40-05:00", "LastUpdatedTimeUTCForXml": "2045", "LastUpdatedDateUTCForXml": "2018-12-30", "LastUpdatedDateForXml": "2018-12-30", "LastUpdatedLocalTimeForXml": "1545", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "LOGTESTUNIT1", "RateChangeAlarmLevel": 15.0, "LocationId": 19, "AverageDailyUse": 0.7833328, "DisplayDateTime": "12/30/2018 10:45:40 AM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|LOGANTEST", "LocationZip": null, "TimeZone": null }, { "TankId": 18, "Id": 0, "CustomerId": 10, "TankName": "LOGANTEST", "CustomerName": "PJPD", "LocationName": "Station 1", "Volume": 50.0, "Height": 40.9, "RateChange": 370, "Temperature": 62.7, "Battery": 97, "RSSI": 53, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2018-12-31T15:45:40-05:00", "LastUpdatedTimeUTCForXml": "2045", "LastUpdatedDateUTCForXml": "2018-12-31", "LastUpdatedDateForXml": "2018-12-31", "LastUpdatedLocalTimeForXml": "1545", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "LOGTESTUNIT1", "RateChangeAlarmLevel": 15.0, "LocationId": 19, "AverageDailyUse": 0.7833328, "DisplayDateTime": "12/31/2018 10:45:40 AM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|LOGANTEST", "LocationZip": null, "TimeZone": null }, { "TankId": 18, "Id": 0, "CustomerId": 10, "TankName": "LOGANTEST", "CustomerName": "PJPD", "LocationName": "Station 1", "Volume": 25.0, "Height": 40.9, "RateChange": 370, "Temperature": 62.7, "Battery": 97, "RSSI": 53, "IsCurrent": true, "OrganizationId": 4, "DateTime": "2019-01-04T00:00:00-05:00", "LastUpdatedTimeUTCForXml": "0500", "LastUpdatedDateUTCForXml": "2019-01-04", "LastUpdatedDateForXml": "2019-01-04", "LastUpdatedLocalTimeForXml": "0000", "UnitsOfMeasurement": null, "LowAlarmLevel": 20.0, "CriticalLowAlarmLevel": 5.0, "SerialNumber": "LOGTESTUNIT1", "RateChangeAlarmLevel": 15.0, "LocationId": 19, "AverageDailyUse": 0.7833328, "DisplayDateTime": "1/3/2019 7:00:00 PM", "OrgName": null, "SevenDaysUsage": 0, "Alarms": null, "SalesPersonId": 1, "MfgCenterNumber": null, "UserTankId": "|LOGANTEST", "LocationZip": null, "TimeZone": null }]
Hello Logan,
Thank you for posting in the Infragistics community !
I have reviewed your chart configuration and the JSON response. However, the chart cannot benefit from this data structure in order to plot a line based off the TankId field. What the chart does is drawing a series (line, bar, column, etc) for the corresponding series field.
You can for example draw a second line series for the Height field:
series: [ { type: "line", valueMemberPath: "Volume", }, { type: "line", valueMemberPath: "Height", }]
So, in order to achieve your requirement, you will need to restructure your data (either on the client or on the server). Please let me know if you need further assistance on the igDataChart, I will be glad to help.