i have used sample connect google api charts. works great.
php mysql google chart json - complete example
i trying graphs , charts sample working powerbi.
i have sample.html file. found sample here:
https://github.com/microsoft/powerbi-visuals/wiki/displaying-visuals-in-a-single-html-page
the file has reference 1 css file , 2 javscript file on github.
it displays blank page.
<link href="https://raw.githubusercontent.com/microsoft/powerbi-visuals/master/lib/visuals.css" rel="stylesheet"> <script type="text/javascript" src="externals.min.js"></script> <script type="text/javascript" src="powerbi-visuals.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/microsoft/powerbi-visuals/master/lib/powerbi-visuals.js"> </script> <script type="text/javascript" src="https://raw.githubusercontent.com/microsoft/powerbi-visuals/master/lib/powerbi-visuals.min.js"> </script> <script type="text/javascript" src="https://github.com/microsoft/powerbi-visuals/blob/master/lib/powerbi-externals.d.ts"></script> <style> .visual { 'background-color' : 'white', 'padding' : '10px', 'margin' : '5px' } </style> </head> <body> <script type="text/javascript"> var createdataview = function () { var dataviewtransform = powerbi.data.dataviewtransform; var fieldexpr = powerbi.data.sqexprbuilder.fieldexpr({ column: { entity: "table1", name: "country" } }); var categoryvalues = ["australia", "canada", "france", "germany", "united kingdom", "united states"]; var categoryidentities = categoryvalues.map(function (value) { var expr = powerbi.data.sqexprbuilder.equal(fieldexpr, powerbi.data.sqexprbuilder.text(value)); return powerbi.data.createdataviewscopeidentity(expr); }); // metadata, describes data columns, , provides visual hints // can decide how best represent data var dataviewmetadata = { columns: [ { displayname: 'country', queryname: 'country', type: powerbi.valuetype.fromdescriptor({ text: true }) }, { displayname: 'sales amount (2014)', ismeasure: true, format: "$0", queryname:'sales1', type: powerbi.valuetype.fromdescriptor({ numeric: true }), }, { displayname: 'sales amount (2013)', ismeasure: true, format: "$0", queryname:'sales2', type: powerbi.valuetype.fromdescriptor({ numeric: true }) } ], }; var columns = [ { source: dataviewmetadata.columns[1], // sales amount 2014 values: [742731.43, 162066.43, 283085.78, 300263.49, 376074.57, 814724.34], }, { source: dataviewmetadata.columns[2], // sales amount 2013 values: [742731.43, 162066.43, 283085.78, 300263.49, 376074.57, 814724.34].reverse() } ]; var datavalues = dataviewtransform.createvaluecolumns(columns); var dataview = { metadata: dataviewmetadata, categorical: { categories: [{ source: dataviewmetadata.columns[0], values: categoryvalues, identity: categoryidentities, }], values: datavalues } }; return dataview; }; function createdefaultstyles(){ var datacolors = new powerbi.visuals.datacolorpalette(); return { titletext: { color: { value: 'rgba(51,51,51,1)' } }, subtitletext: { color: { value: 'rgba(145,145,145,1)' } }, colorpalette: { datacolors: datacolors, }, labeltext: { color: { value: 'rgba(51,51,51,1)', }, fontsize: '11px' }, ishighcontrast: false, }; } function createvisual() { var pluginservice = powerbi.visuals.visualpluginfactory.create(); var defaultvisualhostservices = powerbi.visuals.defaultvisualhostservices; var width = 600; var height = 400; var element = $('.visual'); element.height(height).width(width); // plugin var visual = pluginservice.getplugin('columnchart').create(); powerbi.visuals.defaultvisualhostservices.initialize(); visual.init({ // empty dom element visual should attach to. element: element, // host services host: defaultvisualhostservices, style: createdefaultstyles(), viewport: { height:height, width: width }, settings: { slicingenabled: true }, interactivity: { isinteractivelegend: false, selection: false }, animation: { transitionimmediate: true } }); // call update draw visual data visual.update({ dataviews: [createdataview()] , viewport: { height: height, width: width }, duration: 0 }); } createvisual(); </script> <div class="visual"></div> </body> </html>
the reference files located @ location:
<script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/externals.min.js"> </script> <script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/powerbi-visuals.js" ></script> <script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/powerbivisualsplayground.js"></script> this full working script:
<html> <head lang="en"> <meta charset="utf-8"> <title></title> <link href="https://raw.githubusercontent.com/microsoft/powerbi-visuals/master/lib/visuals.css" rel="stylesheet"> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/externals.min.js"> </script> <script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/powerbi-visuals.js" ></script> <script type="text/javascript" src="http://microsoft.github.io/powerbi-visuals/playground/powerbivisualsplayground.js"></script> <style> .visual { 'background-color' : 'white', 'padding' : '10px', 'margin' : '5px' } </style> </head> <body> <h1> hello </h1> <div class="visual"></div> <script type="text/javascript"> var createdataview = function () { var dataviewtransform = powerbi.data.dataviewtransform; var fieldexpr = powerbi.data.sqexprbuilder.fieldexpr({ column: { entity: "table1", name: "country" } }); var categoryvalues = ["australia", "canada", "france", "germany", "united kingdom", "united states"]; var categoryidentities = categoryvalues.map(function (value) { var expr = powerbi.data.sqexprbuilder.equal(fieldexpr, powerbi.data.sqexprbuilder.text(value)); return powerbi.data.createdataviewscopeidentity(expr); }); // metadata, describes data columns, , provides visual hints // can decide how best represent data var dataviewmetadata = { columns: [ { displayname: 'country', queryname: 'country', type: powerbi.valuetype.fromdescriptor({ text: true }) }, { displayname: 'sales amount (2014)', ismeasure: true, format: "$0", queryname:'sales1', type: powerbi.valuetype.fromdescriptor({ numeric: true }), }, { displayname: 'sales amount (2013)', ismeasure: true, format: "$0", queryname:'sales2', type: powerbi.valuetype.fromdescriptor({ numeric: true }) } ], }; var columns = [ { source: dataviewmetadata.columns[1], // sales amount 2014 values: [742731.43, 162066.43, 283085.78, 300263.49, 376074.57, 814724.34], }, { source: dataviewmetadata.columns[2], // sales amount 2013 values: [742731.43, 162066.43, 283085.78, 300263.49, 376074.57, 814724.34].reverse() } ]; var datavalues = dataviewtransform.createvaluecolumns(columns); var dataview = { metadata: dataviewmetadata, categorical: { categories: [{ source: dataviewmetadata.columns[0], values: categoryvalues, identity: categoryidentities, }], values: datavalues } }; return dataview; }; function createdefaultstyles(){ var datacolors = new powerbi.visuals.datacolorpalette(); return { titletext: { color: { value: 'rgba(51,51,51,1)' } }, subtitletext: { color: { value: 'rgba(145,145,145,1)' } }, colorpalette: { datacolors: datacolors, }, labeltext: { color: { value: 'rgba(51,51,51,1)', }, fontsize: '11px' }, ishighcontrast: false, }; } function createvisual() { var pluginservice = powerbi.visuals.visualpluginfactory.create(); var defaultvisualhostservices = powerbi.visuals.defaultvisualhostservices; var width = 600; var height = 400; var element = $('.visual'); element.height(height).width(width); // plugin var visual = pluginservice.getplugin('columnchart').create(); powerbi.visuals.defaultvisualhostservices.initialize(); visual.init({ // empty dom element visual should attach to. element: element, // host services host: defaultvisualhostservices, style: createdefaultstyles(), viewport: { height:height, width: width }, settings: { slicingenabled: true }, interactivity: { isinteractivelegend: false, selection: false }, animation: { transitionimmediate: true } }); // call update draw visual data visual.update({ dataviews: [createdataview()] , viewport: { height: height, width: width }, duration: 0 }); } createvisual(); </script> </body> </html> 
Comments
Post a Comment