Incorrect chart grouping / missing category labels

Incorrect chart grouping / missing category labels - kendo-ui

My chart is showing incorrect groupings for its data.
Here is the minimal reproducible example:
$('#chart').kendoChart({
dataSource: {
transport:{
read: {
url: 'url',
type: 'post',
data: { data: 'data' }
}
},
group:{
field: 'NQSDName'
}
},
seriesDefaults: {
type: 'column',
stack: true
},
series: [
{
field: 'MeasuresCount',
}
],
categoryAxis: [{
field: 'TINShortName'
}]
});
Here is the data it returns:
[
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "236- Controlling High Blood Pressure\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #47",
"TINShortName": "TinID 47",
"TINID": 47,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #47",
"TINShortName": "TinID 47",
"TINID": 47,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #47",
"TINShortName": "TinID 47",
"TINID": 47,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "236- Controlling High Blood Pressure\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #55",
"TINShortName": "TinID 55",
"TINID": 55,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #55",
"TINShortName": "TinID 55",
"TINID": 55,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #55",
"TINShortName": "TinID 55",
"TINID": 55,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #45",
"TINShortName": "TinID 45",
"TINID": 45,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 2
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #58",
"TINShortName": "TinID 58",
"TINID": 58,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #58",
"TINShortName": "TinID 58",
"TINID": 58,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control\n\r\n236- Controlling High Blood Pressure",
"TINName": "TinID - #58",
"TINShortName": "TinID 58",
"TINID": 58,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "236- Controlling High Blood Pressure\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #51",
"TINShortName": "TinID 51",
"TINID": 51,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #51",
"TINShortName": "TinID 51",
"TINID": 51,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #51",
"TINShortName": "TinID 51",
"TINID": 51,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "119- Diabetes: Medical Attention for Neuropat\n\r\n113- Colorectal Cancer Screening\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control\n\r\n112- Breast Cancer Screening\n\r\n236- Controlling High Blood Pressure",
"TINName": "TinID - #57",
"TINShortName": "TinID 57",
"TINID": 57,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "236- Controlling High Blood Pressure\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #46",
"TINShortName": "TinID 46",
"TINID": 46,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #46",
"TINShortName": "TinID 46",
"TINID": 46,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #46",
"TINShortName": "TinID 46",
"TINID": 46,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n110- Preventive Care and Screening: Influenza\n\r\n111- Pneumonia Vaccination Status for Older A",
"TINName": "TinID - #57",
"TINShortName": "TinID 57",
"TINID": 57,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #57",
"TINShortName": "TinID 57",
"TINID": 57,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #48",
"TINShortName": "TinID 48",
"TINID": 48,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #48",
"TINShortName": "TinID 48",
"TINID": 48,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n236- Controlling High Blood Pressure\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #48",
"TINShortName": "TinID 48",
"TINID": 48,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A",
"TINName": "TinID - #52",
"TINShortName": "TinID 52",
"TINID": 52,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 3
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #52",
"TINShortName": "TinID 52",
"TINID": 52,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #56",
"TINShortName": "TinID 56",
"TINID": 56,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #53",
"TINShortName": "TinID 53",
"TINID": 53,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #53",
"TINShortName": "TinID 53",
"TINID": 53,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control\n\r\n236- Controlling High Blood Pressure",
"TINName": "TinID - #53",
"TINShortName": "TinID 53",
"TINID": 53,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #56",
"TINShortName": "TinID 56",
"TINID": 56,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control\n\r\n236- Controlling High Blood Pressure",
"TINName": "TinID - #56",
"TINShortName": "TinID 56",
"TINID": 56,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #54",
"TINShortName": "TinID 54",
"TINID": 54,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #54",
"TINShortName": "TinID 54",
"TINID": 54,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #54",
"TINShortName": "TinID 54",
"TINID": 54,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n110- Preventive Care and Screening: Influenza\n\r\n111- Pneumonia Vaccination Status for Older A",
"TINName": "TinID - #50",
"TINShortName": "TinID 50",
"TINID": 50,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #50",
"TINShortName": "TinID 50",
"TINID": 50,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "236- Controlling High Blood Pressure\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #50",
"TINShortName": "TinID 50",
"TINID": 50,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #60",
"TINShortName": "TinID 60",
"TINID": 60,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Person and Caregiver-Centered Experience and Outcomes",
"FilterDisplayName": "143- Oncology: Medical and Radiation \u2013 Pain I",
"TINName": "TinID - #60",
"TINShortName": "TinID 60",
"TINID": 60,
"NQSDID": 6,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #60",
"TINShortName": "TinID 60",
"TINID": 60,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n236- Controlling High Blood Pressure",
"TINName": "TinID - #60",
"TINShortName": "TinID 60",
"TINID": 60,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 3
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #44",
"TINShortName": "TinID 44",
"TINID": 44,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #44",
"TINShortName": "TinID 44",
"TINID": 44,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening\n\r\n236- Controlling High Blood Pressure\n\r\n119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control",
"TINName": "TinID - #44",
"TINShortName": "TinID 44",
"TINID": 44,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 5
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "249- Barrett's Esophagus",
"TINName": "TinID - #59",
"TINShortName": "TinID 59",
"TINID": 59,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Community\/Population Health",
"FilterDisplayName": "226- Preventive Care and Screening: Tobacco U\n\r\n128- Preventive Care and Screening: Body Mass\n\r\n111- Pneumonia Vaccination Status for Older A\n\r\n110- Preventive Care and Screening: Influenza",
"TINName": "TinID - #49",
"TINShortName": "TinID 49",
"TINID": 49,
"NQSDID": 2,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
},
{
"NQSDName": "Patient Safety",
"FilterDisplayName": "130- Documentation of Current Medications in ",
"TINName": "TinID - #49",
"TINShortName": "TinID 49",
"TINID": 49,
"NQSDID": 5,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 1
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening",
"TINName": "TinID - #49",
"TINShortName": "TinID 49",
"TINID": 49,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 2
},
{
"NQSDName": "Effective Clinical Care",
"FilterDisplayName": "119- Diabetes: Medical Attention for Neuropat\n\r\n 1- Diabetes: Hemoglobin A1c Poor Control\n\r\n113- Colorectal Cancer Screening\n\r\n112- Breast Cancer Screening",
"TINName": "TinID - #52",
"TINShortName": "TinID 52",
"TINID": 52,
"NQSDID": 3,
"ProviderFilterDisplayName": null,
"NPIID": 0,
"MeasuresCount": 4
}
]
Here is the result (Note the mismatched "TIN ID" values and the two columns which are missing category labels):

