jQuery UI Widgets › Forums › Chart › jqxchart
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 3 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Authorjqxchart Posts
-
Hello sir,
I have two jqxChart in my code and I need to display that on same position,that is switching both of the charts on the click of a button.
How to display both the charts like this, hiding one on click of a button.
Please give reply as soon as possible.Regards
Priyanka jainHello Priyanka jain,
Here is an example:
<html lang="en"> <head> <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> <script type="text/javascript"> $(document).ready(function () { // chart1 data var sampleData1 = [ { Day: 'Monday', Keith: 30, Erica: 15, George: 25 }, { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 }, { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 }, { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 }, { Day: 'Friday', Keith: 20, Erica: 20, George: 25 }, { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 }, { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 } ]; var settings1 = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise", padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData1, categoryAxis: { dataField: 'Day', showGridLines: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 30, seriesGapPercent: 0, valueAxis: { minValue: 0, maxValue: 100, unitInterval: 10, description: 'Time in minutes' }, series: [ { dataField: 'Keith', displayText: 'Keith' }, { dataField: 'Erica', displayText: 'Erica' }, { dataField: 'George', displayText: 'George' } ] } ] }; $('#chart1').jqxChart(settings1); // chart2 data var sampleData2 = [ { Day: 'Monday', Keith: 30, Erica: 45, George: 25 }, { Day: 'Tuesday', Keith: 25, Erica: 18, George: 30 }, { Day: 'Wednesday', Keith: 30, Erica: 20, George: 11 }, { Day: 'Thursday', Keith: 15, Erica: 25, George: 13 }, { Day: 'Friday', Keith: 20, Erica: 20, George: 20 }, { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 }, { Day: 'Sunday', Keith: 33, Erica: 45, George: 19 } ]; var settings2 = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise", padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData2, categoryAxis: { dataField: 'Day', showGridLines: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 30, seriesGapPercent: 0, valueAxis: { minValue: 0, maxValue: 100, unitInterval: 10, description: 'Time in minutes' }, series: [ { dataField: 'Keith', displayText: 'Keith' }, { dataField: 'Erica', displayText: 'Erica' }, { dataField: 'George', displayText: 'George' } ] } ] }; $('#chart2').jqxChart(settings2); $('#chart2').css("display", "none"); $("#toggleCharts").click(function () { if ($("#chart2").css("display") == "none") { $("#chart1").css("display", "none"); $("#chart2").css("display", "block"); } else { $("#chart2").css("display", "none"); $("#chart1").css("display", "block"); }; }); }); </script> </head> <body style="background: white;"> <button id="toggleCharts"> Toggle charts</button> <div id='chart1' style="width: 600px; height: 400px;"> </div> <div id='chart2' style="width: 600px; height: 400px;"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.