Need to redraw the high-chart ?

Neha Trivedi

I have tried various function to implement it, but still no succeed. Function showing no error but still its not redrawn the graph.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo7y ago
Please wait I am looking it in my system
Neha Trivedi7y ago

Code in Controller

var chart = $('#'Highchart1) .highcharts();

chart.redraw();

code in services

function SingleColChart() {

return {

options: {

chart: {

type: 'column',

zoomType: 'x',

backgroundColor: 'transparent'

},

reflow: true,

marginTop: 20,

marginBottom: 60,

spacingLeft: 5,

spacingTop: 4,

spacingBottom: -10,

spacingRight: 5

}

},

credits: {

enabled: false

},

legend: {

enabled: false

},

title: {

enabled: false,

text: '',

style: {

color: '#000000'

}

},

subtitle: {

text: ''

},

xAxis: {

categories:["1","2","3"],

allowDecimals: false,

labels: {

style: {

color: '#000000'

}

},

title: {

text: '',

style: {

fontFamily: 'monospace',

color: '#000000'

}

}

},

yAxis: {

gridLineColor: 'transparent',

title: {

text: yLabel,

style: {

fontFamily: 'monospace',

color: '#000000'

}

},

labels: {

formatter: function () {

return this.value / 1000;

},

style: {

color: '#000000'

}

}

},

tooltip: {

valueDecimals: 2,

pointFormat: '{series.name} had stockpiled {point.y:,.0f}

warheads in {point.x}'

},

plotOptions: {

area: {

pointStart: 1940,

marker: {

enabled: false,

symbol: 'circle',

radius: 1,

states: {

hover: {

enabled: true

}

}

}

}

},

series: [{

id: exap1,

showInLegend: false,

name: SeriesName,

data: data,

lineWidth: 0,

tooltip: {

valueSuffix: ToolTipUnit,

valueDecimals: 2

},

marker: {

enabled: false

},

color: '#64c7e4'

}],

navigation: {

buttonOptions: {

theme: {

// Good old text links

style: {

color: '#000000'

}

}

}

},

exporting: {

buttons: {

contextButton: {

enabled: false

},

exportButton: {

text: '...',

// Use only the download related menu items from the default

// context button

menuItems: [

'downloadPNG',

'downloadJPEG',

'downloadPDF',

'downloadSVG'

]

}

}

}

};
Laxmidhar Sahoo7y ago
So display your code
Neha Trivedi7y ago
I am using highchart with angular js.
Laxmidhar Sahoo7y ago
The bellow is a sample chart use high chart.You may modify as per your requirement
<html>
<head>
    <title>Highcharts Tutorialtitle>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    script>
    <script src="https://code.highcharts.com/highcharts.js">script>
head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto">div>
    <script language="JavaScript">
        $(document).ready(function () {
            var chart = {
                type: 'bar'
            };
            var title = {
                text: 'Example of your chart'
            };
            var subtitle = {
                text: 'Source: Wikipedia.org'
            };
            var xAxis = {
                categories: ['09:30', '09:45', '10:00', '10:15', '10:30'],
                title: {
                    text: null
                }
            };
            var yAxis = {
                min: 0,
                title: {
                    text: 'unit (inches)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            };
            var tooltip = {
                valueSuffix: ' unit'
            };
            var plotOptions = {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            };
            var legend = {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,

                backgroundColor: (
                    (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                    '#FFFFFF'),
                shadow: true
            };
            var credits = {
                enabled: false
            };
            var series = [
                {
                    name: '09:30',
                    data: [286.54]
                },
                {
                    name: '09:45',
                    data: [285.93]
                },
                {
                    name: '10:00',
                    data: [284.915]
                },
                {
                    name: '10:15',
                    data: [284.435]
                },
                {
                    name: '10:30',
                    data: [284.96]
                },
            ];


            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            json.legend = legend;
            json.credits = credits;
            $('#container').highcharts(json);
        });
    script>
body>

html>
Neha Trivedi7y ago
highchart.js
Laxmidhar Sahoo7y ago
Which js used for cjart like chart.js,high-chart.js,amachart.js.smothi.js ,d3v4 or others