Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap.

My goal is to save a .aspx page as an HTML file within my application.

Upon writing the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.html.simpleparser;
using iTextSharp.text.pdf;


 protected void btnExport_Click(object sender, EventArgs e)
    {

        string FileNamePath = @"D:\Test\Export.html";
        StreamWriter sWriter = File.CreateText(FileNamePath);

        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
  pnlData.RenderControl(htw);
        sWriter.WriteLine(sw.ToString());
  sWriter.Close();
    }

   <panel id="pnlData" runat="server">


<style type="text/css">

//given css here

</style>

 <div class="col-sm-12">
        <div class="col-sm-12">
            <!-- List starts -->
            <ul class="today-datas">
                <!-- List #1 -->
                <li class="bred" style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <span id="todayspark5" class="spark"></span>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>98%</span>Compliance</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-group"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>Yes</span>Reviewed</div>
                    <div class="clearfix">
                    </div>
                </li>
                <li style="width: 350px;">
                    <!-- Graph -->
                    <div class="pull-left">
                        <i class="icon-laptop"></i>
                    </div>
                    <!-- Text -->
                    <div class="datas-text pull-right">
                        <span>20</span>Outstanding Count</div>
                    <div class="clearfix">
                    </div>
                </li>
  </ul>
        </div>
    </div>
<div class="col-sm-12">
        <div class="col-sm-6">
            <!-- Widget -->
            <div class="widget" id="DivHeader" runat="server">
                <!-- Widget head -->
                <div class="widget-head">
                    <div class="pull-left">
                        Compliance Chart</div>
                    <div class="widget-icons pull-right">
                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                            <i class="icon-remove"></i></a>
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
                <!-- Widget content -->
                <div class="widget-content">
                    <div class="padd" style="padding-bottom: 2px;">
                        <!-- Bar chart (Blue color). jQuery Flot plugin used. -->
                        <div id="curve-chart">
                        </div>
                    </div>
                    <div style="padding-bottom: 5px;">
                        <div class="legend" id="Legend" style="padding-left: 15px;">
                            <div class="header">
                                <span>Legend</span>
                            </div>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class="label bred"><i class="icon-2x icon-only"></i></span><span style="margin-left: 7px;">
                                                < 80% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label byellow"><i class="icon-2x icon-only">
                                            </i></span><span style="margin-left: 7px;">< 95% </span>
                                        </td>
                                        <td>
                                            <span style="margin-left: 20px;" class="label bgreen"><i class="icon-2x icon-only"></i>
                                            </span><span style="margin-left: 7px;">> 95% </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- Widget ends -->
            </div>
        </div>
       </div>


 <script type="text/javascript">
            var chartResult = null;
            $(document).ready(function () { 
  var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';
                $.ajax({
                    async: false,
                    url: jsonurl,
                    dataType: "json",
                    data: { AccId: 1 },
                    success: function (data) {
                        InitJQPlot(data);
                    }
                });
});

  function InitJQPlot(data) {                  
                var minValue = Math.round(Math.min.apply(Math, data.values)) - 1;
                var testData = [];
                var testLabel = [];
                var j = 0;
                for (var i = 0; i < data.Length; i++) {
                    testData.push([j, data.values[i]]);
                    testLabel.push([j, data.months[i]]);
                    j++;
                }
                var plot = $.plot($("#curve-chart"),
                   [{ data: testData, label: "Test Plot"}], {
                       series: {
                           lines: { show: true,
                               fill: true,
                               fillColor: {
                                   colors: [{
                                       opacity: 0.05
                                   }, {
                                       opacity: 0.01
                                   }]
                               }
                           },
                           points: { show: true }
                       },
                       grid: { hoverable: true, clickable: true, borderWidth: 0 },
                       yaxis: { min: minValue, max: 100 },
                       xaxis: {
                           ticks: testLabel
                       },
                       colors: ["#fa3031"]
                   });
}
</script>
</panel>
 <asp:Button ID="btnExport" OnClick="btnExport_Click" runat="server" Text="Export To HTML" />

The CSS has been enclosed within the <style> element. Additionally, I have included jquery.js,jquery-ui.min.js,jquery.flot.js,jquery.flot.resize.js,jquery.flot.pie.js, jquery.flot.stack.js,sparklines.js,sparkline-index.js

While I can see the dynamic chart on the .aspx page, it does not render properly in the HTML file. Instead, there is only a blank space inside the <div id="curve-chart">

I am experiencing difficulties generating the dynamic chart within the output HTML file.

If you have any insights or suggestions on how to successfully create the HTML file with the dynamic chart, your assistance would be greatly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

When you open the HTML file at D:\Test\Export.html, are you aware of where the graph data is being generated from? The link mentioned in the code snippet: 

var jsonurl = '/TestHandler/GetStatsData/Ajaxhandler.axd';
relies on a relative path, assuming that the file is being run on a server where it can locate the required .axd file. However, if you are running it locally without an established server connection, there may be difficulties in fetching the data.

To mitigate this issue, consider changing the URL to an absolute path like 

http://servername/TestHandler/GetStatsDAta/Ajaxhandler.axd
. This modification could potentially resolve the problem, although keep in mind that some browsers may flag this as a security risk when a local file tries to communicate with a remote server.

Answer №2

