Load file into jqplot Meter Gauge Chart /AJAX&JSON
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.meterGaugeRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.json2.min.js"></script>
<div id="chart0" ></div>
CSS
.jqplot-meterGauge-label {
color: #999;
font-size: 16px;
font-family: Arial;
}
JavaScript
$.getJSON("http://cors.jejaju.com/keyscore.txt",doit)
function doit(s1){
$.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Faturamento Atual R$ 250,' + s1 + '', //Showing the value of needle in label..
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[25, 50, 75, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#363636',
tickColor: '#363636',
ringWidth: 0.8,
padding: 35,
background :"#ededed",
ticks: [0, "despesa","equilibrio","Lucro","max"],
intervalInnerRadius: 10,
intervalOuterRadius: 150,
hubRadius: 7,
//needleThickness: 5,
}
}
});
}