<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController#graph')}}" autocomplete="off" method="POST">
{{csrf_field()}}
<div class="form-group form-group-default required" >
<label>Date</label>
<input type="date" class="form-control" name="date" required>
</div>
<button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>
Route::get('graph','Chatbot\TrackerController#graph');
I would like to find out if there is a way that i can show the chart based on selected dates as i have a dates column in my database. If there is, how should i do it? I am using highcharts to generate the pie chart.
Below are the function i did in controller and the javascript to generate the chart in the html tag.
HTML and JS in blader file
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [
{
name: 'Percentage',
colorByPoint: true,
data: [{
name: 'Questions Asked',
y: "{!! $question_asked_sum !!}",
sliced: true,
selected: true
}, {
name: 'Low Confidence',
y: "{!! $low_confidence_sum !!}"
}, {
name: 'No Answer',
y: "{!! $no_answer_sum !!}"
}, {
name: 'Missing Intent',
y: "{!! $missing_intent_sum !!}"
}]
}
]
});
});
</script>
<div class="panel-body">
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>
Function in controller
<?php
public function graph() {
$statistics = DiraStatistics::all();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
?>
You need to pass date in your request I'm assuming you are passing it with AJAX here. Since I don't know how you are doing as in your views therefore I'm just adding references for AJAX requests here
NOTE Make sure about Get and Post methods.
Then you will get your date in $request object which you can use like this:
<?php
public function graph(Request $request) {
$statistics = DiraStatistics::where('dateField',$request->date)->all();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
?>
I hope it will work for you!
Related
HTML, JS and Controller
public function graph(Request $request)
{
$statistics = DiraStatistics::where('date_access',$request->date)->get();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController#graph')}}" autocomplete="off" method="POST">
{{csrf_field()}}
<div class="form-group form-group-default required" >
<label>Date</label>
<input type="date" class="form-control" name="date" required>
</div>
<button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Percentage',
colorByPoint: true,
data: [{
name: 'Questions Asked',
y: {!! $question_asked_sum !!},
sliced: true,
selected: true
}, {
name: 'Low Confidence',
y: {!! $low_confidence_sum !!}
}, {
name: 'No Answer',
y: {!! $no_answer_sum !!}
}, {
name: 'Missing Intent',
y: {!! $missing_intent_sum !!}
}]
}]
});
});
</script>
Hi guys, so currently i have successfully done a function where i can select a date from a form (just one date) and view the data (pie chart). But i want to know how can i make 2 date input to do a "from" and "to" to do a date range to view the data in the chart of the selected dates range for example 1/1/2017 - 5/1/2017 so i can only view the data from the 1st till the 5th.
For get data beetween 2 dates you can use whereBetween function.
Here the documentation:
https://laravel.com/docs/5.5/queries
Example:
Model::whereBetween('field', array($date_start, $date_end))
so in your code something like:
DiraStatistics::whereBetween('date_access',array($request->date, $request->date_end))->get();
I can't export chart in highchart even though I have added exporting.js in vendor/bower/highcharts
This is my index
<?php
use app\assets\HighchartsAsset;
HighchartsAsset::register($this);
$this->title = 'Highcharts Test';
?>
<!-- DATA USIA 2012 RINCI FOR MAGISTER -->
<div class="container">
<div class="row">
<div class="x_panel">
<div id="containers2012usia" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<?php $this->registerJs("
$(function () {
$('#containers2012usia').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Jumlah Pelamar Magister Berdasarkan Usia Tahun 2012',
x: -20 //center
},
xAxis: $category2012usiaArray,
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Jumlah'
}
},
tooltip: {
valueSuffix: '',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
{
name: '<25',
data: $lessfaculty2012usia25,
},
{
name: '25-29',
data: $betweenfaculty2012usia25,
},
{
name: '30-34',
data: $betweenfaculty2012usia30,
},
{
name: '35-39',
data: $betweenfaculty2012usia35,
},
{
name: '40-44',
data: $betweenfaculty2012usia40,
},
{
name: '45-49',
data: $betweenfaculty2012usia45,
},
{
name: '>=50',
data: $morefaculty2012usia50,
},
{
name: 'NotComplete',
data: $notcomplete2012usia,
}
],
drilldown: {
series: $drilldown2012usiaArray
}
})
});
")?>
</div>
</div>
</div>
This is my HighchartsAsset
<?php
namespace app\assets;
use yii\web\AssetBundle;
class HighchartsAsset extends AssetBundle
{
public $sourcePath = '#bower/highcharts';
public $css = [];
public $js = [
'highcharts.js',
'highcharts-more.js',
'data.js',
'drilldown.js',
'exporting.js',
];
public $depends = [
'yii\web\JqueryAsset'
];
}
This is my chart
When I click download, the chart can't be downloaded. There is no response when I click download. What may I do so that I can export the chart? Thanks in advance
By default, Highcharts will send the data to it's own export server at export.highcharts.com. I would suggest using a tool such as Fiddler to examine the request/response, perhaps you have a firewall issue that is blocking the request?
If that's not acceptable - for example if your charts will contain sensitive company data, there are instructions here on how you can set up your own export server - it's not hard to do.
The snippet below displays tooltip like Colin Cockram : 601118.076 with the currency symbol.
How can i append my 3rd <td> values in this tooltip ?
Need tooltip like Colin Cockram : 601118.076 - Survey : 891.
How can i achieve this ?
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2);
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" style="display:none;">
<thead>
<tr>
<th></th>
<th> Test </th>
</tr>
</thead>
<tbody>
<tr>
<td>Gavin Leney</td>
<td>13592.400</td>
<td>39</td>
</tr>
<tr>
<td>Colin Cockram</td>
<td>601118.076</td>
<td>891</td>
</tr>
<tr>
<td>Alan Alker</td>
<td>152274.000</td>
<td>235</td>
</tr>
</tbody>
</table>
There is a better way to do this by making your data source as json objects rather than dataTable
Get your data to the chart using series
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
and then you can get rid of your data
data: {
table: 'datatable'
}, //This is no longer needed as you are feeding data with series. Also, now you can get rid of your entire html for data table.
See the working code below: [NOTE: I have not added all the data in series.]
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) +' - <b>Survey</b>: '+ this.point.z;
}
},
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
My solution is quite hacky jQuery wise. It's not done via the recommended highcharts way but I don't have that much time on hand to read through their documentations.
This piece of code searches for the TD with the text of the current point in the chart and then hops over two spots to get the number in the 3rd td element. The text is then included in the tooltip formatter
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) + ', Survey: '+ $('td:contains("'+ this.point.name +'")').next().next().text();
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
I have a associate php array (field_data) and i wanna pass it to JS using json_encode function: $jArray = json_encode($field_data);
I'm recieving the array in JS: var irbrowser = <?php echo $jArray; ?>; But in js when i wanna set the value in jArray to pie chart data, It does not render anything.
<?php
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: irbrowser.IE
}, {
name: "Chrome",
y: irbrowser.Chrome,
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: irbrowser.Other
}]
}]
});
});
</script>
I found the problem.
It should be converted to Float. so i use parseFloate(irbrowser) function. And set the variables to y. That code
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: parseFloat(irbrowser.IE)
}, {
name: "Chrome",
y: parseFloat(irbrowser.Chrome),
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: 0.5
}]
}]
Look at the first few lines of your script
Line 1 you stop the PHP interpreter
Line 2 you attempt a line of PHP ??
Line 3 you start the PHP interpreter
Line 4+ you try to output raw HTML while inside a PHP section
?>
$jArray = json_encode($field_data);
<?php
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
Try
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
I'm using Syncfusion JS 12.1.0.43, trying to implement line chart with custom tooltip;
Here is my HTML;
<div id="div-overview-transaction-tooltip" style="display:none;">
<div id="div-transaction-tooltip-value">
<ul>
<li>#point.totalValue#</li>
<li>#point.dataSource.totalValue#</li>
<li>{{:totalValue}}</li>
<li>#series.dataSource.totalValue#</li>
</ul>
</div>
</div>
Here is my example JSON;
{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}
And here is my JS;
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
legend: { visible: true }
});
Output:
#point.TotalValue#
#point.dataSource.TotalValue#
{{:TotalValue}}
#series.dataSource.TotalValue#
I want to show all of my property from JSON on custom tooltip. Except tooltip everything works fine.
Any help would be appriciated. Thanks already.
By default the Tool-tip template supports only point.x and point.y so there is no direct way to achieve this using Tool-tip template.
However the value "TotalValue" from JSON can be shown in the Tool-tip with the help of the following event "toolTipInitialize" as like in below code snippet.
$("#container").ejChart({
primaryXAxis: { labelFormat: "HH:00" },
primaryYAxis:
{
labelFormat: "{value}",
rangePadding: 'round',
range: { min: 0, max: 25, interval: 5 },
},
commonSeriesOptions: {
type: 'line', animation: true,
tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
border: { width: 1 }
},
series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
canResize: true,
load: "loadTheme",
size: { height: 300 },
toolTipInitialize:"rendertool"
legend: { visible: true }
});
And in the method "rendertool"
function rendertool(sender) {
sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString();
}
The sender of the event has the "model" properties of the chart where you can get the data source of the series and thus you can access any values in the JSON. Hope this works for you.
here is the sample link which I tried to achieve this.
Sample
Thanks