We Keep Coding

Can't display another Highcharts chart on my HTML page - Django

Been looking at Highcharts doc and also "Integrating Django and Highcharts" by simpleisbetterthancomplex. I'm not sure what went wrong with my codes, that the second charts ain't display. I'm using Django views.py to retrieve data from the database.
def dashboard_viewUser(request):
dataset = Profile.objects\
.values('is_active')\
.annotate(is_active_count = Count('is_active', filter = Q(is_active = True)),
not_is_active_count = Count('is_active', filter = Q(is_active = False)))\
.order_by('is_active')
categories = list()
is_active_series_data = list()
not_is_active_series_data = list()
for entry in dataset:
categories.append('%s Active' % entry['is_active'])
is_active_series_data.append(entry['is_active_count'])
not_is_active_series_data.append(entry['not_is_active_count'])
is_active_series = {
'name': 'Active user',
'data': is_active_series_data,
'color': 'green'
}
not_is_active_series = {
'name': 'Inactive user',
'data': not_is_active_series_data,
'color': 'red'
}
chart = {
'chart': {
'type': 'column'
},
'title': {
'text': 'Active user on Current Platform'
},
'xAxis': {
'categories': categories
},
'yAxis': {
'title': {
'text': 'No.of users'
},
'tickInterval': 1
},
'plotOptions': {
'column': {
'pointPadding': 0.2,
'borderWidth': 0
}
},
'series': [is_active_series, not_is_active_series]
}
dump = json.dumps(chart)
return render(request, 'accounts/dashboard.html', {
'chart': dump
})
`
def dashboard_viewDepartment(request):
dataset = Department.objects \
.values('department') \
.annotate(IT_count=Count('department', filter=Q(department="IT")),
Sales_count=Count('department', filter=Q(department="Sales")),
Admin_count=Count('department', filter=Q(department="Admin")),
HR_count=Count('department', filter=Q(department="HR")),) \
.order_by('department')
categories = list()
IT_series_data = list()
Sales_series_data = list()
Admin_series_data = list()
HR_series_data = list()
for entry in dataset:
categories.append('%s Department' % entry['department'])
IT_series_data.append(entry['IT_count'])
Sales_series_data.append(entry['Sales_count'])
Admin_series_data.append(entry['Admin_count'])
HR_series_data.append(entry['HR_count'])
IT_series = {
'name': 'IT',
'data': IT_series_data,
'color': 'green'
}
Sales_series = {
'name': 'Sales',
'data': Sales_series_data,
'color': 'yellow'
}
Admin_series = {
'name': 'Admin',
'data': Admin_series_data,
'color': 'red'
}
HR_series = {
'name': 'HR',
'data': HR_series_data,
'color': 'blue'
}
chart2 = {
'chart': {'type': 'column'},
'title': {'text': 'Containers per department'},
'xAxis': {'categories': categories},
'yAxis': {
'title': {
'text': 'No.of containers'},
'tickInterval': 1
},
'plotOptions': {
'column': {
'pointPadding': 0.2,
'borderWidth': 0
}
},
'series': [IT_series, Sales_series, Admin_series, HR_series]
}
dump = json.dumps(chart2)
return render(request, 'accounts/dashboard.html', {'chart2': dump})
<div class="carousel-inner">
<div class="carousel-item active">
<div class="border" id="container" style="min-width: 100px; height:
400px; margin: 0 auto;"></div>
<script src="https://code.highcharts.com/highcharts.src.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
Highcharts.chart('container', {
{
chart | safe
}
});
</script>
</div>
<div class="carousel-item">
<div class="border" id="container2" style="min-width: 100px;
height: 400px; margin: 0 auto;"></div>
<script src="https://code.highcharts.com/highcharts.src.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
Highcharts.chart('container2', {
{
chart2 | safe
}
});
</script>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Currently Unavailable</h3>
</div>
</div>
</div>
Expected two charts to be display on two different panel of the carousel

Actually You just need one script src of the highchart and jquery.min.js .
Change chart2 to chart.
<script src="https://code.highcharts.com/highcharts.src.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="border" id="container" style="min-width: 100px; height:
400px; margin: 0 auto;"></div>
Highcharts.chart('container', {{ chart|safe }});
</script>
</div>
<div class="carousel-item">
<div class="border" id="container2" style="min-width: 100px;
height: 400px; margin: 0 auto;"></div>
<script>
Highcharts.chart('container2', {{ chart|safe }});
</script>
</div>
<div class="carousel-item">
<div class="carousel-caption" >
<h3>Currently Unavailable</h3>
</div>
</div>
</div>

You don't need multiple jquery/highchart. Just include it once at top of the page and it would work fine for multiple charts. I've updated your code a bit and since I don't have access to your data output from safe method, I've initialised the chart as a blank one.
<!-- Place your javascripts once -->
<script src="https://code.highcharts.com/highcharts.src.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="border" id="container" style="min-width: 100px; height:
400px; margin: 0 auto;"></div>
<script>
Highcharts.chart('container', {
title: {
text: 'Im Chart 1' // Replace your {{ chart|safe }} here.
},
});
</script>
</div>
<div class="carousel-item">
<div class="border" id="container2" style="min-width: 100px;
height: 400px; margin: 0 auto;"></div>
<script>
Highcharts.chart('container2', {
title: {
text: 'Im Chart 2' //Replace your {{ chart2|safe }} here.
},
});
</script>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Currently Unavailable</h3>
</div>
</div>
</div>
Check out this fiddle for a working output.
https://jsfiddle.net/ebkr65ma/

Google charts - Labels are not showing

I was trying to create 3 charts using google charts in a single line.but it not showing the labels for the values and we can see there is lot of space was vacant in between the charts.is there any way to remove that space and show the labels properly in the graph?
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 5],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
pieSliceText: 'value',
pieHole: '0.5',
legend: {
position: 'labeled',
labeledValueText: 'both',
textStyle: {
color: 'blue',
fontSize: 14
}
},
};
var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
var chart3 = new google.visualization.PieChart(document.getElementById('chart3'));
options.title = 'industries For USA';
chart1.draw(data, options);
options.title = 'Categories For USA';
chart2.draw(data, options);
options.title = 'Categories For Construction';
chart3.draw(data, options);
}
.chart-wrapper {
float: left;
width: 33%;
}
.top-five-charts {
width: 100%;
display: block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="top-five-charts">
<div class="chart-wrapper">
<div id="chart1" class="insight-pie"></div>
</div>
<div class="chart-wrapper">
<div id="chart2" class="insight-pie"></div>
</div>
<div class="chart-wrapper">
<div id="chart3" class="insight-pie"></div>
</div>
</div>
Here is the output in normal screen

Just add this line on your JavaScript code before drawing the charts:
options.chartArea = {left: '10%', width: '100%', height: '65%'};
I've also changed the legend font size to 10.
It will look like this:
Here's the JSFiddle illustrating it: https://jsfiddle.net/6r3ms2tz/

You should have a look responsive design principles and please check out this link: https://developers.google.com/chart/interactive/docs/basic_customizing_chart
Simply change: 'legend':'right' according to the your choice.

After several tries, below worked:
Code:
let options = {
legend: {
position: "labeled",
},
chartArea: {
width: "100%"
}
};
HTML for my case is below because I am using https://github.com/FERNman/angular-google-charts
<google-chart
style="width: 100%; height: 100%;"
>
</google-chart>
HTML for your case:
<div id="chart1" class="insight-pie" style="width: 100%; height: 100%;" ></div>
Hope that helps.

I was trouble with tittle of the Highcharts

http://jsfiddle.net/Kondaldurgam/akb4Lj61/
i want name of the tittle in inside the box presently i don't have date with me so, i want to put the name of the tittle in inside the box.
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'No Date Available'
},
});

in case of no data for highcharts you may use this plugin
no-data-to-display.js
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'No Date Availavle'
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>

How do I make Highcharts half-donut appear in angular application?

I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?

I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/

JqxChart Giving error Error: Invalid negative value for <rect> attribute height="-1"

Am using JqxPanel, JqxDocking and JqxChart.
JqxPanel consists Docking windows which are working fine. when i used to place JqxChart into a window Chrome giving error Error: Invalid negative value for attribute height="-1" (repated 2 times) at tag
Please some one can help me in this regard
JavaScript deviceschart.js
var DevicesgenerateData = function () {
var devicedata = new Array();
var deviceNames =
[
"Working", "GPS Antenna","Power Removed","SIM Problem","Servicing","Damaged"
];
var deviceNos =
[
10,10,30,10,20,20
];
for (var i = 0; i < 6; i++) {
var devicerow = {};
devicerow["devicenames"] = deviceNames[i];
devicerow["devicenos"] = deviceNos[i];
devicedata[i] = devicerow;
}
return devicedata;
}
var devicesource =
{
localdata: DevicesgenerateData(),
datafields: [
{ name: 'devicenames' },
{ name: 'devicenos' }
],
datatype: "array"
};
var ddataAdapter = new $.jqx.dataAdapter(devicesource);
//, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
//$('#jqxChart').jqxChart({borderColor: 'Blue'});
// prepare jqxChart settings
var devicesettings = {
//title: "Mobile browsers share in Dec 2011",
// description: "(source: wikipedia.org)",
enableAnimations: true,
borderColor: 'Red',
showLegend: true,
legendLayout: { left: 210, top: 50, width: 100, height: 200, flow: 'vertical' },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: ddataAdapter,
colorScheme: 'scheme02',
seriesGroups:
[
{
type: 'pie',
showLabels: true,
series:
[
{
dataField: 'devicenos',
displayText: 'devicenames',
labelRadius: 70,
initialAngle: 15,
radius: 95,
centerOffset: 0,
formatSettings: { sufix: '%', decimalPlaces: 1 }
}
]
}
]
};
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqxpanel.js"></script>
<script type="text/javascript" src="js/jqxwindow.js"></script>
<script type="text/javascript" src="js/jquery.global.js"></script>
<script type="text/javascript" src="js/jqxdocking.js"></script>
<script type="text/javascript" src="js/jqxsplitter.js"></script>
<script type="text/javascript" src="js/jqxchart.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<script type="text/javascript" src="js/deviceschart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxPanel
var theme = getTheme();
$("#panel").jqxPanel({ width: "100%", height: 350, theme: theme });
$('#maindocking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 990, mode: 'docked' });
$('#maindocking').jqxDocking('disableWindowResize', 'window1');
$('#maindocking').jqxDocking('disableWindowResize', 'window2');
$('#maindocking').jqxDocking('disableWindowResize', 'window3');
$('#maindocking').jqxDocking('disableWindowResize', 'window4');
$('#maindocking').jqxDocking('disableWindowResize', 'window5');
$('#maindocking').jqxDocking('disableWindowResize', 'window6');
$('#jqxChart').jqxChart(devicesettings);
});
</script>
</head>
<body class='default'>
<div id='panel' style=" font-size: 13px; font-family: Verdana;">
<div id="maindocking">
<div id="column1docking">
<div id="window1" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
<div id="jqxChart"></div>
</div>
</div><!-- window1--->
<div id="window2" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window2--->
</div><!-- Column1 Docking-->
<div id="column2docking">
<div id="window3" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window3--->
<div id="window4" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window4--->
</div><!-- Column2 Docking-->
<div id="column3docking">
<div id="window5" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window5--->
<div id="window6" style="height: 200px;">
<div>Vehicle Information</div>
<div style="overflow: hidden;">
</div>
</div><!-- window6--->
</div><!-- Column3 Docking-->
</div> <!-- MainDocking -->
</div> <!-- Panel -->
</body>

I had the same issue , I solved it by setting the width of the containing div to be large enough to contain the chart given the settings specified .
<div id="jqxChart" style="width:680px; height:400px; vertical-align: top; display: inline-block; padding: 10px;">
Hope this helps

#Anon, Thank you for that solution. I had the same issue, but with "Raphael" framework (raphael-2.1.0.js) for drawing charts, with the same error messages as OP. Removing the max-width (css) of a parent element solved my issue.
(This was posted as solution because 50 reputation was required to add a comment to Anon's solution.)

For me this turned out to be the case because I embedded the chart in a tab div that wasn't visible on page load. When I move it to a tab that's visible on page load it works.

So I was getting this error because the data that was supplied did not entirely match my series in the seriesGroups. Some of the data was not defined correctly so when I first tried drawing the chart their code didn't like what was missing and coughed up several of these errors.
Further, I wanted to try to update my chart using new data and new seriesGroups. In making a change like that I have to call jqxChart and update the seriesGroups before changing other data.
if (chartTableArea.jqxChart("isInitialized") === true) {
if (gSettings === undefined || gSettings.title === undefined) {
gSettings = getSettings(); //sets up the gSettings
}
chartTableArea.jqxChart({ seriesGroups: gSettings.seriesGroups });
chartTableArea.jqxChart(gSettings);
} else {
//not initialized
chartTableArea.jqxChart(getSettings());
}