I have a google map this is my current code
<div class="cont" id="cont">
<p><script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'Province', 'G-Form Outlets'],
['ZA-GT', 'Gauteng', 10],
['ZA-WC', 'Western Cape', 5],
['ZA-EC', 'Eastern Cape', 2],
['ZA-NL', 'KwaZulu-Natal', 1],
['ZA-FS', 'Free State', 1],
['ZA-LP', 'Limpopo', 0],
['ZA-NW', 'North-West', 0],
['ZA-MP', 'Mpumalanga', 0],
['ZA-NC', 'Northern Cape', 0],
]);
var view = new google.visualization.DataView(data);
view.setColumns([1, 2]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
var options = {};
options['region'] = 'ZA';
options['resolution'] = 'provinces';
options['width'] = 500;
options['height'] = 500;
options['colors'] = ['#cccccc', '#C01E24'];
options['legend'] = 'none';
google.visualization.events.addListener(geochart, 'select', function() {
var selectionIdx = geochart.getSelection()[0].row;
var stateName = data.getValue(selectionIdx, 0);
var value = data.getValue(selectionIdx, 2);
if (value >= '1') {
window.open('http://e-track.co.za');}
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization"></div>
</p>
</div>
It is working great the problem is I am trying to place it in a DIV Tag but it keeps throwing it over to the left of the page where i want to place it in the middle of the box basically
<head>
<style type="text/css">
div
{
margin: 0 auto;
}
</style>
</head>
Add <Head> part in your code... Thatsall
Related
I'm struggling to open my json arranged data in AmCharts4. In my previous charts I used very simple script (chart.data = ;), which unfortunately does not work this time. So I'm using chart.dataSource.url function proposed by AmCharts documentation. When, I load example file found on web everything works fine, as soon as I switch to my file the chart is not able to load file. I'm not able to find a similar problem on web, therefore I would be very grateful for help.
Here is my example with working url and my not working file.
Thanks in advance:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<style>
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create('chartdiv', am4charts.XYChart)
// Modify chart's colors
chart.colors.list = [
am4core.color("#264B29"),
am4core.color("#94B255"),
am4core.color("#456C39"),
am4core.color("#C4D563"),
am4core.color("#698F47"),
am4core.color("#F9F871"),
];
chart.legend = new am4charts.Legend()
chart.legend.position = 'top'
chart.legend.paddingBottom = 20
chart.legend.labels.template.maxWidth = 95
var xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
xAxis.dataFields.category = 'year'
xAxis.renderer.cellStartLocation = 0.1
xAxis.renderer.cellEndLocation = 0.9
xAxis.renderer.grid.template.location = 0;
var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
function createSeries(value, name) {
var series = chart.series.push(new am4charts.ColumnSeries())
series.dataFields.valueY = value
series.dataFields.categoryX = 'year'
series.name = name
series.events.on("hidden", arrangeColumns);
series.events.on("shown", arrangeColumns);
var bullet = series.bullets.push(new am4charts.LabelBullet())
bullet.interactionsEnabled = false
bullet.dy = 30;
bullet.label.text = '{valueY}'
bullet.label.fill = am4core.color('#ffffff')
return series;
}
// Add data
//Working url
//chart.dataSource.url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json";
//My SQL produced JSON file is not working
chart.dataSource.url = "data/my-file.php";
chart.dataSource.adapter.add("parsedData", function(data) {
var newData = [];
data.forEach(function(dataItem) {
var newDataItem = {};
Object.keys(dataItem).forEach(function(key) {
if (typeof dataItem[key] === "object") {
newDataItem["_id"] = dataItem[key]["#id"];
dataItem[key]["Column"].forEach(function(dataItem) {
newDataItem[dataItem["#name"]] = dataItem["#id"];
});
} else {
newDataItem[key] = dataItem[key];
}
});
newData.push(newDataItem);
});
data = newData;
return data;
});
createSeries('cars', 'The First');
createSeries('motorcycles', 'The Second');
createSeries('bicycles', 'The Third');
//createSeries('bilanca_lsk_lst', 'T4');
function arrangeColumns() {
var series = chart.series.getIndex(0);
var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
if (series.dataItems.length > 1) {
var x0 = xAxis.getX(series.dataItems.getIndex(0), "yearX");
var x1 = xAxis.getX(series.dataItems.getIndex(1), "yearX");
var delta = ((x1 - x0) / chart.series.length) * w;
if (am4core.isNumber(delta)) {
var middle = chart.series.length / 2;
var newIndex = 0;
chart.series.each(function(series) {
if (!series.isHidden && !series.isHiding) {
series.dummyData = newIndex;
newIndex++;
}
else {
series.dummyData = chart.series.indexOf(series);
}
})
var visibleCount = newIndex;
var newMiddle = visibleCount / 2;
chart.series.each(function(series) {
var trueIndex = chart.series.indexOf(series);
var newIndex = series.dummyData;
var dx = (newIndex - trueIndex + middle - newMiddle) * delta
series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
})
}
}
}
});
// end am4core.ready()
</script>
I found a typing error in my-file.php
Anyhow, after I solved typing issue the chart.dataSource.url function still did not work, but It worked using next php include script.
chart.data = <?php include './data/my-file.php'; ?>;
EDITED
I have a code to show a html in wxPython WebView but it just load the html without the css and javascript inside the html file. Here is my code.
gui.py
class MainFrame(wx.Frame):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"PlagDetect", pos = wx.DefaultPosition, size = wx.Size( 493,389 ),
self.htmlSummary = wx.html2.WebView.New(self)
page = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summary</title>
</head>
<body>
<h1>Summary</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
"""
summary.htmlSummary.SetPage(page, "")
I've found the answer to create Pie Chart in other way with PieCtrl instead of using WebView, thanks to mr #Rolf of Saxony . The answer is written below.
In answer to your comment, "is there any other way to create a pie chart in wxpython", yes, see: https://wxpython.org/Phoenix/docs/html/wx.lib.agw.piectrl.PieCtrl.html
At it's simplest:
import wx
import wx.lib.agw.piectrl
from wx.lib.agw.piectrl import PieCtrl, PiePart
class Frame(wx.Frame):
def __init__(self, parent):
wx.Frame.__init__ (self, parent, -1, "Simple Pie Chart")
panel = wx.Panel(self, -1, size=(650,650))
# Create A Simple PieCtrl With 3 Sectors
self._pie = PieCtrl(panel, -1, wx.DefaultPosition, wx.Size(180,270))
self._pie.GetLegend().SetTransparent(True)
self._pie.GetLegend().SetHorizontalBorder(10)
self._pie.GetLegend().SetWindowStyle(wx.STATIC_BORDER)
self._pie.GetLegend().SetLabelFont(wx.Font(10, wx.FONTFAMILY_DEFAULT,
wx.FONTSTYLE_NORMAL,
wx.FONTWEIGHT_NORMAL,
False, "Courier New"))
self._pie.GetLegend().SetLabelColour(wx.Colour(0, 0, 127))
self._pie.SetHeight(10)
self._pie.SetAngle(0.35)
part = PiePart()
part.SetLabel("Label_1")
part.SetValue(300)
part.SetColour(wx.Colour(200, 50, 50))
self._pie._series.append(part)
part = PiePart()
part.SetLabel("Label 2")
part.SetValue(200)
part.SetColour(wx.Colour(50, 200, 50))
self._pie._series.append(part)
part = PiePart()
part.SetLabel("Label 3")
part.SetValue(50)
part.SetColour(wx.Colour(50, 50, 200))
self._pie._series.append(part)
self.Show()
app = wx.App()
frame = Frame(None)
app.MainLoop()
After a tiny clean up of your posted code, it appears to work well. Although, I don't see any css, the javascript section works
Note: I run on Linux
import wx
import wx.html2
class MainFrame(wx.Frame):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = u"PlagDetect", pos = wx.DefaultPosition, size = wx.Size( 600,450 ))
self.htmlSummary = wx.html2.WebView.New(self)
page = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summary</title>
</head>
<body>
<h1>Summary</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
"""
self.htmlSummary.SetPage(page, "")
if __name__ == "__main__":
app = wx.App()
frame_1 = MainFrame(None)
frame_1.Show()
app.MainLoop()
I am getting dynamically generated data from my Raspberry PI in .csv format and I want to make a webpage for my institute to analyze the waveform of the output . The main feature of this graph is that the graph should auto-update according to the modified data. How should I go about making this?
I am assuming that the solution you are looking for must work in HTML 5 and JavaScript where there is NO server side processing. The raspberry pi posts a file to the server.
We are using morris charts which is JavaScript library
http://morrisjs.github.io/morris.js/
Morris uses a json format
1: read the csv file
2: convert the csv data to a json object
3: initialise the chart
try this example csv data
"elapsed","value",b
"Oct-12",24,2
"Oct-13",34,22
"Oct-14",33,7
"Oct-15",22,6
"Oct-16",28,17
"Oct-17",60,15
"Oct-18",60,17
"Oct-19",70,7
"Oct-20",67,18
"Oct-21",86,18
"Oct-22",86,18
$(document).ready(function() {
$.ajax({
url: "linechartdata.csv",
success: function(data) {
processData(data)
}
});
});
function processData(data) {
var record_num = 3; // or however many elements there are in each row
var dataLines = data.split(/\r\n|\n/);
var entries = dataLines[0].split(',');
var records = [];
var headers = entries.splice(0, record_num);
console.log(dataLines.length)
for (var i = 1; i < dataLines.length; i++) {
var obj = dataLines[i].split(',');
if (obj.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
//doing it this way to get strings and numbers
var field01;
var field02;
var field03;
if (j == 0) {
field01 = obj[j]
}
if (j == 1) {
field02 = obj[j]
}
if (j == 2) {
field03 = obj[j]
}
var o = {
elapsed: field01,
value: field02,
b: field03
}
records.push(o);
}
}
}
initChart(records)
}
function initChart(records) {
var chart = Morris.Line({
element: 'morris-chart-network',
data: records,
axes: false,
xkey: 'elapsed',
ykeys: ['value', 'b'],
labels: ['Download Speed', 'Upload Speed'],
yLabelFormat: function(y) {
return y.toString() + ' Mb/s';
},
gridEnabled: false,
gridLineColor: 'transparent',
lineColors: ['#5b6b79', '#a5a5a5'],
lineWidth: [2, 1],
pointSize: [0, 2],
fillOpacity: .7,
gridTextColor: '#999',
parseTime: false,
resize: true,
behaveLikeLine: true,
hideHover: 'auto'
});
};
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Morris Chart</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<body>
<div>Morris Chart</div>
<div id="morris-chart-network" style="width:800px;height:600px">
</div>
<div>
example
</div>
I can't get the zoomout option enabled for my Google Visualization Geomap.. I'm trying to enable it when the user has clicked on a region.. This is my code:
google.load('visualization', '1', {packages: ['geochart']});
var width, height, selectedRegion, resolution;
window.onload = function(){
width = 556;
height = 400;
selectedRegion = 'world';
resolution = 'subcontinents';
};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Distributors');
data.addRows([
[{v:"005", f:"South America"}, 0],
[{v:"011", f:"Western Africa"}, 46],
[{v:"013", f:"Central America"}, 299],
[{v:"014", f:"Eastern Africa"}, 63.9],
[{v:"015", f:"Northern Africa"}, 255.7],
[{v:"017", f:"Middle Africa"}, 21.4],
[{v:"018", f:"Southern Africa"}, 244.5],
[{v:"029", f:"Caribbean"}, 76.5],
[{v:"030", f:"Eastern Asia"}, 5712.9],
[{v:"034", f:"Southern Asia"}, 1275.1],
[{v:"035", f:"South-Eastern Asia"}, 639.2],
[{v:"039", f:"Southern Europe"}, 777.8],
[{v:"053", f:"Australia and New Zealand"}, 272],
[{v:"054", f:"Melanesia"}, 6.3],
[{v:"057", f:"Micronesia"}, 0],
[{v:"061", f:"Polynesia"}, 0],
[{v:"143", f:"Central Asia"}, 0],
[{v:"145", f:"Western Asia"}, 0],
[{v:"150", f:"Europe"}, 0],
[{v:"151", f:"Eastern Europe"}, 0],
[{v:"154", f:"Northern Europe"}, 0],
[{v:"155", f:"Western Europe"}, 0]
]);
var options = {
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: resolution,
region: selectedRegion,
height: height,
width: width
};
var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(geochart, 'regionClick', function(e) {
var clickedRegion = e['region'];
options.region = clickedRegion;
options.resolution = "country";
options.showZoomOut = true;
geochart.draw(data, options);
});
geochart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
Could someone please tell me what i'm doing wrong? The zoom out button is not showing up..
I am trying to make a chart with growth baby table I have in DB... I lost the idea and right now I don't know how to do it... this is the chart I need to show when the doctor insert the height and weight of every child...need to show the inserted the percentiles data and that will depend of the height and weight of the baby to show the graph (gray line)...
here is my code until now (EDITED WITH NEW CODE):
<?php
include 'includes/configs.php';
/*
* $normal is an array of (edad => peso) key/value pairs
* $desnutricion is an array of (edad => peso) key/value pairs
* $desnutricionSevera is an array of (edad => peso) key/value pairs
*
* you can hard-code these or pull them from a database, whatever works for you
*/
$sql = $conn->prepare("SELECT * FROM ESTATURA WHERE edad<>'' AND peso<>'' AND id_paciente = 1");
$sql->execute();
$data = array(array('Meses', $apellido, 'Normal', 'Desnutricion', 'Desnutricion Severa'));
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$edad = $row['edad'];
// use (int) to parse the value as an integer
// or (float) to parse the value as a floating point number
// use whichever is appropriate
$edad = (int) preg_replace('/\D/', '', $edad);
$peso = $row['peso'];
$peso = (float) preg_replace('/\D/', '', $peso);
$data[] = array($peso, $edad, $normal[$edad], $desnutricion[$edad], $desnutricionSevera[$edad]);
$data1[] = array($peso, $edad);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([<?php echo json_encode($data); ?>]);
// sort the data by "Meses" to make sure it is in the right order
data.sort(0);
var options = {
title: 'Grafica de Crecimiento de niñas de 0 a 24 meses',
hAxis: {
title: 'Meses',
titleTextStyle: {color: '#333'}
},
vAxis: {
minValue: 0
},
series: {
0: {
<?php echo implode(",", $peso); ?>
type: 'line'
},
1: {
// series options for normal weight
type: 'area'
},
2: {
// series options for desnutricion
type: 'area'
},
3: {
// series options for desnutricion severa
type: 'area'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 400px;"></div>
</body>
</html>
I don't understand how can insert the default variables (normal, desnutricion and desnutricion severa) with the baby variable.. I need to create a new table with the defaults data and then make a union? or just insert the variables in every series??
--OLD CODE--
<?php
include 'includes/configs.php';
$sql = $conn->prepare("SELECT nombre, apellido, edad, peso FROM ESTATURA WHERE edad<>'' AND peso<>'' ");
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$nombre = trim(addslashes($row['nombre']));
$lapellido = trim(addslashes($row['apellido']));
$edad = $row['edad'];
$edad = preg_replace('/\D/', '', $edad);
$peso = $row['peso'];
$peso = preg_replace('/\D/', '', $peso);
$myurl[] = "['".$nombre." ".$apellido."', ".$edad.",".$peso."]";
}
print_r($myurl);
echo implode(",", $myurl);
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Meses', 'Normal', 'Desnutrición', 'Desnutrición Severa'],
/*['0', 4.23, 2.39, 2.00],
['1', 5.55, 3.10, 2.85],
['2', 6.75, 3.95, 3.41],
['3', 7.60, 4.50, 4.00],
['4', 8.23, 5.00, 4.40],
['5', 8.81, 5.38, 4.80],
['6', 9.30, 5.71, 5.11],
['7', 9.87, 6.00, 5.38],
['8', 10.19, 6.21, 5.58],
['9', 10.56, 6.47, 5.76],
['10', 10.95, 6.66, 5.95],
['11', 11.20, 6.80, 6.10],
['12', 11.55, 7.00, 6.21],
['13', 11.91, 7.20, 6.40],
['14', 12.10, 7.38, 6.58],
['15', 12.37, 7.54, 6.77],
['16', 12.60, 7.75, 6.85],
['17', 12.96, 7.86, 7.00],
['18', 13.16, 8.05, 7.20],
['19', 13.41, 8.20, 7.31],
['20', 13.72, 8.38, 7.42],
['21', 14.02, 8.49, 7.61],
['22', 14.24, 8.70, 7.79],
['23', 14.68, 8.90, 7.95],
['24', 14.90, 9.00, 8.00]*/
<?php echo implode(",", $myurl); ?>
]);
var options = {
title: 'Grafica de Crecimiento de niñas de 0 a 24 meses',
hAxis: {title: 'Meses', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 800px; height: 400px;"></div>
inside of /*.....*/ is the percentiles that I need to show with the data in mysql...but I comented because the chart is not shown when that data don't have /*...*/
here the chart right now..
can you help me with my type of chart?
Best Regards
Andrés Valencia
This is the basic framework you will need to make this work:
/*
* $normal is an array of (edad => peso) key/value pairs
* $desnutricion is an array of (edad => peso) key/value pairs
* $desnutricionSevera is an array of (edad => peso) key/value pairs
*
* you can hard-code these or pull them from a database, whatever works for you
*/
$sql = $conn->prepare("SELECT edad, peso FROM ESTATURA WHERE <criteria to select baby>");
$sql->execute();
$data = array(array('Meses', $apellido, 'Normal', 'Desnutricion', 'Desnutricion Severa'));
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$edad = $row['edad'];
// use (int) to parse the value as an integer
// or (float) to parse the value as a floating point number
// use whichever is appropriate
$edad = (int) preg_replace('/\D/', '', $edad);
$peso = $row['peso'];
$peso = (float) $peso;
$data[] = array($edad, $peso, $normal[$edad], $desnutricion[$edad], $desnutricionSevera[$edad]);
}
Then, in your javascript:
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);
// sort the data by "Meses" to make sure it is in the right order
data.sort(0);
var options = {
title: 'Grafica de Crecimiento de niñas de 0 a 24 meses',
hAxis: {
title: 'Meses',
titleTextStyle: {color: '#333'}
},
vAxis: {
minValue: 0
},
series: {
0: {
// series options for this babys weight
type: 'line'
},
1: {
// series options for normal weight
type: 'area'
},
2: {
// series options for desnutricion
type: 'area'
},
3: {
// series options for desnutricion severa
type: 'area'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Give that a try and see if it works for you.