I have imported the jqwidgets script however the chart does not render. What am I missing?
<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart">
</div>
/*
* https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm
* */
document.addEventListener('DOMContentLoaded', (event) => {
var incidentData = '[{"date":"2020-11-06T00:00:00Z","active":0,"expired":6},{"date":"2020-11-07T00:00:00Z","active":0,"expired":5},{"date":"2020-11-08T00:00:00Z","active":0,"expired":6},{"date":"2020-11-09T00:00:00Z","active":0,"expired":7},{"date":"2020-11-10T00:00:00Z","active":0,"expired":5},{"date":"2020-11-11T00:00:00Z","active":0,"expired":59},{"date":"2020-11-12T00:00:00Z","active":0,"expired":16},{"date":"2020-11-13T00:00:00Z","active":0,"expired":11},{"date":"2020-11-14T00:00:00Z","active":0,"expired":104},{"date":"2020-11-15T00:00:00Z","active":0,"expired":18},{"date":"2020-11-16T00:00:00Z","active":0,"expired":22},{"date":"2020-11-24T00:00:00Z","active":0,"expired":9},{"date":"2020-11-28T00:00:00Z","active":0,"expired":48},{"date":"2020-11-17T00:00:00Z","active":0,"expired":9},{"date":"2020-11-20T00:00:00Z","active":0,"expired":22},{"date":"2020-11-18T00:00:00Z","active":0,"expired":19},{"date":"2020-11-23T00:00:00Z","active":0,"expired":11},{"date":"2020-11-21T00:00:00Z","active":0,"expired":10},{"date":"2020-11-22T00:00:00Z","active":0,"expired":6},{"date":"2020-11-19T00:00:00Z","active":0,"expired":6},{"date":"2020-11-26T00:00:00Z","active":0,"expired":9},{"date":"2020-11-27T00:00:00Z","active":0,"expired":3},{"date":"2020-11-25T00:00:00Z","active":0,"expired":5}]';
var incidentDataSource = {
datatype: "json",
datafields: [
{ name: 'date', type: 'date', format: 'dd.MMM.yyyy' },
{ name: 'active', type: 'number' },
{ name: 'expired', type: 'number' },
],
localdata: incidentData,
sortcolumn: 'date',
sortdirection: 'asc'
};
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var incidentAdapter = new $.jqx.dataAdapter(incidentDataSource, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var incidentChartSettings = {
title: "Incidents over time",
description: "Recorded #data.Sum(s=>s.active+s.expired) incidents in #data.Count() days",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
source: incidentAdapter,
width: 300,
height:300,
xAxis: {
formatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
},
dataField: 'date',
type: 'date',
valuesOnTicks: true,
baseUnit: 'month',
minValue: '#data.Min(m=>m.date).ToString("dd-mm-yyyy")',
maxValue: '#data.Max(m=>m.date).ToString("dd-mm-yyyy")',
tickMarks: {
visible: true,
interval: 10
},
unitInterval: 1,
gridLines: {
visible: true,
step: 1,
color: '#9b6f71'
},
labels: {
angle: -45,
rotationPoint: 'topright',
offset: { x: 0, y: -25 }
}
},
valueAxis: {
visible: true,
title: { text: 'Incidents per day<br/>' },
tickMarks: { color: '#8e0a14' },
},
colorScheme: 'scheme04',
seriesGroups: [{
type: 'line',
title: { text: 'Active Incidents' },
toolTipFormatSettings: {
decimalPlaces: 0,
thousandsSeparator: ',',
},
series: [
{ displayText: 'Active', dataField: 'active' },
{ displayText: 'Expired', dataField: 'expired' },
]
}]
};
$('#jqxIncidentChart').jqxChart(incidentChartSettings);
});
The version that generated the chart for me is a bit different, I noted that height and width are definitely not properties of the chart.
it is finally showing the attacks against the site
I have included all the code so that anyone else can see where I get the data from. I generate the java using this code:
#inject Walter.Web.FireWall.IFireWall _fireWall
#{
var data = _fireWall.Incidents.All()
.Where(where => where.Reported > DateTime.Now.AddYears(-1))
.GroupBy(groupOn => groupOn.Reported.Date)
.Select(source => new
{
date = source.Key,
active = source.Count(w => w.Expires > DateTime.Now),
expired = source.Count(w => w.Expires < DateTime.Now),
}).OrderBy(order=>order.date)
.ToArray();
}
<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var dataIncident = '#Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(data))';
var sourceIncidents =
{
datatype: "json",
datafields: [
{ name: 'date' },
{ name: 'active' },
{ name: 'expired' }
],
localdata: dataIncident
};
var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var incidentChartSettings = {
title: "Incidents over time",
description: "Recorded #data.Sum(count=>count.active+count.expired) incidents in #((int)(data.Max(max=>max.date)-data.Min(min=>min.date)).TotalDays) days",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
source: dataAdapterIncidents,
xAxis:
{
dataField: 'date',
formatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
},
type: 'date',
baseUnit: 'day',
minValue: '#data.Min(min=>min.date).ToString("dd-MM-yyyy")',
maxValue: '#data.Max(max=>max.date).ToString("dd-MM-yyyy")',
valuesOnTicks: true,
tickMarks: {
visible: true,
interval: 20,
color: '#BCBCBC'
},
unitInterval: 5,
gridLines: {
visible: true,
interval: 5,
color: '#BCBCBC'
},
labels: {
angle: -45,
rotationPoint: 'topright',
offset: { x: 0, y: -25 }
}
},
valueAxis:
{
visible: true,
title: { text: 'Incident on day<br>' },
tickMarks: { color: '#BCBCBC' }
},
colorScheme: 'scheme06',
seriesGroups:
[
{
type: 'line',
series: [
{ dataField: 'active', displayText: 'active' },
{ dataField: 'expired', displayText: 'expired' }
]
}
]
};
$('#jqxIncidentChart').jqxChart(incidentChartSettings);
});
</script>
it generates this output:
<!--Placeholder for the chart-->
<div id="jqxIncidentChart" class="chart" >
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var dataIncident = '[{"date":"2020-11-06T00:00:00Z","active":0,"expired":6},{"date":"2020-11-07T00:00:00Z","active":0,"expired":5},{"date":"2020-11-08T00:00:00Z","active":0,"expired":6},{"date":"2020-11-09T00:00:00Z","active":0,"expired":7},{"date":"2020-11-10T00:00:00Z","active":0,"expired":5},{"date":"2020-11-11T00:00:00Z","active":0,"expired":59},{"date":"2020-11-12T00:00:00Z","active":0,"expired":16},{"date":"2020-11-13T00:00:00Z","active":0,"expired":11},{"date":"2020-11-14T00:00:00Z","active":0,"expired":104},{"date":"2020-11-15T00:00:00Z","active":0,"expired":18},{"date":"2020-11-16T00:00:00Z","active":0,"expired":22},{"date":"2020-11-17T00:00:00Z","active":0,"expired":9},{"date":"2020-11-18T00:00:00Z","active":0,"expired":19},{"date":"2020-11-19T00:00:00Z","active":0,"expired":6},{"date":"2020-11-20T00:00:00Z","active":0,"expired":22},{"date":"2020-11-21T00:00:00Z","active":0,"expired":10},{"date":"2020-11-22T00:00:00Z","active":0,"expired":6},{"date":"2020-11-23T00:00:00Z","active":0,"expired":11},{"date":"2020-11-24T00:00:00Z","active":0,"expired":9},{"date":"2020-11-25T00:00:00Z","active":0,"expired":5},{"date":"2020-11-26T00:00:00Z","active":0,"expired":9},{"date":"2020-11-27T00:00:00Z","active":0,"expired":3},{"date":"2020-11-28T00:00:00Z","active":0,"expired":48}]';
var sourceIncidents =
{
datatype: "json",
datafields: [
{ name: 'date' },
{ name: 'active' },
{ name: 'expired' }
],
localdata: dataIncident
};
var dataAdapterIncidents = new $.jqx.dataAdapter(sourceIncidents);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var incidentChartSettings = {
title: "Incidents over time",
description: "Recorded 416 incidents in 22 days",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
source: dataAdapterIncidents,
xAxis:
{
dataField: 'date',
formatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
},
type: 'date',
baseUnit: 'day',
minValue: '06-11-2020',
maxValue: '28-11-2020',
valuesOnTicks: true,
tickMarks: {
visible: true,
interval: 20,
color: '#BCBCBC'
},
unitInterval: 5,
gridLines: {
visible: true,
interval: 5,
color: '#BCBCBC'
},
labels: {
angle: -45,
rotationPoint: 'topright',
offset: { x: 0, y: -25 }
}
},
valueAxis:
{
visible: true,
title: { text: 'Incident on day<br>' },
tickMarks: { color: '#BCBCBC' }
},
colorScheme: 'scheme06',
seriesGroups:
[
{
type: 'line',
series: [
{ dataField: 'active', displayText: 'active' },
{ dataField: 'expired', displayText: 'expired' }
]
}
]
};
$('#jqxIncidentChart').jqxChart(incidentChartSettings);
});
</script>
Please i have this ajax code working fine but my problem is how to display it on highchart. This is the ajax code
function ajaxGetRadiologyRecord() {
let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
let request = $.ajax({
method: 'GET',
url: urlPath,
});
request.done(function( response ) {
console.log(response);
let months = response.months;
let monthlyRecord = response.monthly_record_count;
});
}
when i log the response am having the data in an array. i.e the months and the records. I kept both is seperate variables months and monthlyRecord.
here is the js highchart code
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: ajaxGetRadiologyRecord()
}
},
title: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb',
'Masr',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 2
}
},
series: [{
name: 'Patients',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(153, 153, 153, 0.5)'],
[1, '#f3f4f4']
]
}
}]
});
My problem now is how to replace the categories array with the months from ajax and data[] with monthlyRecord from the ajax. Thanks.
there are different ways, but you can do this way,
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: ajaxGetRadiologyRecord()
}
},
. . .
series: [
{
name: 'Patients',
data: []
}
]
});
define your series here , can define multiple series
function ajaxGetRadiologyRecord() {
let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
$.ajax({
method: 'GET',
url: urlPath,
});
request.done(function( response ) {
console.log(response);
chart.addSeries({
name: "Patients",
data: response.monthly_record_count
});
});
}
I have a column chart. When clicking one of the vertical bars, the color of the selected bar changes. I want to disable this behaviour by disabling the detection of the 'click' event on the graph so when the user clicks there nothing happens.
Anyone knows how to do that?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
backgroundColor: 'transparent',
container: {
onclick : null
}
},
colors: ['#27A1DE'],
title: {
text: null
},
credits : {
enabled: false
},
exporting : {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'h',
align: 'high',
offset: -15
},
tickColor : 'transparent',
labels: {
style: {
fontWeight:'bold'
},
y: 12,
formatter: function() {
var index = this.axis.categories.indexOf(this.value);
var yValue = this.chart.series[0].yData[index];
if (yValue === 0){
return '<span>'+this.value+'</span>';
} else {
return '<span style="color:#009DE0;">'+this.value +'</span>';
}
}
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
title: {
align: 'high',
rotation: 0,
text: 'kWh',
offset: 0,
y: -2
}
},
plotOptions: {
column: {
pointPadding: 0.05,
groupPadding: 0,
dataLabels : {
enabled: true,
crop :false,
overflow: 'none',
rotation: 270,
x:2,
y:-14,
style: {
color: '#009DE0',
fontSize: 'xx-small',
},
formatter: function() {
if (this.y != 0){
return '<span>'+this.y +'</span>';
} else {
return '<span style="display:none;">'+this.y +'</span>';
}
}
},
borderWidth: 0,
events: {
click: function(e){
//this.update({ color: '#27a1de' }, true, false);
e.preventDefault();
return false;
}
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
},
series: [{
name: '',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
tooltip: {
enabled: false
}
});
Fiddle : here
Thanks
the way I understood your problem, you want to remove the style change on mouse hover (as there is no color change on click in your fiddle unlike you described).
http://jsfiddle.net/6pur4o1w/
states: { hover: 'none' }
in the series should do what you want.