I am trying to hide the labels in my pie chart. I think the correct word is labels? But I could be wrong. Basically I have a pie chart That displays some data, outside of the pie chart it has a label with a color cube and a name next to it displaying what each color stands for, I would like to get rid of that, because on hover I show the same data and it takes up some valuable real estate I would like to use. Here is my Javascript code:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
Google charts Visualization, killing legend:
legend: {position: 'none'}
-- this will kill the legend in Google Charts.
Also, the JS to do it:
http://jsfiddle.net/api/post/library/pure/
legend: 'none'
So, ultimately this should do it for you:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true,
legend: none,
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
Related
I want the x-axis of google line chart to shift after 1000 data. Since I am a beginner in javascript, I was able to do this much.
i will use this code to read sensor on raspberry pi.
<script>
google.charts.load("current", { packages: ["corechart", "line"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
let data = google.visualization.arrayToDataTable([
["Year", "CPU Usage"],
[0, 0],
]);
let options = {
width: 1000,
height: 500,
legend: "top",
};
let chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
let index = 0;
setInterval(function () {
var jsonData = $.ajax({
type: "GET",
dataType: "json",
url: "HTTP://192.168.1.7:8000/",
async: false,
}).responseJSON;
let random_1 = jsonData["d7s_si"];
data.addRow([index, random_1]);
chart.draw(data, options);
index++;
}, 100);
}
</script>
I want to generate two lines into one chart, so i using join method in google chart.
I can retrieve data from SQL, but the script mentioned the data in data table is not array.
I tried to use $.parseJSON but still cannot plot to chart.
anyone can give me some hint?
Thank you in advance.
here is my script:
function drawMultiCavitiesChart() {
var options = {
title: 'Mulit Cavities vs Line',
width: 1800,
height: 700,
//bar: { groupWidth: "95%" },
//curveType: 'function',
//isStacked: true
pointSize: 8,
hAxis: { title: 'Date', format: 'M/d/yy' },
vAxis: { title: 'Total Cavities' },
//colors: ['blue'],
legend: { position: "bottom" }
};
var jsonData1 =
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiCavitiesData1",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (jsonData1) {
console.log(JSON.stringify(jsonData1));
},
});
//var data1 = google.visualization.arrayToDataTable(jsonData1);
//var data1 = google.visualization.arrayToDataTable($.parseJSON(jsonData1));
var jsonData2 =
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiCavitiesData2",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (jsonData2) {
console.log(JSON.stringify(jsonData2));
},
});
//var data2 = google.visualization.arrayToDataTable(jsonData2);
var data1 = google.visualization.arrayToDataTable($.parseJSON(jsonData1));
var data2 = google.visualization.arrayToDataTable($.parseJSON(jsonData2));
//var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0], [1, 1]], [2], [2]);
var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.LineChart($("#divMultiCavitiesChart")[0]);
chart.draw(joinedData, options);
}
and the console:
$.ajax runs asynchronously.
which means the lines of code after the $.ajax call,
will run before the $.ajax call has finished.
so you're trying to create the data tables, before the data has been received.
you need to wait for the done callback, before continuing to the next step.
(you can also use success as in your post, but that is old and deprecated)
try something similar to the following...
function drawMultiCavitiesChart() {
var data1;
var data2;
var options = {
title: 'Mulit Cavities vs Line',
width: 1800,
height: 700,
//bar: { groupWidth: "95%" },
//curveType: 'function',
//isStacked: true
pointSize: 8,
hAxis: { title: 'Date', format: 'M/d/yy' },
vAxis: { title: 'Total Cavities' },
//colors: ['blue'],
legend: { position: "bottom" }
};
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiCavitiesData1",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done(function (r1) {
data1 = google.visualization.arrayToDataTable(r1.d);
$.ajax({
type: "POST",
url: "Chart.aspx/GetMultiCavitiesData2",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done(function (r2) {
data2 = google.visualization.arrayToDataTable(r2.d);
var joinedData = new google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.LineChart($("#divMultiCavitiesChart")[0]);
chart.draw(joinedData, options);
});
});
}
I have a Pie Chart and want to auto refresh it every 5 seconds. This is my code:
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
You can use setTimeout to run the script every 5 secs. I also added an isDrawing flag so that you don't trigger the function again while it's drawing.
<script type="text/javascript">
var isDrawing = false;
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(() => {
// draw the first time
drawChart();
// start automatic refresh
setTimeout(() => {
if (!isDrawing) {
drawChart();
}
}, 5000);
});
function drawChart() {
isDrawing = true;
var options = {
width: 900,
height: 500,
title: "Partition des tickets",
legend: "left",
is3D: true
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
isDrawing = false;
},
failure: function(r) {
alert(r.d);
isDrawing = false;
},
error: function(r) {
alert(r.d);
isDrawing = false;
}
});
}
</script>
i fixed it , if any one want to update any google chart dynamicly you just need to add update() function like you see
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
width: 900,
height: 500,
title: 'Partition des tickets',
legend: 'left',
is3D: true,
};
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
updateChart();
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
function updateChart() {
$.ajax({
type: "POST",
url: "Home.aspx/GetPieChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart_Pie")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
setTimeout(function () { updateChart() }, 1000);
};
}
</script>
I m trying to figure it out that is it possible to make the json data fetched dynamically from a database with the help of php and mysql and can be plotted with highcharts that too dynamic auto updating? Any help would be appreciated.
following the code i have tried and is not working properly and want to implement to the the website for 10 lines.
<HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 2
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData1, 1000);
},
cache: false,
});
}
function requestData1() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series2 = chart.series[1],
shift = series2.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[1].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false,
});
}
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis:
{
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: '',
margin: 80
}
},
series: [
{
name: 'Random data',
data: []
},
{
name: ' hahaha',
data: []
}
],
});
});
});
</script>
</HEAD>
<BODY>
<div id="container"
style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>
*** the live-server-data.php is as followed:
<?php
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
You can try with
var options = {
chart: {
renderTo: 'chart',
},
credits: {
enabled: false
},
title: {
text: 'Impression/Click Overview',
x: -20
},
xAxis: {
categories: [{}]
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Impression';
options.series[0].data = data.impression;
options.series[1].name = 'Click';
options.series[1].data = data.clicks;
var chart = new Highcharts.Chart(options);
}
});
The highcharts website has some useful articles about working with dynamic data. That is probably the best place to start.
http://www.highcharts.com/docs/working-with-data/preprocessing-live-data
http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database
Try something out, and if you have trouble, come back here with a more specific question showing what you have tried. As it stands, your question is too broad, and will probably get closed.
An ajax request for updating data looks something like:
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is // longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
I have a Highchart object and a function to load the data:
graficaPropuestas = new Highcharts.Chart({
chart: {
height: 300,
renderTo: "graficaPropuestas",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
events: {
load: recogerDatosInforme('propuesta', $(this))
}
}
})
And the function to load the data:
function recogerDatosInforme(tipo, gr) {
$.ajax({
url: '/Licencia/recogerDatosUsuariosSistema?tipo' + tipo,
datatype: "json",
success: function(data) {
gr.series[0].setData(data);
},
cache: false
});
}
I want to pass the graficaPropuestas object to the function so I can reuse the same function to load more graphs, however I cant get this to work. If I put in the function directly the graficaPropuestas object on the success: method it work well.
Any help would be appreciated.
If you will have only one instance of graficaPropuestas better and more efficient will be to use that solution:
var graficaPropuestas = new Highcharts.Chart( ...
function recogerDatosInforme(tipo) {
$.ajax({
url: '/Licencia/recogerDatosUsuariosSistema?tipo' + tipo,
datatype: "json",
success: function(data) {
graficaPropuestas.series[0].setData(data);
},
cache: false
});
}
I resolved it by this way:
The function to get the data:
function recogerDatosInforme(tipo, gr) {
$.ajax({
url: '/Informes/recogerDatosInforme?tipo=' + tipo,
datatype: "json",
success: function(data) {
gr.series[0].setData(data);
},
cache: false
});
}
Then I create the chart whithout the events method on the init:
graficaPropuestas = new Highcharts.Chart({
chart: {
height: 300,
renderTo: "graficaPropuestas",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
}
})
And the I call the function with the graph object as an argument:
recogerDatosInforme('propuesta', graficaPropuestas)
So now I can make more chart objects and use the same function to get the data.