If not all groups have the same number of points, you should use the series.categoryField instead of the categoryAxis.field.
series: [{
field: "MeasuresCount",
categoryField: "TINShortName",
name: "#= group.value #"
}],
DEMO

Related

How to add vertical scroll in bar chart in chartjs, only when we have more data than space

I have created a bar horizontal chart in chartjs and want to add a vertical scrollbar when more than 5 data, then add scroll in chart automatically. it is showing scroll but i want scroll within the chart, and only need to show 5 records, rest records in scroll.
I have tried so far...
$(document).ready(function(){
let data1 = [{
label: 'Notebook',
backgroundColor: '#0360b8',
data: [399,309,278,239,235, 203,182, 157, 149, 144, 143, 137, 134, 138, 118, 107, 127, 137]
}, {
label: 'Pen',
backgroundColor: '#579ee2',
data: [112, 211, 232, 232, 203,182, 157, 149, 144, 143, 231, 286, 234, 345, 321, 306, 399, 403]
}, {
label: 'Papers',
backgroundColor: '#97c5f5',
data: [399,309,278,239,235, 203,182, 157, 149, 144, 143, 137, 134, 138, 118, 107, 127, 137]
}];
let myChart = new Chart(document.getElementById('divchart'), {
type: 'horizontalBar',
data: {
labels: ["Division 1", "Division 2", "Division 3", "Division 4", "Division 5", "Division 6", "Division 7", "Division 8", "Division 9", "Division 10", "Division 11", "Division 12", "Division 13", "Division 14", "Division 15", "Division 16", "Division 17", "Division 18"],
datasets: data1
},
options: {
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
}
}],
},
legend: {
display: true,
position: 'bottom',
},
maintainAspectRatio: false,
}
});
});
.chartheight{height:250px; overflow-y:auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="chartheight">
<canvas class="" id="divchart"></canvas>
</div><!-- end xol-xs-12 div -->

How to add amgraph in update chart in amcharts

I want to show multiple line graphs in stepline amchart. But the issue is
for one response , I need to show one Line graph only, for the same chart for
another response I need to show 2 line graphs.
this.timeChart = this.AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Response Count",
"autoGridCount": false,
"gridCount": 5,
"gridAlpha": 0
}],
"graphs": [{
"id": "g1",
"balloonText": "[[title]]<br>[[category]]<br><b>[[value]] </b>",
"lineThickness": 1,
"bullet": "square",
"type": "step",
"bulletAlpha": 0,
"bulletSize": 4,
"bulletBorderAlpha": 0,
"valueField": "members",
'lineColor': 'pink',
'title': 'Member Response',
},
After this I want to add another graph object in Update Chart.
How to do that.

C3 Extent not working as expected

I'm creating a pretty simple line graph and want the initial load to be a section of all available data, so am setting extent on the x axis:
This is how I am setting the extent:
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
But it is ignored. The chart just shows the full extent of the data.
Is this the correct way to show a subset of the data when the chart is generated?
This is the full code and here's a fiddle (I tried a code snippet but didn't work)
const columnData = [
["x", "2017-10-01", "2017-10-02", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-15", "2017-10-16"],
["data0", -55, -50, 11, -18, 39, 65, -84, -15, 14, 81, -79, 67, -48, 38, 99, -60],
["data1", 28, 14, -99, -33, 55, 71, 58, 66, 7, -88, 99, -37, -7, 59, -13, -57],
["data2", 14, 6, -9, 25, 42, -93, -6, 67, -35, 88, 36, 45, 42, 78, 51, -88],
["data3", 31, -73, -69, 45, 55, 15, -48, 41, -64, -12, -6, 14, -69, 16, -65, -73],
["data4", 98, 60, 82, 80, -62, -47, 55, 87, -65, 37, 22, 30, 93, -69, -88, 33],
["data5", -98, 57, 71, -25, -40, 13, 72, -90, 71, -71, -21, -9, -90, 73, -94, 100]
];
const generateChart = function() {
const chart = c3.generate({
data: {
"x": "x",
"columns": columnData,
"type": "line"
},
axis: {
"x": {
"type": "timeseries",
"tick": {
"format": "%d/%m/%Y"
},
"label": {
"text": "X Label",
"position": "outer-center"
},
"padding": {
"left": 0
},
"extent": ["2017-10-01", "2017-10-05"]
},
"y": {
"label": {
"text": "Y Label",
"position": "outer-middle"
}
}
},
zoom: {
enabled: true
},
transition: {
duration: 100
},
legend: {
show: false
},
subchart: {
show: true
},
size: {
height: 500
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
};
generateChart();

As of 11th May 2018 it seems this is a bug: https://github.com/c3js/c3/issues/2357
I switched to earlier versions (see below) of C3 and D3 and it works as it should.
I am now using C3 version 0.4.10 and D3 version 3.5.0

dc.js Flatten Data vs Array of Objects and filtering

I would like to understand if the following is possible. If have two jsFiddle examples with the same dataset. One contains an array of objects while the other is flatten. I have also added some records that are not fully scoped.
Can the filter on the scatter plot work correctly for the Array of Objects dataset?
Data - Flatten : jsFiddle Example
var data = [
{"_uid": 1, "business": 'Resort', "state": {name: 'Virginia', startups: 15}},
{"_uid": 1, "business": 'Resort', "state": {name: 'Maryland', startups: 6}},
{"_uid": 3, "business": 'Training', "state": {name: 'Virginia', startups: 4}},
{"_uid": 3, "business": 'Training', "state": {name: 'Maryland', startups: 2}},
{"_uid": 3, "business": 'Training', "state": {name: 'D.C.', startups: 3}},
{"_uid": 4, "business": 'Sitting'},
{"_uid": 5, "business": 'Vet', "state": {name: 'Virginia', startups: 4}},
{"_uid": 6, "business": 'Parties', "state": {}},
{"_uid": 7, "business": 'Grooming', "state": {name: 'Virginia', startups: 4}},
{"_uid": 7, "business": 'Grooming', "state": {name: 'D.C.', startups: 3}},
];
Data - Array of Objects : jsFiddle Example
var data = [
{"_uid": 1, "business": 'Resort', "states": [{state: 'Virginia', startups: 15}, {state: 'Maryland', startups: 6}]},
{"_uid": 3, "business": 'Training', "states": [{state: 'Virginia', startups: 4}, {state: 'Maryland', startups: 2}, {state: 'D.C.', startups: 3}]},
{"_uid": 4, "business": 'Sitting'},
{"_uid": 5, "business": 'Vet', "states": [{state: 'Virginia', startups: 4}]},
{"_uid": 6, "business": 'Parties', "state": {}},
{"_uid": 7, "business": 'Grooming', "states": [{state: 'Virginia', startups: 4}, {state: 'D.C.', startups: 3}]}
];
The data is displayed correctly for both datasets.
If I select the Pet Business Type - "Grooming" and brush the scatter plot vertically on 3 the filtered data is correct for the Flatten dataset, but not correct for the Array of Objects dataset.
Flatten dataset - Filtered
CORRECT - It is showing that "Training" also has a startup value of "3"
Array of Objects - Filtered
INCORRECT - All of the business types are showing up along with the other state "Virginia" for "Grooming".
I know we are asking a lot out of Crossfilter and dc.js by not flattening the data, but is this possible?

Set in kendogrid sparkline

I am going to use sparkline in the" usage" column, just in the way that the two sparkline chart cover each other
There is a problem because when I click on the button Edite "sparkline" disappears.
Or click on "usage column" think that happens.
Why tooltip as bad as it can be displayed tooltip not regular.
Why sparkline "usage column" in all rows, there is only one row
jsfiddle code
$(document).ready(function () {
//var ds = new kendo.data.DataSource({
// transport: {
// read: {
// url: '/api/clientssnapshot',
// dataType: 'json',
// type: 'get',
// cache: false
// },
// },
// batch: true,
// pageSize: 10,
// schema: {
// model: {
// fields: {
// Mac: { editable: false, nullable: true },
// RadioName: { type: "string", validation: { required: true } },
// ApName: { type: "string", validation: { required: true, min: 1 } },
// RemoteIp: { type: "boolean" },
// TX: { type: "number", validation: { min: 0, required: true } },
// RX: { type: "number", validation: { min: 0, required: true } },
// Signal: { type: "number", validation: { min: 0, required: true } },
// Uptime: { type: "number", validation: { min: 0, required: true } },
// }
// }
// }
//});
$('.table').kendoGrid({
dataSource: {
data: [{
"Mac": "D4:CA:6D:28:D1:05",
"RadioName": "D4CA6D28D105",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 54,
"Signal": -64,
"Uptime": 797452,
"InRate": 0,
"OutRate": 0,
"AccountingId": 759,
"AccountingName": "فرشاد صفایی زاده",
"RemoteIp": "188.121.123.56",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:BD:64:92",
"RadioName": "Behrooz Hoseyn",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 18,
"Signal": -65,
"Uptime": 797446,
"InRate": 2,
"OutRate": 2,
"AccountingId": 750,
"AccountingName": "بهروز حسینی",
"RemoteIp": "188.121.123.48",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1E:B3:6C",
"RadioName": "UBNT",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 24,
"Signal": -65,
"Uptime": 310336,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.129",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1C:B1:89",
"RadioName": "Grous Tajhiz P",
"ApName": "Om11",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 6,
"Signal": -62,
"Uptime": 122116,
"InRate": 0,
"OutRate": 0,
"AccountingId": 595,
"AccountingName": "حمید شمس لواسانی",
"RemoteIp": "188.121.124.17",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:3E:91:12",
"RadioName": "Anbar Aminzade",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 36,
"RX": 36,
"Signal": -68,
"Uptime": 1131461,
"InRate": 4,
"OutRate": 4,
"AccountingId": 977,
"AccountingName": "انبار شهید امین زاده ",
"RemoteIp": "188.121.123.31",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:1A:59:D0",
"RadioName": "UBNT",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 36,
"RX": 12,
"Signal": -73,
"Uptime": 734737,
"InRate": 2,
"OutRate": 2,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.76",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:E2:2D:13",
"RadioName": "UBNT",
"ApName": "Om1",
"ApIp": "10.20.0.101",
"TX": 54,
"RX": 36,
"Signal": -72,
"Uptime": 848,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.67",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:32:24:C9",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 36,
"RX": 24,
"Signal": -78,
"Uptime": 731588,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.188",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:15:6D:FE:BB:E2",
"RadioName": "ketabforooshie",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 36,
"Signal": -72,
"Uptime": 240361,
"InRate": 0,
"OutRate": 0,
"AccountingId": 533,
"AccountingName": "قاسم رضاپور",
"RemoteIp": "188.121.124.214",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:D2:86:56",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 48,
"RX": 12,
"Signal": -72,
"Uptime": 126430,
"InRate": 0,
"OutRate": 0,
"AccountingId": 1453,
"AccountingName": "حسن قربانی",
"RemoteIp": "188.121.123.154",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}, {
"Mac": "00:27:22:78:A3:19",
"RadioName": "UBNT",
"ApName": "Om7",
"ApIp": "10.20.0.100",
"TX": 54,
"RX": 54,
"Signal": -56,
"Uptime": 58617,
"InRate": 0,
"OutRate": 0,
"AccountingId": 820,
"AccountingName": "******",
"RemoteIp": "10.10.15.39",
"IsValidInScan": true,
"Comments": null,
"ApScanId": 26173,
"InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
"OutRateHistory": "0, 5, 3, 5, 2, 5, 2, 35, 136, 35, 136, 35, 136, 164, 51, 164, 51, 164, 51, 4"
}
]
},
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
pageable: true,
columns: [{
field: "Mac",
title: "Mac",
width: 170
}, {
field: "RadioName",
title: "Radio",
width: 150
}, {
field: "ApName",
title: "Ap",
width: 80,
template: '#=ApName#'
}, {
field: "RemoteIp",
title: "Remote IP",
width: 160,
template: '#=RemoteIp#'
}, {
field: "AccountingName",
title: "Name",
width: 130,
template: ' #= AccountingName # '
}, {
field: "TX",
title: "TX",
width: 44
}, {
field: "RX",
title: "RX",
width: 50
}, {
field: "Signal",
title: "Signal",
width: 50
}, {
field: "Uptime",
title: "Uptime",
width: 78
}, {
field: "Usage",
title: "Usage",
template: '<span id="sparkline"></span>'
}, {
command: ["edit"],
title: " "
}],
editable: "popup",
});
$(".ref").click(function () {
$(".table").data("kendoGrid").dataSource.read();
});
$("#sparkline").kendoSparkline({
type: "area",
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5, 3.5],
}, {
name: 'New York',
data: [0.7, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
}],
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]
}
});
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>Search:
<input type="text" aria-controls="DataTables_Table_0">
</label>
</div>
<div class="title">
<button class="btn ref" type="submit">Refresh</button>
<h3></h3>
</div>
<div class="content">
<div class="table"></div>
</div>
thank you

After edit, the HTML elements are destroyed and recreated when the Grid updates. You will need to recreate your sparklines. It is basically the same as this issue.

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

Incorrect chart grouping / missing category labels - kendo-ui

If not all groups have the same number of points, you should use the series.categoryField instead of the categoryAxis.field. series: [{ field: "MeasuresCount", categoryField: "TINShortName", name: "#= group.value #" }], DEMO

Related

How to add vertical scroll in bar chart in chartjs, only when we have more data than space

How to add amgraph in update chart in amcharts

C3 Extent not working as expected

dc.js Flatten Data vs Array of Objects and filtering

Set in kendogrid sparkline

Categories

Resources