ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Resizing charts in C# aspx i.e. Bootstrap
Posted by Andy on Mar-15-2018 22:28
| Reply | Monitor
Attachments:
Hi Guys,

Does anyone have any experience of making dynamically resizable charts, in a similar way to bootstrap?

I have a couple of charts displayed in an aspx page as below (one line and 2 pie):

                <div class="row">
                    <div class="col-md-12">
                        <div class="white-box">
                            <h3 class="box-title">Total Output (Last 30 Days)</h3>
                         <div class="text-center"><chart:WebChartViewer ID="WebChartViewer3" runat="server" width="100%"/></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-6">
                        <div class="white-box">
                            <h3 class="box-title">Colour Output (Last 30 Days)</h3>
                            <div class="text-center"><chart:WebChartViewer ID="WebChartViewer1" runat="server" /></div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-6 ">
                        <div class="white-box">
                            <h3 class="box-title">Duplex Output (Last 30 Days)</h3>
                            <div class="text-center"><chart:WebChartViewer ID="WebChartViewer2" runat="server" /></div>
                        </div>
                    </div>
                </div>

The code to create the chart is pretty much as per a sample as below:

            var sql2 = @"<SQL IS HERE>";
            sql2 = string.Format(sql2, Globals.UserID);
            SQLDBHelper sqlHelper2 = new SQLDBHelper();
            System.Data.DataSet ds2 = sqlHelper2.Query(sql2, null);
            sqlHelper2.Close();
            DBTable hsTable3 = new DBTable(ds2.Tables[0]);

            // The data for the pie chart
            double[] data = hsTable3.getCol(0);
            // The labels for the pie chart
            string[] labels = hsTable3.getColAsString(1);
            // Create a PieChart object of size 360 x 300 pixels
            PieChart c = new PieChart(360, 300);
            // Set the center of the pie at (180, 140) and the radius to 100 pixels
            c.setPieSize(180, 140, 100);
            // Add a title to the pie chart
            //c.addTitle("Colour Output Breakdown");
            // Draw the pie in 3D
            c.set3D();
            // Set the pie data and the pie labels
            c.setData(data, labels);
            // Explode the 1st sector (index = 0)
            c.setExplode(0);
            // Output the chart
            WebChartViewer1.Image = c.makeWebImage(Chart.PNG);
            // Include tool tip for the chart
            WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='{label}: Pages {value}K ({percent}%)'");

My charts display OK in a decent sized we browser but when I shrink it or look at on a mobile device it goes off the edge.
Image1.PNG
Image2.PNG

  Re: Resizing charts in C# aspx i.e. Bootstrap
Posted by Peter Kwan on Mar-16-2018 17:57
| Reply | Monitor
Hi Andy,

There are many methods. You may try:

<chart:WebChartViewer ID="WebChartViewer3" runat="server" style="max-width:100%;height:auto" />

Hope this can help.

Regards
Peter Kwan

  Re: Resizing charts in C# aspx i.e. Bootstrap
Posted by Andy on Mar-16-2018 18:10
| Reply | Monitor
Thanks Peter, you are awesome!