jQuery UI Widgets › Forums › Chart › JQXCHART IN MOBILE
Tagged: charting
This topic contains 4 replies, has 2 voices, and was last updated by athenea 11 years, 6 months ago.
-
AuthorJQXCHART IN MOBILE Posts
-
HELLO GOOD! NIGHT!
HELP ME I HAVE A QUESTION
I NEED PUT A JQXCHART IN MOBILE VERSION FOR ANDROID AND IOS
I TRY TO PUT WIDTH:100% AND HEIGTH:100% but not working
how can i display the jqxchart in mobile?
some idea?
Its very importan thanks
Hi athenea,
Here’s a sample which shows how to create a Chart that is with 100% width and height.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Bar Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <style> html, body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; } </style> <script type="text/javascript"> $(document).ready(function () { // prepare chart data var sampleData = [ { Country: 'China', Population: 1347350000, Percent: 19.18}, { Country: 'India', Population: 1210193422, Percent: 17.22}, { Country: 'USA', Population: 313912000, Percent: 4.47}, { Country: 'Indonesia', Population: 237641326, Percent: 3.38}, { Country: 'Brazil', Population: 192376496, Percent: 2.74}]; // prepare jqxChart settings var settings = { title: "Top 5 most populated countries", description: "Statistics for 2011", showLegend: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { dataField: 'Country', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='jqxChart' style="width:100%; height:100%; position: relative; left: 0px; top: 0px;"> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi thank you for your answer
I done your example in my apllication
my code is:
@model IEnumerable
@{
ViewBag.Title = “ChartGrafico”;
}@section grafico
{html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}$(document).ready(function () {
// prepare the data
var sampleData = [
{ Country: ‘China’, Population: 1347350000, Percent: 19.18 },
{ Country: ‘India’, Population: 1210193422, Percent: 17.22 },
{ Country: ‘USA’, Population: 313912000, Percent: 4.47 },
{ Country: ‘Indonesia’, Population: 237641326, Percent: 3.38 },
{ Country: ‘Brazil’, Population: 192376496, Percent: 2.74 }];// prepare jqxChart settings
var settings = {
title: “Top 5 most populated countries”,
description: “Statistics for 2011″,
showLegend: true,
enableAnimations: true,
padding: { left: 20, top: 5, right: 20, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
dataField: ‘Country’,
showGridLines: true,
flip: false
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
orientation: ‘horizontal’,
columnsGapPercent: 100,
toolTipFormatSettings: { thousandsSeparator: ‘,’ },
valueAxis:
{
flip: true,
unitInterval: 100000000,
maxValue: 1500000000,
displayValueAxis: true,
description: ”,
formatFunction: function (value) {
return parseInt(value / 1000000);
}
},
series: [
{ dataField: ‘Population’, displayText: ‘Population (millions)’ }
]
}
]
};// setup the chart
$(‘#jqxChart’).jqxChart(settings);
});}
GraficaI have used Visual Studio 2012
and MVC4
but when I run the aplication the chart didnĀ“t displaybut when i put this line
work correctly…..
mmmm
am i doing bad some????????
Thank you
this line
well jeje when widht:400px and heigth:400px work well
-
AuthorPosts
You must be logged in to reply to this topic.