By globally declaring testData and testLabel, and assigning values from the page load using `JavaScriptSerializer', I am now able to generate an HTML file with a dynamic chart.

In the code behind file:

 public List<object> testDataList = new List<object>();
 public List<string> testLabelList = new List<string>();

 protected void Page_Load(object sender, EventArgs e)
 {
 //Load data into testDataList and testLabelList 
 }

 protected string JsontestDataArray
 {
    get
        {          
            var myArray = testDataList.ToArray();
            return new JavaScriptSerializer().Serialize(myArray);
        }
 }
 protected string JsontestLabelArray
 {
    get
        {
            var myArray = testLabelList.ToArray();
            return new JavaScriptSerializer().Serialize(myArray);
        }
 }

In the .aspx page:

$(document).ready(function () {    
            var testDataList = {values: <%= JsontestDataArray %>}; 
            for (var i = 0; i < testDataList.values.length; i++){                          
            testData.push([i, testDataList.values[i]]);         
            }        
            var testLabelList = {values: <%= JsontestLabelArray %>}; 
            for (var j = 0; j < testLabelList.values.length; j++){                          
            testLabel.push([j, testLabelList.values[j]]);         
            }          
});

With this setup, I can successfully load data for my dynamic chart.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Currently, I am working on incorporating this design in Material-UI by utilizing the Grid component. To better delineate the boundaries, I have marked the container border in red for clarity. The Add button should be positioned at the far right of the c ...

csslayoutmaterial-ui

modify the navigation when router events are triggered

Is there a way to modify the destination route after the router events have been triggered in an Angular app? I am trying to implement a functionality where if the user clicks the browser back button, the navigation is redirected to the home page. However, ...

javascriptangular

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Encountering a deployment issue with my Next.js 13 application on Vercel. I recently implemented the Parallel Routes feature of Next in my codebase. While pushing the changes to create a new pull request on GitHub, the branch's deployment on Vercel is ...

javascriptreactjsnext.jsdeploymentvercel

I'm struggling to grasp how to effectively utilize a JSON Object in this situation

In my coding project, I am looking to utilize Javascript in order to create a JSON or array that will house pairs of data for 'id' and 'ip'. This way, if I need to retrieve the 'ip' for a specific 'id=123', I can eas ...

javascriptjquery

In Vue.js, modifying a parent component variable using $parent does not update the interpolation syntax

Child component <template> <div> <h3>Child Component</h3> <div> <button @click="changeValue()">Update Parent Value</button> </div> </div> </template> <script> export ...

javascriptvue.js

Hitting the enter button won't initiate a search

Why isn't the search event triggered by pressing the enter key, but it works when manually clicking the Search button? Here is a simple script I am using: $('#searchproductbrand').live('click',function() { var search = $(&apos ...

phpjquery

Is the server taking forever to respond to the jQuery ajax call?

My client-side ajax call using jQuery is running slowly, especially on the first call. Here's a breakdown of the timing: In the last call, there is a waiting time of 609ms before any action, even though it only took 210ms to receive data. Why the add ...

jqueryajaxperformancefirebugfiddler

Issue with Jquery Slider Showing Empty Slide

Currently addressing issues with the slider on my site, which utilizes SlidesJS at . There seems to be a problem where it shows a blank slide inexplicably. After investigating, I noticed that a list element is being added to the pagination class, but I can ...

phpjavascriptjquerywordpress

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

javascripthtmlcssdrupal

Turn off the standard caps lock tooltip in Internet Explorer input boxes

When using the login dialog on my password input in Internet Explorer, a default tooltip appears when caps lock is activated (other browsers do not have this feature). I am looking to remove this default tooltip without relying on JavaScript. Is there an a ...

htmlinternet-explorerinputcapslock

Dealing with Unreliable Data in Scatter Plots using React and HighCharts

Initially, I utilized line charts for my data visualization needs. However, I now require multiple data points on the same X-Axis with tooltips, which has led me to discover HighCharts behavior: "In a line chart, by default, Highcharts will display t ...

javascriptreactjshighchartsreact-functional-componentreact-highcharts

Transferring the mistakes to the final return statement

I am currently working on a script that checks if a username is available or already taken. When the username is found to be taken, I need to assign an error message to my errors object. However, I am struggling with passing these errors from the inner if ...

javascriptexpress

Tips for isolating data on the current page:

Currently, I am using the igx-grid component. When retrieving all data in one call and filtering while on the 3rd page, it seems to search through the entire dataset and then automatically goes back to "Page 1". Is there a way to filter data only within th ...

javascriptangulartypescriptinfragisticsigx-grid

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorpor ...

htmlcsshtml-table

Unsuccessful attempts to animate with Jquery in Google Chrome are persisting

I've been facing a challenge with my jquery code that seems to be getting the "click" function but does not animate. Instead, it just abruptly jumps without any smooth animation. I've spent hours trying to troubleshoot this issue. Here is the Jq ...

javascriptjquerygoogle-chrome

Why isn't my List<string> being retrieved from the MVC Controller in an $ajax request?

I am attempting to generate customized lists in my cshtml file through an ajax request. .ajax({ type: "GET", cache: false, url: "@Url.Action("getValidationLists")", contentType: "application/json", dataType: "json", ...

javascriptc#ajaxasp.net-mvcrazor

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

Design element: Text overlaying background with a touch of transparency

Is there a way to create a background image with an opacity level of 0.5, while maintaining the text on top at full opacity (1) for better readability? Currently, the background image is not displaying as desired, and the opacity settings are affecting the ...

cssreactjsmaterial-ui

Unable to load circles on page refresh with amCharts Maps

I am experiencing an issue with the functionality of my amCharts maps. Whenever I refresh the page, the circles that are supposed to be displayed disappear. However, when I zoom in, the circles reappear. This problem has me puzzled, and I'm not sure ...

javascripthtmljsonamcharts

Send the information to MongoDB in the form of an object, utilize it as a query, and then perform

I have a document stored in my mongoDB database. When a user types something into an input field on the frontend, for example 'test', the object passed looks like this: {'countdown': 'test'} This object is then sent to the ...

javascriptnode.jsmongodbexpressmongoose