Skip to content

How to implement HighCharts in NativeScript with JavaScript? #5671

@RaghavMSG

Description

@RaghavMSG

Hi, I am using highcharts in nativescript by following some sample. It is working by loading custom local html file containing static graph data into webview. But i have one difficulty ,need to load the
graph data dynamically. How i can pass the data to html file to build the graph and i am writing JavaScript code. Please, Help me to resolve this. If you have any other solution please suggest best approach to graphs.

This is my html file,

/////chart.html

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>How to create active charts using Highcharts | Script Tutorials</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>

    <!-- <div>NativeScript Charts</div> -->

    <div id="chart_1" class="chart"></div>
    <script type='text/javascript'>
    $(document).ready(function() {

// First chart initialization
var chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'area',
    height: 350,
 },
 title: {
    text: 'Sample Graph'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript','Processing.js', 'Impact.js'']
 },
 yAxis: {
    title: {
       text: 'Interviewed'
    }
 },
 series: [{
    name: 'Dev #1',
    data: [30, 15, 20, 22, 25, 28, 30, 40, 80, 140, 50, 20, 30, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 120, 70, 15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100, 5, 10, 8, 6, 0, 50, 25, 50, 60, 40]      
 }]
});

});</script>
</body>
</html>

And this is my xml,
////page.xml

<StackLayout>
       <WebView height="500"  src="~/chart.html"/>
</StackLayout>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions