How can I make the var in my js file dynamic

Question

0.00/5 (No votes)

See more:

, +

Hello every one Iam struck near a problem waiting for some one help.

Iam having html with with the html5 canvas as follows:

JavaScript

<pre lang="HTML">
<div class="widget-body">
<div class="chartcontainer">
 <canvas id="doughnut" height="300"></canvas>
</div>
</div>

    <script src="assets/js/charts/chartjs/chartjs-init.js"></script>
    <script>
        $(window).bind("load", function () {

            /*Sets Themed Colors Based on Themes*/
            thirty = 30;
            fourty = 40;
            fifty = 50;
            sixty = 60;
            seventy = 70;
            themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');
            InitiateChartJS.init();
        });
    </script>

My js file is as follows:

JavaScript

var gridbordercolor = "#eee";

var InitiateChartJS = function () {
    return {
        init: function () {

            var doughnutData = [
                    {
                        value: thirty,
                        color: themeprimary
                    },
                    {
                        value: fourty,
                        color: themesecondary
                    },
                    {
                        value: fifty,
                        color: themethirdcolor
                    },
                    {
                        value: sixty,
                        color: themefourthcolor
                    },
                    {
                        value: seventy,
                        color: themefifthcolor
                    }

            ];
            var lineChartData = {
                labels: ["", "", "", "", "", "", ""],
                datasets: [
                    {
                        fillColor: "rgba(93, 178, 255,.4)",
                        strokeColor: "rgba(93, 178, 255,.7)",
                        pointColor: "rgba(93, 178, 255,.7)",
                        pointStrokeColor: "#fff",
                        data: [65, 59, 90, 81, 56, 55, 40]
                    },
                    {
                        fillColor: "rgba(215, 61, 50,.4)",
                        strokeColor: "rgba(215, 61, 50,.6)",
                        pointColor: "rgba(215, 61, 50,.6)",
                        pointStrokeColor: "#fff",
                        data: [28, 48, 40, 19, 96, 27, 100]
                    }
                ]

            };
            var pieData = [
                    {
                        value: 30,
                        color: themeprimary
                    },
                    {
                        value: 50,
                        color: themesecondary
                    },
                    {
                        value: 100,
                        color: themefourthcolor
                    }

            ];
            var barChartData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        fillColor: themeprimary,
                        strokeColor: themeprimary,
                        data: [65, 59, 90, 81, 56, 55, 40]
                    },
                    {
                        fillColor: themethirdcolor,
                        strokeColor: themethirdcolor,
                        data: [28, 48, 40, 19, 96, 27, 100]
                    }
                ]

            };
            var chartData = [
                    {
                        value: Math.random(),
                        color: themeprimary
                    },
                    {
                        value: Math.random(),
                        color: themesecondary
                    },
                    {
                        value: Math.random(),
                        color: themethirdcolor
                    },
                    {
                        value: Math.random(),
                        color: themefourthcolor
                    },
                    {
                        value: Math.random(),
                        color: themefifthcolor
                    },
                    {
                        value: Math.random(),
                        color: "#ed4e2a"
                    }
            ];
            var radarChartData = {
                labels: ["", "", "", "", "", "", ""],
                datasets: [
                    {
                        fillColor: "rgba(140,196,116,0.5)",
                        strokeColor: "rgba(140,196,116,.7)",
                        pointColor: "rgba(140,196,116,.7)",
                        pointStrokeColor: "#fff",
                        data: [65, 59, 90, 81, 56, 55, 40]
                    },
                    {
                        fillColor: "rgba(215,61,50,0.5)",
                        strokeColor: "rgba(215,61,50,.7)",
                        pointColor: "rgba(215,61,50,.7)",
                        pointStrokeColor: "#fff",
                        data: [28, 48, 40, 19, 96, 27, 100]
                    }
                ]

            };
            new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
            new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
            new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
            new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
            new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
            new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);

        }
    };
} ();

The doughnutData i need to make it as dynamic want to pass my own values to it.

What I have tried:

The below is what i have implemented please hava a look it is not working

JavaScript

var doughnutData;
            $.ajax({

                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
            function OnSuccess(response) {

                var customers = response.d;
                var doit = '[ ';
                $(customers).each(function () {
                    doit = doit + ' { value : ' + this.value + ', color :"#ed4e2a" }, '
                });
                doit = doit + '  ]';
                alert(doit);
                doughnutData = JSON.parse(doit);

            }

Posted 13-May-16 2:29am

Nagarjun558

Updated 13-May-16 9:48am

Patrice T

v5

Add a Solution

Comments

Sergey Alexandrovich Kryukov 13-May-16 8:49am

The question makes no sense. Everything is already dynamic. :-)
It's not clear how the Ajax problem shown in "What I have tried" related to the rest.
—SA

Nagarjun558 13-May-16 9:01am

var doughnutData = [
{
value: thirty,
color: themeprimary
},...... this is as follows
Now making this as dynamic. wait i will update my What I have tried: so that you can understand.

ZurdoDev 13-May-16 9:08am

1. Reply to the comment so that the user is notified.
2. Put your ajax call into a function, set async to false, call a webservice that gets your data and returns it in json format.

Nagarjun558 13-May-16 9:13am

Ryan Dev I am sorry if there is any mistake on my side. Can you explain me more clearly please.the below "What I have tried:" is what i have done now how can i change that

Patrice T 13-May-16 15:51pm

Define "not working"
Use Improve question to update your question.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ryan Peden · Accepted Answer · 2016-05-13T05:44:00

It looks like it isn't working because updating the doughnutData variable during the AJAX call won't automatically update an existing chart.

Additionally, when you create doughnutData inside the init function using var doughnutData, that variable is only visible from inside the init function.

When you call doughnutData = JSON.parse(doit); you are creating a new doughnutData in the global scope, but none of the code inside init will be able to see the global doughnutData because the local one you are creating will shadow it.

You could try this:

- Remove doughnutData from the init function completely.
- Remove this line from the init function:

new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);

Make a function something like this:

JavaScript

function initDoughnut(doughnutData) {
   new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
}

Then, add this line to the end of your OnSuccess OnSuccess function:

JavaScript

initDoughnut(doughnutData);

And that should create the chart with your dynamically loaded data.

How can I make the var in my js file dynamic

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us