Separate json data from html?

Question

I'm new to charts and graphs, and it seems this doesn't get any easier.

I'm using an AnyChart chart, but the json is embedded in the html . I would like to separate it so that it reads from MyFile.json .

Here's the javascript that renders the chart. This works great:

anychart.onDocumentReady(function() {

    var dataTable = anychart.data.table("Date", "dd/MM/yyyy");

    dataTable.addData([
        {"Date":"01/01/2017","Cars":12,"Bikes":143,"Trucks":7},
        {"Date":"01/02/2017","Cars":30,"Bikes":171,"Trucks":3},
        {"Date":"01/03/2017","Cars":50,"Bikes":157,"Trucks":9},
        {"Date":"01/04/2017","Cars":26,"Bikes":194,"Trucks":2},
        {"Date":"01/05/2017","Cars":15,"Bikes":192,"Trucks":8}
        ]);

    var mapping1 = dataTable.mapAs({'value': "Cars"});
    var mapping2 = dataTable.mapAs({'value': "Bikes"});
    var mapping3 = dataTable.mapAs({'value': "Trucks"});

    chart = anychart.stock();
    var plot = chart.plot();

    scale1 = anychart.scales.linear();
    scale1.maximum(10);
    plot.yAxis(1).enabled(true);
    plot.yAxis(1).orientation("right");
    plot.yAxis(1).scale("right");

    line1 = plot.line(mapping1).name("Cars");
    line2 = plot.line(mapping2).name("Bikes");

    column = plot.column(mapping3).name("Trucks");
    column.yScale(scale1);
    plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color());

    chart.scroller().line(mapping1);

    chart.title("Use mouse to draw zoom marquee");
    chart.container("container").draw();

    chart.startZoomMarquee(true, false);

    chart.listen("dblclick", function(){
        chart.selectRange("max");
    });

});

Following this link , I tried this, but I got error SyntaxError: missing ) after argument list /AnyChart/index.html:71 :

anychart.onDocumentReady(anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", 
    function(data) {

        // define a table with "Date" field as argument
    // and date time format defined in the second parameter
    var dataTable = anychart.data.table("Date", "dd/MM/yyyy");

    // add data to the table
    dataTable.addData([
        {"Date":"01/01/2017","Cars":12,"Bikes":143,"Trucks":7},
        {"Date":"01/02/2017","Cars":30,"Bikes":171,"Trucks":3},
        {"Date":"01/03/2017","Cars":50,"Bikes":157,"Trucks":9},
        {"Date":"01/04/2017","Cars":26,"Bikes":194,"Trucks":2},
        {"Date":"01/05/2017","Cars":15,"Bikes":192,"Trucks":8}
        ]);

        // define three mappings from the data
    var mapping1 = data.mapAs({'value': "Cars"});
    var mapping2 = data.mapAs({'value': "Bikes"});
    var mapping3 = data.mapAs({'value': "Trucks"});

EDIT: I modified the javascript, but nothing shows up. console.log(data); shows the array of data:

anychart.onDocumentReady(function(){
    anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", function(data) {
        console.log(data);
        var dataTable = anychart.data.table();
        dataTable.addData(data);
        var mapping1 = dataTable.mapAs({'value': "Cars"});
        var mapping2 = dataTable.mapAs({'value': "Bikes"});
        var mapping3 = dataTable.mapAs({'value': "Trucks"});
        chart = anychart.stock();
        var plot = chart.plot();

        scale1 = anychart.scales.linear();
        scale1.maximum(10);
        plot.yAxis(1).enabled(true);
        plot.yAxis(1).orientation("right");
        plot.yAxis(1).scale("right");

        line1 = plot.line(mapping1).name("Cars");
        line2 = plot.line(mapping2).name("Bikes");

        column = plot.column(mapping3).name("Trucks");
        column.yScale(scale1);
        plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color());

        chart.scroller().line(mapping1);

        chart.title("Use mouse to draw zoom marquee");
        chart.container("container").draw();

        chart.startZoomMarquee(true, false);

        chart.listen("dblclick", function(){
            chart.selectRange("max");
        });
    })
});

Any help is appreciated.

Answer 1

I see a problem syntactically, anychart.onDocumentReady needs callback function.

anychart.onDocumentReady(function(){
    //Your Stuff.
});

and the method loadJsonFile is having syntax following.

anychart.data.loadJsonFile("<URL>", <callbackFunction>)

So give a try with following syntax.

anychart.onDocumentReady(function(){
    anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", function(data) {
         //Chart stuff
    })
});

I hope it should work with above syntax for you.

Answer 2

var dataTable = anychart.data.table（“ Date”，“ dd / MM / yyyy”）;

Answer 3

This sample http://static.anychart.com/demos/JsonBasic/index.html shows the correct code:

    anychart.onDocumentReady(function() {

        anychart.data.loadJsonFile("MyFile.json", function(data) {

                // define a table with "Date" field as argument
            // and date time format defined in the second parameter
            var dataTable = anychart.data.table("Date", "dd/MM/yyyy");

            // add data to the table
            dataTable.addData(data);

                // define three mappings from the data
            var mapping1 = dataTable.mapAs({'value': "Cars"});
            var mapping2 = dataTable.mapAs({'value': "Bikes"});
            var mapping3 = dataTable.mapAs({'value': "Trucks"});

                // create chart
            chart = anychart.stock();
            // one plot ont the chart, can have several if needed
            var plot = chart.plot();

                // add the second scale and axis
            scale1 = anychart.scales.linear();
            scale1.maximum(500);
            plot.yAxis(1).enabled(true);
            plot.yAxis(1).orientation("right");
            plot.yAxis(1).scale("right");

                // two line series
            line1 = plot.line(mapping1).name("Cars");
            line2 = plot.line(mapping2).name("Bikes");

            // third series is column
            // it is bound to second scale
            column = plot.column(mapping3).name("Trucks");
            column.yScale(scale1);
            // color second scale as the series
            // it is bound to - optional
            plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color());

                // draw mini series, use data from column
            // but draw as anything
            chart.scroller().line(mapping1);

            chart.title("Use mouse to draw zoom marquee");
            chart.container("container").draw();

            // Starts zoom marquee mode
            chart.startZoomMarquee(true, false);

            // listen for double click and zoom out for handier navigation
            chart.listen("dblclick", function(){
                chart.selectRange("max");
            });
        });
    });