Updated html file to use c3.js instead of Google Charts
This commit is contained in:
Ben Cornwell-Mott
parent
fe11e71084
commit
590d2d524b
@ -1,75 +1,96 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
||||||
|
|
||||||
|
<link href="/assets/frappe/css/c3.min.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/assets/frappe/js/lib/d3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/assets/frappe/js/lib/c3.min.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
google.charts.load("current", {"packages":["corechart"]});
|
|
||||||
google.charts.setOnLoadCallback(drawChart);
|
|
||||||
function drawChart() {
|
|
||||||
var chartData = [];
|
|
||||||
{% var q = 0; %}
|
|
||||||
{% for(var i=1, l=report.columns.length; i<l; i++) { %}
|
|
||||||
|
|
||||||
{% if(__(report.columns[i].label) != __("Quotation")) { %}
|
onReady("#chart_div", function() {
|
||||||
var tempData{%=q%} = [];
|
var chartData = [];
|
||||||
var tempData{%=q+1%} = [];
|
{% var q = 0; %}
|
||||||
{% if(i == 1) { %}
|
{% for(var j=0, m=data.length+1; j<m; j++) { %}
|
||||||
tempData{%=q%}[0] = \"{%= report.columns[i].label %}\";
|
|
||||||
|
var tempData{%=j%} = [];
|
||||||
{% for(var j=0, m=data.length; j<m; j++) { %}
|
|
||||||
|
{% for(var i=1, l=report.columns.length; i<l; i++) { %}
|
||||||
tempData{%=q%}[{%=j%}+1] =\"{%= data[j][report.columns[i].field] %}\";
|
{% if(__(report.columns[i].label) != __("Quotation")) { %}
|
||||||
|
|
||||||
{% } %}
|
|
||||||
{% } else { %}
|
|
||||||
|
|
||||||
tempData{%=q%}[0] = parseInt(\"{%= report.columns[i].label %}\".replace(\"Qty: \",\"\"));
|
|
||||||
|
|
||||||
{% for(var j=0, m=data.length; j<m; j++) { %}
|
|
||||||
|
|
||||||
tempData{%=q%}[{%=j%}+1] = {% if(data[j][report.columns[i].field] == "") { if (i > 2) { %} chartData[{%=q%}-1][{%=j%}+1] {% } else { %} 0 {% } }else { %} {%=data[j][report.columns[i].field] %} {% } %};
|
|
||||||
|
|
||||||
{% } %}
|
|
||||||
chartData[{%=q%}] = tempData{%=q%};
|
|
||||||
{% q= q+1; %}
|
|
||||||
|
|
||||||
{% if(i < report.columns.length -2){ %}
|
{% if(j == 0) { %}
|
||||||
tempData{%=q%}[0] = parseInt(\"{%= report.columns[i+2].label %}\".replace(\"Qty: \",\"\")-1);
|
{% if(i == 1) { %}
|
||||||
|
tempData{%=j%}[{%=i%}-1] = \"x\";
|
||||||
|
{% } else { %}
|
||||||
|
|
||||||
|
tempData{%=j%}[{%=i%}-1] = Math.log(parseInt(\"{%= report.columns[i].label %}\".replace(\"Qty: \",\"\"))) / Math.LN10;
|
||||||
|
{% } %}
|
||||||
|
{% } else { %}
|
||||||
|
{% if(i == 1) { %}
|
||||||
|
tempData{%=j%}[{%=i%}-1] = \"{%= data[j-1][report.columns[i].field] %} \";
|
||||||
|
{% } else { %}
|
||||||
|
tempData{%=j%}[{%=i%}-1] = {% if(data[j-1][report.columns[i].field] == "") { if (i > 2) { %}
|
||||||
|
tempData{%=j%}[{%=i%}-2]
|
||||||
|
{% } else { %}
|
||||||
|
0
|
||||||
|
{% } } else { %}
|
||||||
|
{%= data[j-1][report.columns[i].field] %}
|
||||||
|
{% } %};
|
||||||
|
{% } %};
|
||||||
|
{% } %}
|
||||||
{% } else { %}
|
{% } else { %}
|
||||||
tempData{%=q%}[0] = chartData[{%=q-1%}][0]*2;
|
{% if(j == 0) { %}
|
||||||
|
{% if(i < l-1) { %}
|
||||||
{% } %}
|
tempData{%=j%}[{%=i%}-1] = Math.log(parseInt(\"{%= report.columns[i+1].label %}\".replace(\"Qty: \",\"\"))-1) / Math.LN10;
|
||||||
|
{% } else { %}
|
||||||
{% for(var j=0, m=data.length; j<m; j++) { %}
|
tempData{%=j%}[{%=i%}-1] = Math.log(2*parseInt(\"{%= report.columns[i-1].label %}\".replace(\"Qty: \",\"\"))) / Math.LN10;
|
||||||
|
{% } %}
|
||||||
|
{% } else { %}
|
||||||
|
|
||||||
tempData{%=q%}[{%=j%}+1] = {% if(data[j][report.columns[i].field] == "") { if (i > 2) { %} chartData[{%=q-1%}-1][{%=j%}+1] {% } else { %} 0 {% } }else { %} {%=data[j][report.columns[i].field] %} {% } %};
|
tempData{%=j%}[{%=i%}-1] = tempData{%=j%}[{%=i%}-2];
|
||||||
|
{% } %}
|
||||||
|
|
||||||
{% } %}
|
{% } %}
|
||||||
|
|
||||||
|
|
||||||
{% } %}
|
{% } %}
|
||||||
chartData[{%=q%}] = tempData{%=q%};
|
chartData[{%=j%}] = tempData{%=j%};
|
||||||
{% q= q+1; %}
|
|
||||||
{% } %}
|
{% } %}
|
||||||
|
console.log(chartData);
|
||||||
{% } %}
|
|
||||||
console.log(chartData);
|
|
||||||
|
|
||||||
var data = google.visualization.arrayToDataTable(chartData);
|
|
||||||
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
|
|
||||||
|
|
||||||
var options = {
|
hold = {
|
||||||
title: "Item Price Analysis for {%= filters.item %}" ,
|
bindto: "#chart_div" ,data: {
|
||||||
vAxis: {title: "Price ($)"},
|
x: "x",
|
||||||
width: 652,
|
columns: chartData
|
||||||
height: 450,
|
},
|
||||||
isStacked: false,
|
axis: {
|
||||||
enableInteractivity: false,
|
x: {
|
||||||
hAxis: {logScale: true, minValue: 1,viewWindow:{ min: 1 } }
|
tick: {
|
||||||
|
format: function (x22) { return Math.pow(10,x22).toFixed(0); },
|
||||||
|
culling: {
|
||||||
|
max: {%=report.columns.length%} / 2
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
console.log(hold);
|
||||||
|
var chart = c3.generate(hold);
|
||||||
|
});
|
||||||
|
|
||||||
|
function onReady(selector, callback) {
|
||||||
|
var intervalID = window.setInterval(function() {
|
||||||
|
if (document.querySelector(selector) !== undefined) {
|
||||||
|
window.clearInterval(intervalID);
|
||||||
|
callback.call(this);
|
||||||
|
}
|
||||||
|
}, 500);}
|
||||||
|
|
||||||
|
|
||||||
chart.draw(data, options);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
@ -104,7 +125,7 @@
|
|||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h4 class="text-center"> Analysis Chart </h4>
|
<h4 class="text-center"> Analysis Chart </h4>
|
||||||
<div id="chart_div" align="center" style="width: auto; display: inline-block !important; margin: auto !important"></div>
|
<div id="chart_div"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user