B4J Tutorial [ABMaterial] CustomJQPlot

Discussion in 'B4J Tutorials' started by Mashiane, Nov 27, 2016.

  1. Mashiane

    Mashiane Well-Known Member Licensed User

    I was curious as to whether I would be able to create my first ABMaterial component. Well, the journey has been very interesting.

    This comprises of more than 60 examples of setting the chart options. In your page's BuildPage method, only include the plugin js files applicable to what you want to do and not all. For example if you want a bar chart that will display dates you will need to add barRenderer and dateAxisRenderer. If for example you will have a bubble chart, only include the bubbleRenderer js. I have tried to consolidate these into one js, that distorts the charts.

    Reproduction:
    1. Download JQPlot from http://www.jqplot.com/
    2. Copy the respective javascript files to the www/appname/js/custom and www/appname/css/custom folders of your app. You will find other js files in the plugins folder.
    3. For now this is what I have added in my project, added to the BuildPage method of my page.

    Code:
    'save file in www/appname/js/custom
        page.AddExtraJavaScriptFile("custom/excanvas.js")
        
    page.AddExtraJavaScriptFile("custom/jquery.jqplot.min.js")
        
    'add plugins for other rendering, these are optional depending on what you want to do.
       page.AddExtraJavaScriptFile("custom/jqplot.barRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.categoryAxisRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.canvasTextRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisLabelRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.logAxisRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.dateAxisRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.cursor.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.highlighter.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.funnelRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.trendline.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.bubbleRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.blockRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.pieRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.donutRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisTickRenderer.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.pointLabels.js")
       
    page.AddExtraJavaScriptFile("custom/jqplot.canvasOverlay.js")
        
    'save file in www/appname/css/custom
        page.AddExtraCSSFile("custom/jquery.jqplot.min.css")
    5. Add the attached CustomJQPlot class to your ABM project and update it accordingly e.g. appname, page name etc.

    6. In the Class_Globals, I declared each of my examples to show the features..

    Code:
    Private custJQPlot As CustomJQPlot
        
    Private jqPlotBar As CustomJQPlot
        
    Private example3 As CustomJQPlot
        
    Private example4 As CustomJQPlot
        
    Private example5 As CustomJQPlot
        
    Private example6 As CustomJQPlot
        
    Private example7 As CustomJQPlot
        
    Private example8 As CustomJQPlot
        
    Private example9 As CustomJQPlot
        
    Private example10 As CustomJQPlot
        
    Private example11 As CustomJQPlot
        
    Private example12 As CustomJQPlot
        
    Private example13 As CustomJQPlot
        
    Private example14 As CustomJQPlot
        
    Private example15 As CustomJQPlot
        
    Private example16 As CustomJQPlot
        
    Private example17 As CustomJQPlot
        
    Private example18 As CustomJQPlot
        
    Private example19 As CustomJQPlot
        
    Private example20 As CustomJQPlot
        
    Private example21 As CustomJQPlot
        
    Private example22 As CustomJQPlot
        
    Private example23 As CustomJQPlot
        
    Private example24 As CustomJQPlot
    7. In ConnectPage, create your custom components, the are comments you can check about how this has been done. I just followed the example to create a component.

    Code:
    'define a line chart
        custJQPlot.Initialize(page"custJQPlot")
        
    page.Cell(2,1).AddComponent(custJQPlot.ABMComp)
        custJQPlot.SetTitle(
    "Example 1: Simple Chart")
        custJQPlot.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        custJQPlot.IsAnimated(
    True)

        
    'define a bar chart
        jqPlotBar.Initialize(page"jqPlotBar")
        
    page.Cell(2,2).AddComponent(jqPlotBar.ABMComp)
        jqPlotBar.SetTitle(
    "Example 2: Set YAxis Min (70) Max (150)")
        jqPlotBar.SetWidthHeight(
    "100%","600px")
        jqPlotBar.AddSeriesData5(
    100,110,140,130,80)
        jqPlotBar.axesDefaults.yAxis.yMin = 
    70
        jqPlotBar.axesDefaults.yaxis.yMax=
    150

        example3.Initialize(
    page"example3")
        
    page.Cell(3,1).AddComponent(example3.ABMComp)
        example3.SetTitle(
    "Example 3: No Grid Lines")
        example3.SetWidthHeight(
    "100%","600px")
        example3.AddSeriesData5(
    100,110,140,130,80)
        example3.drawGridlines = 
    False

        example4.Initialize(
    page"example4")
        
    page.Cell(3,2).AddComponent(example4.ABMComp)
        example4.SetTitle(
    "Example 4: Multiple Series")
        example4.SetWidthHeight(
    "100%","600px")
        example4.AddSeriesData6(
    1,2,3,2,3,4)
        example4.AddSeriesData6(
    3,4,5,6,5,7)
        example4.AddSeriesData6(
    5,6,8,9,7,9)
        example4.AddSeriesData6(
    7,8,9,11,10,11)

        example5.Initialize(
    page"example5")
        
    page.Cell(4,1).AddComponent(example5.ABMComp)
        example5.SetTitle(
    "Example 5: Axes Defaults Min 0, Max 20")
        example5.SetWidthHeight(
    "100%","600px")
        example5.AddSeriesData9(
    1,4,8,13,8,7,12,10,5)
        example5.axesDefaults.xyMin = 
    0
        example5.axesdefaults.xyMax = 
    20

        example6.Initialize(
    page"example6")
        
    page.Cell(4,2).AddComponent(example6.ABMComp)
        example6.SetTitle(
    "Example 6: Series Defaults ShowMarker: False")
        example6.SetWidthHeight(
    "100%","600px")
        example6.AddSeriesData6(
    1,2,3,2,3,4)
        example6.AddSeriesData6(
    3,4,5,6,5,7)
        example6.AddSeriesData6(
    5,6,8,9,7,9)
        example6.AddSeriesData6(
    7,8,9,11,10,11)
        example6.seriesDefaults.showMarker = 
    False
        
    'Log(example6.ToString)

        example7.Initialize(
    page"example7")
        
    page.Cell(5,1).AddComponent(example7.ABMComp)
        example7.SetTitle(
    "Example 7: Bar Chart")
        example7.SetWidthHeight(
    "100%","600px")
        example7.SetChartType(example7.ChartType.bar)
        example7.AddSeriesData6(
    1,2,3,2,3,4)
        
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
        'Log(example7.ToString)

        example8.Initialize(
    page"example8")
        
    page.Cell(5,2).AddComponent(example8.ABMComp)
        example8.SetTitle(
    "Example 8: Bar Chart Vary Colors")
        example8.SetWidthHeight(
    "100%","600px")
        example8.SetChartType(example8.ChartType.bar)
        example8.AddSeriesData6(
    1,2,3,2,3,4)
        example8.UseVaryingColors(
    True)
        
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
        'Log(example8.ToString)

        example9.Initialize(
    page"example9")
        
    page.Cell(6,1).AddComponent(example9.ABMComp)
        example9.SetTitle(
    "Example 9: Axes Labels/Titles")
        example9.SetWidthHeight(
    "100%","600px")
        example9.AddSeriesData6(
    1,2,3,2,3,4)
        example9.SetAxisTitles(
    "X Axis","Y Axis")
      
        example10.Initialize(
    page"example10")
        
    page.Cell(6,2).AddComponent(example10.ABMComp)
        example10.SetTitle(
    "Example 10: X Axis Padding (1)")
        example10.SetWidthHeight(
    "100%","600px")
        example10.AddSeriesData6(
    1,2,3,2,3,4)
        example10.SetAxisTitles(
    "X Axis","Y Axis")
        example10.SetXAxisPadding(
    1)
        
    'Log(example10.ToString)

        example11.Initialize(
    page"example11")
        
    page.Cell(7,1).AddComponent(example11.ABMComp)
        example11.SetTitle(
    "Example 11: X Axis Padding (2)")
        example11.SetWidthHeight(
    "100%","600px")
        example11.AddSeriesData6(
    1,2,3,2,3,4)
        example11.SetAxisTitles(
    "X Axis","Y Axis")
        example11.SetXAxisPadding(
    2)
        
    'Log(example11.ToString)

        example12.Initialize(
    page"example12")
        
    page.Cell(7,2).AddComponent(example12.ABMComp)
        example12.SetTitle(
    "Example 12: X Axis Min(1), Max(9)")
        example12.SetWidthHeight(
    "100%","600px")
        example12.AddSeriesData6(
    1,2,3,2,3,4)
        example12.SetAxisTitles(
    "X Axis","Y Axis")
        example12.SetXAxisMinMax(
    1,9)
        
    'Log(example12.ToString)

        example13.Initialize(
    page"example13")
        
    page.Cell(8,1).AddComponent(example13.ABMComp)
        example13.SetTitle(
    "Example 13: X Axis numberTicks(5)")
        example13.SetWidthHeight(
    "100%","600px")
        example13.AddSeriesData9(
    1,2,3,2,3,4,8,10,12)
        example13.SetAxisTitles(
    "X Axis","Y Axis")
        example13.SetXAxisNumberTicks(
    5)
        
    'Log(example13.ToString)

        example14.Initialize(
    page"example14")
        
    page.Cell(8,2).AddComponent(example14.ABMComp)
        example14.SetTitle(
    "Example 14: X Axis Own Ticks")
        example14.SetWidthHeight(
    "100%","600px")
        example14.AddSeriesData9(
    1,2,3,2,3,4,8,10,12)
        example14.SetAxisTitles(
    "X Axis","Y Axis")
        example14.AddXAxisTick(
    1)
        example14.AddXAxisTick(
    2)
        example14.AddXAxisTick(
    3)
        example14.AddXAxisTick(
    7)
        example14.AddXAxisTick(
    9)
        
    'Log(example14.ToString)

        example15.Initialize(
    page"example15")
        
    page.Cell(9,1).AddComponent(example15.ABMComp)
        example15.SetTitle(
    "Example 15: Log Scale i.e Large Data Sets")
        example15.SetWidthHeight(
    "100%","600px")
        example15.AddSeriesData2(
    0,1.2)
        example15.AddSeriesData2(
    10,2.4)
        example15.AddSeriesData2(
    20,5.6)
        example15.AddSeriesData2(
    30,12)
        example15.AddSeriesData2(
    40,23)
        example15.AddSeriesData2(
    50,60)
        example15.AddSeriesData2(
    60,120)
        example15.AddSeriesData2(
    70,270)
        example15.AddSeriesData2(
    80,800)
        example15.SetYAxisRenderer(example15.Renderer.LogAxisRenderer)
        example15.SingleSeries = 
    True  ' IMPORTANT
        'Log(example15.ToString)

        example16.Initialize(
    page"example16")
        
    page.Cell(9,2).AddComponent(example16.ABMComp)
        example16.SetTitle(
    "Example 16: Series with Hex Colors:")
        example16.SetWidthHeight(
    "100%","600px")
        example16.AddSeries(
    "a""#105567")
        example16.AddSeries(
    "b""#805567")
        example16.AddSeries(
    "c""#bb5567")
        example16.AddSeries(
    "d""#ff5567")
        example16.AddSeriesData6(
    1,2,3,2,3,4)
        example16.AddSeriesData6(
    3,4,5,6,5,7)
        example16.AddSeriesData6(
    5,6,8,9,7,9)
        example16.AddSeriesData6(
    7,8,9,11,10,11)
        
    'Log(example16.ToString)

        example17.Initialize(
    page"example17")
        
    page.Cell(10,1).AddComponent(example17.ABMComp)
        example17.SetTitle(
    "Example 17: Series with RGBA Colors")
        example17.SetWidthHeight(
    "100%","600px")
        example17.AddSeriesrgba(
    "a"16,85,103,0.2)
        example17.AddSeriesrgba(
    "b"128,85,103,0.6)
        example17.AddSeriesrgb(
    "c"187,85,103)
        example17.AddSeriesrgb(
    "d"25085103)
        example17.AddSeriesData6(
    1,2,3,2,3,4)
        example17.AddSeriesData6(
    3,4,5,6,5,7)
        example17.AddSeriesData6(
    5,6,8,9,7,9)
        example17.AddSeriesData6(
    7,8,9,11,10,11)
        
    'Log(example17.ToString)

        example18.Initialize(
    page"example18")
        
    page.Cell(10,2).AddComponent(example18.ABMComp)
        example18.SetTitle(
    "Example 18: Smooth Lines")
        example18.SetWidthHeight(
    "100%","600px")
        example18.AddSeriesrgba(
    "a"16,85,103,0.2)
        example18.AddSeriesrgba(
    "b"128,85,103,0.6)
        example18.AddSeriesrgb(
    "c"187,85,103)
        example18.AddSeriesrgb(
    "d"25085103)
        example18.AddSeriesData6(
    1,2,3,2,3,4)
        example18.AddSeriesData6(
    3,4,5,6,5,7)
        example18.AddSeriesData6(
    5,6,8,9,7,9)
        example18.AddSeriesData6(
    7,8,9,11,10,11)
        example18.IsSmooth(
    True)

        example19.Initialize(
    page"example19")
        
    page.Cell(11,1).AddComponent(example19.ABMComp)
        example19.SetTitle(
    "Example 19: Line & Marker Styles")
        example19.SetWidthHeight(
    "100%","600px")
        example19.AddSeriesData6(
    1,2,3,2,3,4)
        example19.AddSeriesData6(
    3,4,5,6,5,7)
        example19.AddSeriesData6(
    5,6,8,9,7,9)
        example19.AddSeriesData6(
    7,8,9,11,10,11)
        example19.AddSeriesData6(
    6,3,2,12,13,16)
        example19.AddSeriesOptions(
    "a""dashed",2,"diamond",0,True)
        example19.AddSeriesOptions(
    "b""",0,"x",7,False)
        example19.AddSeriesOptions(
    "c","",0,"circle",0,True)
        example19.AddSeriesOptions(
    "d""dotted"5,"filledSquare",10,True)
        example19.AddSeriesOptions(
    "e""-."0,"",0,True)
        example19.IsAnimated(
    True)
        
    'Log(example19.ToString)

        example20.Initialize(
    page"example20")
        
    page.Cell(11,2).AddComponent(example20.ABMComp)
        example20.SetTitle(
    "Example 20: Series Defaults Marker Options")
        example20.SetWidthHeight(
    "100%","600px")
        example20.AddSeriesData6(
    1,2,3,2,3,4)
        example20.AddSeriesData6(
    3,4,5,6,5,7)
        example20.AddSeriesData6(
    5,6,8,9,7,9)
        example20.AddSeriesData6(
    7,8,9,11,10,11)
        example20.AddSeriesData6(
    6,3,2,12,13,16)
        example20.AddSeriesOptions(
    "a""dashed",2,"diamond",0,True)
        example20.AddSeriesOptions(
    "b""",0,"x",7,False)
        example20.AddSeriesOptions(
    "c","",0,"circle",0,True)
        example20.AddSeriesOptions(
    "d""dotted"5,"filledSquare",10,True)
        example20.AddSeriesOptions(
    "e""-."0,"",0,True)
        example20.SeriesDefaultsMarkerOptionsShow(
    False)
        example20.IsSmooth(
    True)

        
    'note the values inside single quotes
        example21.Initialize(page"example21")
        
    page.Cell(12,1).AddComponent(example21.ABMComp)
        example21.SetTitle(
    "Example 21: Handling Date Values")
        example21.SetWidthHeight(
    "100%","600px")
        example21.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
        example21.SetXAxisTickOptionsFormatString(
    "'%d %b'")   ' shows dd MMM
        example21.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
        example21.AddSeriesData2("'14-Oct-2012'",1300.41)
        example21.AddSeriesData2(
    "'2012/10/16'",1322.88)
        example21.AddSeriesData2(
    "'10/18/2012'",1308.16)
        example21.AddSeriesData2(
    "'20-Oct-2012'",1305.01)
        example21.AddSeriesData2(
    "'22-Oct-2012'",1290.67)
        example21.AddSeriesData2(
    "'17 Oct 2012'",1312.41)
        example21.AddSeriesData2(
    "'19-Oct-2012'",1310.71)
        example21.AddSeriesData2(
    "'21-Oct-2012'",1300.85)
        example21.SingleSeries = 
    True  'IMPORTANT

        
    'note the values inside single quotes
        example22.Initialize(page"example22")
        
    page.Cell(12,2).AddComponent(example22.ABMComp)
        example22.SetTitle(
    "Example 22: Handling Time Values")
        example22.SetWidthHeight(
    "100%","600px")
        example22.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
        example22.SetXAxisTickOptionsFormatString(
    "'%R'")   ' shows HH:mm
        example22.AddSeriesData2("'2012-10-14 08:00AM'",30)
        example22.AddSeriesData2(
    "'2012-10-14 18:00AM'",60)
        example22.AddSeriesData2(
    "'2012-10-14 00:00PM'",120)
        example22.AddSeriesData2(
    "'2012-10-14 02:00PM'",60)
        example22.AddSeriesData2(
    "'2012-10-14 04:00PM'",100)
        example22.AddSeriesData2(
    "'2012-10-14 06:00PM'",40)
        example22.SetTitles(
    "Example 22: Museum Visitors","Time","Visitors")
        example22.SingleSeries = 
    True  'IMPORTANT

        example23.Initialize(
    page"example23")
        
    page.Cell(13,1).AddComponent(example23.ABMComp)
        example23.SetTitle(
    "Example 23: Cursor Highlighter")
        example23.SetWidthHeight(
    "100%","600px")
        example23.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
        example23.SetXAxisTickOptionsFormatString(
    "'%b %#d'")   ' MMM dd
        example23.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
        example23.AddSeriesData2("'14-Oct-2012'",1300.41)
        example23.AddSeriesData2(
    "'2012/10/16'",1322.88)
        example23.AddSeriesData2(
    "'10/18/2012'",1308.16)
        example23.AddSeriesData2(
    "'20-Oct-2012'",1305.01)
        example23.AddSeriesData2(
    "'22-Oct-2012'",1290.67)
        example23.AddSeriesData2(
    "'17 Oct 2012'",1312.41)
        example23.AddSeriesData2(
    "'19-Oct-2012'",1310.71)
        example23.AddSeriesData2(
    "'21-Oct-2012'",1300.85)
        example23.SingleSeries = 
    True  'IMPORTANT
        example23.SetHighlighter(True,7.5)
        example23.SetCursor(
    False,""' hide cursor

        example24.Initialize(
    page"example24")
        
    page.Cell(13,2).AddComponent(example24.ABMComp)
        example24.SetTitle(
    "Example 24: Data Points Highlights")
        example24.SetWidthHeight(
    "100%","600px")
        example24.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
        example24.SetXAxisTickOptionsFormatString(
    "'%b %#d'")   ' MMM dd
        example24.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
        example24.AddSeriesData2("'14-Oct-2012'",1300.41)
        example24.AddSeriesData2(
    "'2012/10/16'",1322.88)
        example24.AddSeriesData2(
    "'10/18/2012'",1308.16)
        example24.AddSeriesData2(
    "'20-Oct-2012'",1305.01)
        example24.AddSeriesData2(
    "'22-Oct-2012'",1290.67)
        example24.AddSeriesData2(
    "'17 Oct 2012'",1312.41)
        example24.AddSeriesData2(
    "'19-Oct-2012'",1310.71)
        example24.AddSeriesData2(
    "'21-Oct-2012'",1300.85)
        example24.SingleSeries = 
    True  'IMPORTANT
        example24.SetHighlighter(True,7.5)
        example24.SetCursor(
    True"ne")
        
    Log(example24.ToString)
    8. NB: The AddSeriesDataXXX methods will be updated, this has been created whilst learning how the jqplot framework work, thus the series definitions will be tweaked soon enough.

    01-02.png

    03-06.png

    07-10.png

    11-14.png

    15-18.png

    19-22.png
     

    Attached Files:

    Last edited: Dec 1, 2016
    ihabsharaf, Molchyn, DMW and 3 others like this.
  2. Mashiane

    Mashiane Well-Known Member Licensed User

    When one hovers the mouse over the pointers for example 23 and 24, tooltips are shown. Example 24, shows on top right of the chart.

    23-24.png

    Whilst the chart can resize themselves after you refresh the page if you change the orientation / resize the view area, the display speed is quite nice for my liking and creating these charts is very simple with a few lines of code too. I like very much.
     
  3. Harris

    Harris Well-Known Member Licensed User

    That is much extra JS to load.
    Does not seem as simple Google charts.
    Can one zoom in?

    There are many options in the charting area... The best of which work off-line. Google charts in NOT one of these.
    Just saying...

    Thanks
     
    joulongleu likes this.
  4. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Consider if joining all the js files using https://jscompress.com/ in one .js file may be faster to load. (second tab to upload multiple js files).
     
    joulongleu and Mashiane like this.
  5. Mashiane

    Mashiane Well-Known Member Licensed User

    There is a zoom example that I will look at as soon as I'm comfortable with these charts. Each example is meant to highlight a particular section of option settings.
     
    joulongleu likes this.
  6. Mashiane

    Mashiane Well-Known Member Licensed User

    Thanks @alwaysbusy with the advice on compressing the js files, will attend to that.

    In most cases, one will use just one js file being jquery.jqplot.min.js as the rest are plugins. Anyway, here is extra stuff, this just being basic for now.

    Examples 25 - 40

    25-28.png

    29-32.png

    33-36.png

    37-40.png
     
    joulongleu likes this.
  7. Mashiane

    Mashiane Well-Known Member Licensed User

    Example 25-40 ConnectPage Source Code..

    Code:
    example25.Initialize(page"example25")
        
    page.Cell(14,1).AddComponent(example25.ABMComp)
        example25.SetTitle(
    "Example 25: Funnel Chart")
        example25.SetWidthHeight(
    "100%","600px")
        example25.SetChartType(example25.ChartType.funnel)
        example25.AddSeriesData2(
    "'Sony'",1)
        example25.AddSeriesData2(
    "'Samsung'",13)
        example25.AddSeriesData2(
    "'LG'",14)
        example25.AddSeriesData2(
    "'Phillips'",5)
        example25.SingleSeries = 
    True  'IMPORTANT
        'Log(example25.ToString)
       
        example26.Initialize(
    page"example26")
        
    page.Cell(14,2).AddComponent(example26.ABMComp)
        example26.SetTitle(
    "Example 26: More Funnel Chart")
        example26.SetWidthHeight(
    "100%","600px")
        example26.SetChartType(example26.ChartType.funnel)
        example26.AddSeriesData2(
    "'Sony'",1)
        example26.AddSeriesData2(
    "'Samsung'",13)
        example26.AddSeriesData2(
    "'LG'",14)
        example26.AddSeriesData2(
    "'Phillips'",5)
        example26.SetDataLabels(
    "percent",True)
        example26.SingleSeries = 
    True  'IMPORTANT
        example26.SetFunnelSectionMargin(0)        ' no spacing between item
        'example26.SetLegend("e",True)
       
        example27.Initialize(
    page"example27")
        
    page.Cell(15,1).AddComponent(example27.ABMComp)
        example27.SetTitle(
    "Example 27: Funnel Fill")
        example27.SetWidthHeight(
    "100%","600px")
        example27.SetChartType(example27.ChartType.funnel)
        example27.AddSeriesData2(
    "'Sony'",1)
        example27.AddSeriesData2(
    "'Samsung'",13)
        example27.AddSeriesData2(
    "'LG'",14)
        example27.AddSeriesData2(
    "'Phillips'",5)
        example27.SetDataLabels(
    "percent",True)
        example27.SingleSeries = 
    True  'IMPORTANT
        'example27.SetLegend("e",True)
        example27.SetFill(False4)
       
        example28.Initialize(
    page"example28")
        
    page.Cell(15,2).AddComponent(example28.ABMComp)
        example28.SetTitle(
    "Example 28: Funnel Percentage")
        example28.SetWidthHeight(
    "100%","600px")
        example28.SetChartType(example28.ChartType.funnel)
        example28.AddSeriesData2(
    "'Sony'",1)
        example28.AddSeriesData2(
    "'Samsung'",13)
        example28.AddSeriesData2(
    "'LG'",14)
        example28.AddSeriesData2(
    "'Phillips'",5)
        example28.SetDataLabels(
    "percent",True)
        example28.SingleSeries = 
    True  'IMPORTANT
       
        
    ' scatter
        example29.Initialize(page"example29")
        
    page.Cell(16,1).AddComponent(example29.ABMComp)
        example29.SetTitle(
    "Example 29: Scatter Chart")
        example29.SetWidthHeight(
    "100%","600px")
        example29.AddSeriesData2(
    400,35)
        example29.AddSeriesData2(
    402,37)
        example29.AddSeriesData2(
    650,55)
        example29.AddSeriesData2(
    653,56)
        example29.AddSeriesData2(
    650,50)
        example29.AddSeriesData2(
    700,55)
        example29.AddSeriesData2(
    600,37)
        example29.AddSeriesData2(
    601,43)
        example29.AddSeriesData2(
    450,38)
        example29.AddSeriesData2(
    473,37)
        example29.SingleSeries = 
    True  'IMPORTANT
        example29.SetChartType(example29.ChartType.scatter)
       
        
    ' scatter
        example30.Initialize(page"example30")
        
    page.Cell(16,2).AddComponent(example30.ABMComp)
        example30.SetTitle(
    "Example 30: Scatter Chart Trends")
        example30.SetWidthHeight(
    "100%","600px")
        example30.AddSeriesData2(
    400,35)
        example30.AddSeriesData2(
    402,37)
        example30.AddSeriesData2(
    650,55)
        example30.AddSeriesData2(
    653,56)
        example30.AddSeriesData2(
    650,50)
        example30.AddSeriesData2(
    700,55)
        example30.AddSeriesData2(
    600,37)
        example30.AddSeriesData2(
    601,43)
        example30.AddSeriesData2(
    450,38)
        example30.AddSeriesData2(
    473,37)
        example30.SingleSeries = 
    True  'IMPORTANT
        example30.SetChartType(example30.ChartType.scatter)
        example30.AddSeriesTrendLine(
    "a",True"#000ff""exponential")
       
        
    ' bubble
        example31.Initialize(page"example31")
        
    page.Cell(17,1).AddComponent(example31.ABMComp)
        example31.SetWidthHeight(
    "100%","600px")
        example31.SingleSeries = 
    True  'IMPORTANT
        example31.SetChartType(example31.ChartType.bubble)
        example31.AddBubbleData(
    301,60,29392,"Italy")
        example31.AddBubbleData(
    675,65,34205,"France")
        example31.AddBubbleData(
    506,46,30625,"Spain")
        example31.AddBubbleData(
    357,81,37896,"Germany")
        example31.AddBubbleData(
    450,9,37333,"Sweden")
        example31.SetTitles(
    "Example 31: Bubble Chart with Gradient Fills","Total area [*1000 km3]","Population [million]")
        example31.seriesDefaults.shadow = 
    True
        example31.seriesDefaults.rendererOptions.bubbleGradients = 
    True
       
        
    ' bubble
        example32.Initialize(page"example32")
        
    page.Cell(17,2).AddComponent(example32.ABMComp)
        example32.SetWidthHeight(
    "100%","600px")
        example32.SingleSeries = 
    True  'IMPORTANT
        example32.SetChartType(example32.ChartType.bubble)
        example32.AddBubbleDataWithColor(
    301,60,29392,"Italy","#b39524")
        example32.AddBubbleDataWithColor(
    675,65,34205,"France","#a39544")
        example32.AddBubbleDataWithColor(
    506,46,30625,"Spain","#a39564")
        example32.AddBubbleDataWithColor(
    357,81,37896,"Germany","#ff2524")
        example32.AddBubbleDataWithColor(
    450,9,37333,"Sweden","#b39524")
        example32.SetTitles(
    "Example 32: Bubble Chart with Own Colors","Total area [*1000 km3]","Population [million]")
        example32.seriesDefaults.shadow = 
    False
        example32.seriesDefaults.rendererOptions.bubbleGradients = 
    False
       
        
    ' bubble
        example33.Initialize(page"example33")
        
    page.Cell(18,1).AddComponent(example33.ABMComp)
        example33.SetWidthHeight(
    "100%","600px")
        example33.SingleSeries = 
    True  'IMPORTANT
        example33.SetChartType(example33.ChartType.bubble)
        example33.AddBubbleDataWithColor(
    301,60,29392,"Italy","#b39524")
        example33.AddBubbleDataWithColor(
    675,65,34205,"France","#a39544")
        example33.AddBubbleDataWithColor(
    506,46,30625,"Spain","#a39564")
        example33.AddBubbleDataWithColor(
    357,81,37896,"Germany","#ff2524")
        example33.AddBubbleDataWithColor(
    450,9,37333,"Sweden","#b39524")
        example33.SetTitles(
    "Example 33: Bubble Chart with Transparency","Total area [*1000 km3]","Population [million]")
        example33.seriesDefaults.shadow = 
    True
        example33.seriesDefaults.rendererOptions.bubbleGradients = 
    True
        example33.seriesDefaults.rendererOptions.bubbleAlpha = 
    0.6
       
        
    ' block
        example34.Initialize(page"example34")
        
    page.Cell(18,2).AddComponent(example34.ABMComp)
        example34.SetWidthHeight(
    "100%","600px")
        example34.SingleSeries = 
    True  'IMPORTANT
        example34.SetChartType(example34.ChartType.block)
        example34.AddBlockData(
    10,30,"Copper")
        example34.AddBlockData(
    100,40,"Gold")
        example34.AddBlockData(
    50,50,"Silver")
        example34.AddBlockData(
    12,78,"Lead")
        example34.AddBlockData(
    44,66,"Brass")
        example34.SetTitle(
    "Example 34: Block Chart")
       
        
    ' block
        example35.Initialize(page"example35")
        
    page.Cell(19,1).AddComponent(example35.ABMComp)
        example35.SetWidthHeight(
    "100%","600px")
        example35.SetChartType(example35.ChartType.block)
        example35.AddBlockData(
    10,30,"Copper")
        example35.AddBlockData(
    100,40,"Gold")
        example35.AddBlockData(
    50,50,"Silver")
        example35.AddBlockData(
    12,78,"Lead")
        example35.AddBlockData(
    44,66,"Brass")
        example35.SetTitle(
    "Example 35: Block Chart Multi Series")
       
        
    ' pie chart
        example36.Initialize(page"example36")
        
    page.Cell(19,2).AddComponent(example36.ABMComp)
        example36.SetWidthHeight(
    "100%","600px")
        example36.SetChartType(example36.ChartType.pie)
        example36.AddSeriesData2(
    "'Dairy'",212)
        example36.AddSeriesData2(
    "'Meat'",140)
        example36.AddSeriesData2(
    "'Grains'",276)
        example36.AddSeriesData2(
    "'Fish'",131)
        example36.AddSeriesData2(
    "'Vegetables'",510)
        example36.AddSeriesData2(
    "'Fruit'",325)
        example36.SingleSeries = 
    True  'IMPORTANT
        example36.SetTitle("Example 36: Eating Pies")
        example36.SetDataLabels(
    "",True)
        
    Log(example36.ToString)
       
        
    ' pie chart
        example37.Initialize(page"example37")
        
    page.Cell(20,1).AddComponent(example37.ABMComp)
        example37.SetWidthHeight(
    "100%","600px")
        example37.SetChartType(example37.ChartType.pie)
        example37.AddSeriesData2(
    "'Dairy'",212)
        example37.AddSeriesData2(
    "'Meat'",140)
        example37.AddSeriesData2(
    "'Grains'",276)
        example37.AddSeriesData2(
    "'Fish'",131)
        example37.AddSeriesData2(
    "'Vegetables'",510)
        example37.AddSeriesData2(
    "'Fruit'",325)
        example37.SingleSeries = 
    True  'IMPORTANT
        example37.SetTitle("Example 37: Eating Pies (Values)")
        example37.SetDataLabels(
    "value",True)
        
    Log(example37.ToString)
       
        
    ' pie chart
        example38.Initialize(page"example38")
        
    page.Cell(20,2).AddComponent(example38.ABMComp)
        example38.SetWidthHeight(
    "100%","600px")
        example38.SetChartType(example38.ChartType.pie)
        example38.AddSeriesData2(
    "'Dairy'",212)
        example38.AddSeriesData2(
    "'Meat'",140)
        example38.AddSeriesData2(
    "'Grains'",276)
        example38.AddSeriesData2(
    "'Fish'",131)
        example38.AddSeriesData2(
    "'Vegetables'",510)
        example38.AddSeriesData2(
    "'Fruit'",325)
        example38.SingleSeries = 
    True  'IMPORTANT
        example38.SetTitle("Example 38: Eating Pies - Slice Margins")
        example38.SetDataLabels(
    "value",True)
        example38.SetSliceMargin(
    6)
        
    Log(example38.ToString)
       
        
    'SetFill
        example39.Initialize(page"example39")
        
    page.Cell(21,1).AddComponent(example39.ABMComp)
        example39.SetWidthHeight(
    "100%","600px")
        example39.SetChartType(example39.ChartType.pie)
        example39.AddSeriesData2(
    "'Dairy'",212)
        example39.AddSeriesData2(
    "'Meat'",140)
        example39.AddSeriesData2(
    "'Grains'",276)
        example39.AddSeriesData2(
    "'Fish'",131)
        example39.AddSeriesData2(
    "'Vegetables'",510)
        example39.AddSeriesData2(
    "'Fruit'",325)
        example39.SingleSeries = 
    True  'IMPORTANT
        example39.SetTitle("Example 39: Eating Sliced Un-Filled Pies")
        example39.SetDataLabels(
    "value",True)
        example39.SetSliceMargin(
    6)
        example39.SetFill(
    False,5)
        
    Log(example39.ToString)
       
        example40.Initialize(
    page"example49")
        
    page.Cell(21,2).AddComponent(example40.ABMComp)
        example40.SetWidthHeight(
    "100%","600px")
        example40.SetChartType(example40.ChartType.donut)
        example40.AddSeriesData2(
    "'Dairy'",212)
        example40.AddSeriesData2(
    "'Meat'",140)
        example40.AddSeriesData2(
    "'Grains'",276)
        example40.AddSeriesData2(
    "'Fish'",131)
        example40.AddSeriesData2(
    "'Vegetables'",510)
        example40.AddSeriesData2(
    "'Fruit'",325)
        example40.SingleSeries = 
    True  'IMPORTANT
        example40.SetTitle("Example 40: Would you like a donut?")
        example40.SetDataLabels(
    "value",True)
        example40.SetSliceMargin(
    3)
        example40.SetStartAngle(-
    90)
        
    Log(example40.ToString)
     

    Attached Files:

    joulongleu and inakigarm like this.
  8. Mashiane

    Mashiane Well-Known Member Licensed User

    Example 41 - 51.

    41-44.png

    45-48.png

    49-51.png
     
    joulongleu likes this.
  9. Mashiane

    Mashiane Well-Known Member Licensed User

    Known Issues:

    1. The Legend has been a little elusive, will see what I can do.
    2. Consolidating the js files into one does not work well, tried it, it distorts the displays. Guess will have to pass this up.

    Code:
    example41.Initialize(page"example41")
        
    page.Cell(22,1).AddComponent(example41.ABMComp)
        example41.SetTitle(
    "Example 41: Foreign Customers")
        example41.SetWidthHeight(
    "500px","300px")
        example41.SetChartType(example41.ChartType.bar)
        example41.AddBarData(
    "Germany",12)
        example41.AddBarData(
    "Italy",8)
        example41.AddBarData(
    "Spain",6)
        example41.AddBarData(
    "France",10)
        example41.AddBarData(
    "UK",7)
        example41.SingleSeries = 
    True  'IMPORTANT
        'Log(example41.ToString)
       
        example42.Initialize(
    page"example42")
        
    page.Cell(22,2).AddComponent(example42.ABMComp)
        example42.SetTitle(
    "Example 42: Foreign Customers Rotated XAxis Labels")
        example42.SetWidthHeight(
    "100%","600px")
        example42.SetChartType(example42.ChartType.bar)
        example42.AddBarData(
    "Germany",12)
        example42.AddBarData(
    "Italy",8)
        example42.AddBarData(
    "Spain",6)
        example42.AddBarData(
    "France",10)
        example42.AddBarData(
    "UK",7)
        example42.SingleSeries = 
    True  'IMPORTANT
        example42.RotateXAxisLabels(-30"10pt")
        
    'Log(example42.ToString)
       
        example43.Initialize(
    page"example43")
        
    page.Cell(23,1).AddComponent(example43.ABMComp)
        example43.SetTitle(
    "Example 43: Foreign Customers Bar Margins")
        example43.SetWidthHeight(
    "100%","600px")
        example43.SetChartType(example43.ChartType.bar)
        example43.AddBarData(
    "Germany",12)
        example43.AddBarData(
    "Italy",8)
        example43.AddBarData(
    "Spain",6)
        example43.AddBarData(
    "France",10)
        example43.AddBarData(
    "UK",7)
        example43.SingleSeries = 
    True  'IMPORTANT
        example43.RotateXAxisLabels(-30"10pt")
        example43.SetBarMargins(
    30)
        
    'Log(example43.ToString)
       
        example44.Initialize(
    page"example44")
        
    page.Cell(23,2).AddComponent(example44.ABMComp)
        example44.SetTitle(
    "Example 44: Foreign Customers Point Labels")
        example44.SetWidthHeight(
    "100%","600px")
        example44.SetChartType(example44.ChartType.bar)
        example44.AddBarData(
    "Germany",12)
        example44.AddBarData(
    "Italy",8)
        example44.AddBarData(
    "Spain",6)
        example44.AddBarData(
    "France",10)
        example44.AddBarData(
    "UK",7)
        example44.SingleSeries = 
    True  'IMPORTANT
        example44.RotateXAxisLabels(-30"10pt")
        example44.SetBarMargins(
    30)
        example44.ShowPointLabels(
    True,"")
        
    'Log(example44.ToString)
       
        example45.Initialize(
    page"example45")
        
    page.Cell(24,1).AddComponent(example45.ABMComp)
        example45.SetTitle(
    "Example 45: Foreign Customers Negative Values")
        example45.SetWidthHeight(
    "100%","600px")
        example45.SetChartType(example45.ChartType.bar)
        example45.AddBarData(
    "Germany",-12)
        example45.AddBarData(
    "Italy",-8)
        example45.AddBarData(
    "Spain",-6)
        example45.AddBarData(
    "France",-10)
        example45.AddBarData(
    "UK",-7)
        example45.SingleSeries = 
    True  'IMPORTANT
        example45.RotateXAxisLabels(-30"10pt")
        example45.SetBarMargins(
    30)
        example45.ShowPointLabels(
    True,"")
        example45.DetectNegativeValues(
    True)  ' IMPORTANT (true by default)
        'Log(example45.ToString)
       
        example46.Initialize(
    page"example46")
        
    page.Cell(24,2).AddComponent(example46.ABMComp)
        example46.SetTitle(
    "Example 46: Foreign Customers +- Values")
        example46.SetWidthHeight(
    "100%","600px")
        example46.SetChartType(example46.ChartType.bar)
        example46.AddBarData(
    "Germany",-12)
        example46.AddBarData(
    "Italy",8)
        example46.AddBarData(
    "Spain",-6)
        example46.AddBarData(
    "France",10)
        example46.AddBarData(
    "UK",-7)
        example46.SingleSeries = 
    True  'IMPORTANT
        example46.RotateXAxisLabels(-30"10pt")
        example46.SetBarMargins(
    30)
        example46.ShowPointLabels(
    True,"")
        
    'Log(example46.ToString)
       
        example47.Initialize(
    page"example47")
        
    page.Cell(25,1).AddComponent(example47.ABMComp)
        example47.SetTitle(
    "Example 47: Grouped Bar Chart")
        example47.SetWidthHeight(
    "100%","600px")
        example47.SetChartType(example47.ChartType.bar)
        example47.AddCategory(
    "Germany")
        example47.AddCategory(
    "Italy")
        example47.AddCategory(
    "Spain")
        example47.AddCategory(
    "France")
        example47.AddCategory(
    "UK")
        example47.AddSeries(
    "Electronics")
        example47.AddSeries(
    "Software")
        example47.AddSeries(
    "Mechanics")   
        example47.AddSeriesData5(
    12,8,6,10,7)
        example47.AddSeriesData5(
    14,12,4,14,11)
        example47.AddSeriesData5(
    18,10,5,9,9)
        example47.RotateXAxisLabels(-
    30"10pt")
        example47.SetBarMargins(
    30)
        example47.ShowPointLabels(
    True,"")
        
    'Log(example47.ToString)
       
        example48.Initialize(
    page"example48")
        
    page.Cell(25,2).AddComponent(example48.ABMComp)
        example48.SetTitle(
    "Example 48: Bar Legend")
        example48.SetWidthHeight(
    "100%","600px")
        example48.SetChartType(example48.ChartType.bar)
        example48.AddCategory(
    "Germany")
        example48.AddCategory(
    "Italy")
        example48.AddCategory(
    "Spain")
        example48.AddCategory(
    "France")
        example48.AddCategory(
    "UK")
        example48.AddSeries(
    "Electronics")
        example48.AddSeries(
    "Software")
        example48.AddSeries(
    "Mechanics")   
        example48.AddSeriesData5(
    12,8,6,10,7)
        example48.AddSeriesData5(
    14,12,4,14,11)
        example48.AddSeriesData5(
    18,10,5,9,9)
        example48.RotateXAxisLabels(-
    30"10pt")
        example48.SetBarMargins(
    30)
        example48.ShowPointLabels(
    True,"")
        
    'example48.SetLegend("e", True,"outsideGrid")
        'Log(example48.ToString)
       
        example49.Initialize(
    page"example49")
        
    page.Cell(26,1).AddComponent(example49.ABMComp)
        example49.SetTitle(
    "Example 49: Horizontal Bar Chart")
        example49.SetWidthHeight(
    "100%","900px")
        example49.SetChartType(example49.ChartType.barh)   
    'IMPORTANT
        example49.AddCategory("Germany")
        example49.AddCategory(
    "Italy")
        example49.AddCategory(
    "Spain")
        example49.AddCategory(
    "France")
        example49.AddCategory(
    "UK")
        example49.AddSeries(
    "Electronics")
        example49.AddSeries(
    "Software")
        example49.AddSeries(
    "Mechanics")
        example49.AddSeriesData5(
    12,8,6,10,7)
        example49.AddSeriesData5(
    14,12,4,14,11)
        example49.AddSeriesData5(
    18,10,5,9,9)
        
    'example49.SetLegend("e", True,"outsideGrid")
        'Log(example49.ToString)
       
        example50.Initialize(
    page"example50")
        
    page.Cell(26,2).AddComponent(example50.ABMComp)
        example50.SetTitle(
    "Example 50: Stacked Bar Chart")
        example50.SetWidthHeight(
    "100%","900px")
        example50.SetChartType(example50.ChartType.bar)   
    'IMPORTANT
        example50.AddCategory("Germany")
        example50.AddCategory(
    "Italy")
        example50.AddCategory(
    "Spain")
        example50.AddCategory(
    "France")
        example50.AddCategory(
    "UK")
        example50.AddSeries(
    "Electronics")
        example50.AddSeries(
    "Software")
        example50.AddSeries(
    "Mechanics")
        example50.AddSeriesData5(
    12,8,6,10,7)
        example50.AddSeriesData5(
    14,12,4,14,11)
        example50.AddSeriesData5(
    18,10,5,9,9)
        example50.ShowPointLabels(
    True,example50.Location.s)
        example50.IsStacked = 
    True
        
    'example50.SetLegend("e", True,"outsideGrid")
        Log(example50.ToString)
       
        example51.Initialize(
    page"example51")
        
    page.Cell(27,1).AddComponent(example51.ABMComp)
        example51.SetTitle(
    "Example 51: Horizontal Stacked Bar Chart")
        example51.SetWidthHeight(
    "100%","900px")
        example51.SetChartType(example51.ChartType.barh)   
    'IMPORTANT
        example51.AddCategory("Germany")
        example51.AddCategory(
    "Italy")
        example51.AddCategory(
    "Spain")
        example51.AddCategory(
    "France")
        example51.AddCategory(
    "UK")
        example51.AddSeries(
    "Electronics")
        example51.AddSeries(
    "Software")
        example51.AddSeries(
    "Mechanics")
        example51.AddSeriesData5(
    12,8,6,10,7)
        example51.AddSeriesData5(
    14,12,4,14,11)
        example51.AddSeriesData5(
    18,10,5,9,9)
        example51.ShowPointLabels(
    True,example51.Location.w)
        example51.IsStacked = 
    True
        
    'example50.SetLegend("e", True,"outsideGrid")
        Log(example51.ToString)
     

    Attached Files:

    joulongleu likes this.
  10. Mashiane

    Mashiane Well-Known Member Licensed User

    Here is the zoom functionality, Example 52 and 53.

    1.You select, drag and release the area to Zoom, double click will reset the plot area.

    Zoom.png

    Zoom1.png

    We are plotting a large volume of data here using date and value, we set the minimun date to be 1 August 2010 16:00 and with a 6 month interval. By default, jPlot will draw a line chart if you dont specify the chart type.

    Code:
    example52.Initialize(page"example52")
        
    page.Cell(28,1).AddComponent(example52.ABMComp)
        example52.SetTitle(
    "Example 52: Zoom Functionality Original")
        example52.SetWidthHeight(
    "100%","900px")
        example52.xAxis.sMin = 
    "'August 1,2010 16:00:00'"
        example52.xAxis.tickInterval = 
    "'6 months'"
        example52.xAxis.tickOptions.formatString = 
    "'%#m/%#d/%Y'"
        example52.AddSeriesNeigborThreshold(
    "-1")
        example52.xAxis.renderer = example52.renderer.DateAxisRenderer
        example52.cursor.show = 
    True
        example52.cursor.zoom = 
    True
        example52.cursor.showToolTip = 
    False
        example52.SingleSeries = 
    True  'IMPORTANT
        example52.AddSeriesDateData("6/22/2012 10:00:00",110.32)
        example52.AddSeriesDateData(
    "6/8/2012 10:00:00",115.84)
       
        example52.AddSeriesDateData(
    "5/26/2012 10:00:00"121.23)
        example52.AddSeriesDateData(
    "5/11/2012 10:00:00"122.12)
        example52.AddSeriesDateData(
    "4/27/2012 10:00:00"120.69)
        example52.AddSeriesDateData(
    "4/13/2012 10:00:00",123.24)
        example52.AddSeriesDateData(
    "3/30/2012 10:00:00"116.78)
        example52.AddSeriesDateData(
    "3/16/2012 10:00:00"115.16)
        example52.AddSeriesDateData(
    "3/2/2012 10:00:00"113.57)
        example52.AddSeriesDateData(
    "2/17/2012 10:00:00"120.45)
        example52.AddSeriesDateData(
    "2/2/2012 10:00:00"121.28)
        example52.AddSeriesDateData(
    "1/20/2012 10:00:00"124.7)
        example52.AddSeriesDateData(
    "1/5/2012 10:00:00"130.07)
        example52.AddSeriesDateData(
    "12/22/2011 10:00:00"129.36)
        example52.AddSeriesDateData(
    "12/8/2011 10:00:00"130.76)
        example52.AddSeriesDateData(
    "11/24/2011 10:00:00"133.96)
        example52.AddSeriesDateData(
    "11/10/2011 10:00:00"140.02)
        example52.AddSeriesDateData(
    "10/27/2011 10:00:00"138.36)
        example52.AddSeriesDateData(
    "10/13/2011 10:00:00"140.54)
        example52.AddSeriesDateData(
    "9/29/2011 10:00:00"140.91)
        example52.AddSeriesDateData(
    "9/15/2011 10:00:00"140.15)
        example52.AddSeriesDateData(
    "9/2/2011 10:00:00"138.25)
        example52.AddSeriesDateData(
    "8/25/2011 10:00:00"137.29)
        example52.AddSeriesDateData(
    "8/11/2011 10:00:00"139.15)
        example52.AddSeriesDateData(
    "7/28/2011 10:00:00"144.86)
        example52.AddSeriesDateData(
    "7/14/2011 10:00:00"145.32)
        example52.AddSeriesDateData(
    "6/30/2011 10:00:00"148.12)
        example52.AddSeriesDateData(
    "6/16/2011 10:00:00"146.43)
        example52.AddSeriesDateData(
    "6/2/2011 10:00:00"147)
        example52.AddSeriesDateData(
    "5/19/2011 10:00:00"144.62)
        example52.AddSeriesDateData(
    "5/5/2011 10:00:00"143.2)
        example52.AddSeriesDateData(
    "4/21/2011 10:00:00"144.06)
        example52.AddSeriesDateData(
    "4/7/2011 10:00:00"137.45)
        example52.AddSeriesDateData(
    "3/24/2011 10:00:00"138.08)
        example52.AddSeriesDateData(
    "3/10/2011 10:00:00"137.92)
        example52.AddSeriesDateData(
    "2/25/2011 10:00:00"131.18)
        example52.AddSeriesDateData(
    "2/11/2011 10:00:00"129.64)
        example52.AddSeriesDateData(
    "1/28/2011 10:00:00"133.9)
        example52.AddSeriesDateData(
    "1/14/2011 10:00:00"134.25)
        example52.AddSeriesDateData(
    "12/31/2010 10:00:00"137.00)
        example52.AddSeriesDateData(
    "12/17/2010 10:00:00"136.69)
        example52.AddSeriesDateData(
    "12/3/2010 10:00:00"144.87)
        example52.AddSeriesDateData(
    "11/19/2010 10:00:00"146.7)
        example52.AddSeriesDateData(
    "11/5/2010 10:00:00"143.97)
        example52.AddSeriesDateData(
    "10/22/2010 10:00:00"139.6)
        example52.AddSeriesDateData(
    "10/8/2010 10:00:00"133.39)
        example52.AddSeriesDateData(
    "9/24/2010 10:00:00"130.27)
        example52.AddSeriesDateData(
    "9/10/2010 10:00:00"132.75)
        example52.AddSeriesDateData(
    "8/27/2010 10:00:00"130.25)
        
    Log(example52.ToString)
    PS: @Harris
     

    Attached Files:

    Harris and joulongleu like this.
  11. Mashiane

    Mashiane Well-Known Member Licensed User

    Setting Limits on the Charts...

    Add the js file to your page...

    page.AddExtraJavaScriptFile("custom/jqplot.canvasOverlay.js")

    Upper and Lower Limit: Example 54

    Code:
    example54.Initialize(page"example54")
        
    page.Cell(29,1).AddComponent(example54.ABMComp)
        example54.SetTitle(
    "Example 54: Upper & Lower Limits")
        example54.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        example54.SetUpperLimit(
    145,4,0,0,255,False"8,16", example54.linecap.sround)
        example54.SetLowerLimit(
    70,3,255,0,0,True ,example54.linecap.sbutt)
        
    Log(example54.ToString)
    Setting Deadline: Example 55

    Code:
    example55.Initialize(page"example55")
        
    page.Cell(29,2).AddComponent(example55.ABMComp)
        example55.SetTitle(
    "Example 55: Setting Deadline")
        example55.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        example55.SetDeadLine(
    "lowLimit",5,3,50,200,50,True,example55.lineCap.sbutt,0)
        
    Log(example55.ToString)

    Limits.png
     

    Attached Files:

    joulongleu likes this.
  12. Mashiane

    Mashiane Well-Known Member Licensed User

    Setting up the background of the chart: Example 56 - Example 58

    Code:
    example56.Initialize(page"example56")
        
    page.Cell(30,1).AddComponent(example56.ABMComp)
        example56.SetTitle(
    "Example 56: Grid Background")
        example56.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        example56.grid.background = 
    "#000000"
           
       
        example57.Initialize(
    page"example57")
        
    page.Cell(30,2).AddComponent(example57.ABMComp)
        example57.SetTitle(
    "Example 57: Grid LineColor & LineWidth")
        example57.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        example57.grid.background = 
    "#000000"
        example57.grid.gridLineColor = 
    "#ffffff"
        example57.grid.gridLineWidth = 
    2
       
        example58.Initialize(
    page"example58")
        
    page.Cell(31,1).AddComponent(example58.ABMComp)
        example58.SetTitle(
    "Example 58: Grid Border & Shadow")
        example58.AddSeriesData9(
    100,110,140,130,80,75,120,130,100)
        example58.grid.gridLineColor = 
    "#000000"
        example58.grid.gridLineWidth = 
    2
        example58.grid.drawBorder = 
    False
        example58.grid.shadow = 
    False
    PS: The drarGridLines property of the chart has been moved to the grid object.

    Grid.png
     

    Attached Files:

    joulongleu likes this.
  13. Mashiane

    Mashiane Well-Known Member Licensed User

    Example 59 & 60: Area Charts

    Code:
    'consider the order of appearance
        example59.Initialize(page"example59")
        
    page.Cell(32,1).AddComponent(example59.ABMComp)
        example59.SetTitle(
    "Example 59: Area Chart")
        example59.AddSeriesData6(
    7,8,9,11,10,11)
        example59.AddSeriesData6(
    5,6,8,9,7,9)
        example59.AddSeriesData6(
    3,4,5,6,5,7)
        example59.AddSeriesData6(
    1,2,3,2,3,4)
        example59.seriesDefaults.showMarker = 
    False
        example59.seriesDefaults.fill = 
    True
        example59.seriesDefaults.rendererOptions.smooth = 
    True
     
        
    'consider the order of appearance
        example60.Initialize(page"example60")
        
    page.Cell(32,2).AddComponent(example60.ABMComp)
        example60.SetTitle(
    "Example 60: Area Chart & Line Chart")
        example60.AddSeriesData6(
    7,8,9,11,10,11)
        example60.AddSeriesData6(
    5,6,8,9,7,9)
        example60.AddSeriesData6(
    3,4,5,6,5,7)
        example60.AddSeriesData6(
    1,2,3,2,3,4)
        example60.seriesDefaults.showMarker = 
    False
        example60.seriesDefaults.rendererOptions.smooth = 
    True
        example60.AddSeriesFill(
    False)
        example60.AddSeriesFill(
    True)
        example60.AddSeriesFill(
    False)
        example60.AddSeriesFill(
    True)

    NB: At some stage I will refactor the series object for proper code in this object.

    Area.png
     

    Attached Files:

    joulongleu likes this.
  14. Mashiane

    Mashiane Well-Known Member Licensed User

    OHLC / CandleStick Charts: Example 61 - 63

    CandleSticks.png


    Plugin:

    Code:
    page.AddExtraJavaScriptFile("custom/jqplot.ohlcRenderer.js")
    Code:
    example61.Initialize(page"example61")
        
    page.Cell(2,1).AddComponent(example61.ABMComp)
        example61.SetTitle(
    "Example 61: OHLC Charts (Open,High,Low,Close Prices)")
        example61.seriesDefaults.yAxis = 
    "y2axis"
        example61.xAxis.renderer = example61.renderer.DateAxisRenderer
        example61.xAxis.tickOptions.formatString = 
    "%b %e"
        example61.xAxis.sMin = 
    "'08-07-2012 16:00'"
        example61.xAxis.sMax = 
    "'09-12-2012 16:00'"
        example61.xAxis.tickInterval = 
    "'1 weeks'"
        example61.AddSeriesRenderer(example61.renderer.OHLCRenderer, 
    False)
        example61.y2Axis.tickOptions.formatString = 
    "$%.2f"
        example61.SingleSeries = 
    True
       
        example61.AddSeriesDataOHLC(
    "8/08/2012 0:00:01"1.2384851.23271.2402451.23721)
    example61.AddSeriesDataOHLC(
    "8/09/2012 0:00:01"1.237211.226711.238731.229295)
    example61.AddSeriesDataOHLC(
    "8/10/2012 0:00:01"1.22931.224171.231681.228975)
    example61.AddSeriesDataOHLC(
    "8/12/2012 0:00:01"1.2290751.227471.229211.22747)
    example61.AddSeriesDataOHLC(
    "8/13/2012 0:00:01"1.2275051.226081.237371.232627)
    example61.AddSeriesDataOHLC(
    "8/14/2012 0:00:01"1.232621.231671.2385551.232385)
    example61.AddSeriesDataOHLC(
    "8/15/2012 0:00:01"1.2323851.226411.2343551.22886)
    example61.AddSeriesDataOHLC(
    "8/16/2012 0:00:01"1.228871.2256251.2373051.23573)
    example61.AddSeriesDataOHLC(
    "8/17/2012 0:00:01"1.235741.228911.238241.2333)
    example61.AddSeriesDataOHLC(
    "8/19/2012 0:00:01"1.235221.232911.2352751.23323)
    example61.AddSeriesDataOHLC(
    "8/20/2012 0:00:01"1.2332151.229541.2368851.2351)
    example61.AddSeriesDataOHLC(
    "8/21/2012 0:00:01"1.235131.234651.2487851.247655)
    example61.AddSeriesDataOHLC(
    "8/22/2012 0:00:01"1.2476551.243151.2544151.25338)
    example61.AddSeriesDataOHLC(
    "8/23/2012 0:00:01"1.253391.2524651.2589651.255995)
    example61.AddSeriesDataOHLC(
    "8/24/2012 0:00:01"1.2559951.2481751.2566651.2512)
    example61.AddSeriesDataOHLC(
    "8/26/2012 0:00:01"1.251331.250421.2524151.25054)
    example61.AddSeriesDataOHLC(
    "8/27/2012 0:00:01"1.250581.2490251.253561.25012)
    example61.AddSeriesDataOHLC(
    "8/28/2012 0:00:01"1.2501151.246561.2576951.2571)
    example61.AddSeriesDataOHLC(
    "8/29/2012 0:00:01"1.257091.2518951.257361.2530657)
    example61.AddSeriesDataOHLC(
    "8/30/2012 0:00:01"1.2530751.2487851.256391.25097)
    example61.AddSeriesDataOHLC(
    "8/31/2012 0:00:01"1.250961.2493751.2637851.25795)
    example61.AddSeriesDataOHLC(
    "9/02/2012 0:00:01"1.2571951.2568451.2587051.257355)
    example61.AddSeriesDataOHLC(
    "9/03/2012 0:00:01"1.257341.256041.2610951.258635)
    example61.AddSeriesDataOHLC(
    "9/04/2012 0:00:01"1.258651.252641.2627951.25339)
    example61.AddSeriesDataOHLC(
    "9/05/2012 0:00:01"1.25341.2501951.262451.26005)
    example61.AddSeriesDataOHLC(
    "9/06/2012 0:00:01"1.260061.2561651.265131.26309)
    example61.AddSeriesDataOHLC(
    "9/07/2012 0:00:01"1.263091.2626551.2817651.281625)
    example61.AddSeriesDataOHLC(
    "9/09/2012 0:00:01"1.280961.279151.2812951.279565)
    example61.AddSeriesDataOHLC(
    "9/10/2012 0:00:01"1.279571.275521.280361.27617)
    example61.AddSeriesDataOHLC(
    "9/11/2012 0:00:01"1.276171.27591.287121.28515)
    example61.AddSeriesDataOHLC(
    "9/12/2012 0:00:01"1.285161.2816251.293681.290235)
    Log(example61.tostring)
       
        example62.Initialize(
    page"example62")
        
    page.Cell(2,2).AddComponent(example62.ABMComp)
        example62.SetTitle(
    "Example 62: OHLC CandleSticks (Open,High,Low,Close Prices)")
        example62.seriesDefaults.yAxis = 
    "y2axis"
        example62.xAxis.renderer = example62.renderer.DateAxisRenderer
        example62.xAxis.tickOptions.formatString = 
    "%b %e"
        example62.xAxis.sMin = 
    "'08-07-2012 16:00'"
        example62.xAxis.sMax = 
    "'09-12-2012 16:00'"
        example62.xAxis.tickInterval = 
    "'1 weeks'"
        example62.AddSeriesRenderer(example61.renderer.OHLCRenderer, 
    True)
        example62.y2Axis.tickOptions.formatString = 
    "$%.2f"
        example62.SingleSeries = 
    True
       
        example62.AddSeriesDataOHLC(
    "8/08/2012 0:00:01"1.2384851.23271.2402451.23721)
    example62.AddSeriesDataOHLC(
    "8/09/2012 0:00:01"1.237211.226711.238731.229295)
    example62.AddSeriesDataOHLC(
    "8/10/2012 0:00:01"1.22931.224171.231681.228975)
    example62.AddSeriesDataOHLC(
    "8/12/2012 0:00:01"1.2290751.227471.229211.22747)
    example62.AddSeriesDataOHLC(
    "8/13/2012 0:00:01"1.2275051.226081.237371.232627)
    example62.AddSeriesDataOHLC(
    "8/14/2012 0:00:01"1.232621.231671.2385551.232385)
    example62.AddSeriesDataOHLC(
    "8/15/2012 0:00:01"1.2323851.226411.2343551.22886)
    example62.AddSeriesDataOHLC(
    "8/16/2012 0:00:01"1.228871.2256251.2373051.23573)
    example62.AddSeriesDataOHLC(
    "8/17/2012 0:00:01"1.235741.228911.238241.2333)
    example62.AddSeriesDataOHLC(
    "8/19/2012 0:00:01"1.235221.232911.2352751.23323)
    example62.AddSeriesDataOHLC(
    "8/20/2012 0:00:01"1.2332151.229541.2368851.2351)
    example62.AddSeriesDataOHLC(
    "8/21/2012 0:00:01"1.235131.234651.2487851.247655)
    example62.AddSeriesDataOHLC(
    "8/22/2012 0:00:01"1.2476551.243151.2544151.25338)
    example62.AddSeriesDataOHLC(
    "8/23/2012 0:00:01"1.253391.2524651.2589651.255995)
    example62.AddSeriesDataOHLC(
    "8/24/2012 0:00:01"1.2559951.2481751.2566651.2512)
    example62.AddSeriesDataOHLC(
    "8/26/2012 0:00:01"1.251331.250421.2524151.25054)
    example62.AddSeriesDataOHLC(
    "8/27/2012 0:00:01"1.250581.2490251.253561.25012)
    example62.AddSeriesDataOHLC(
    "8/28/2012 0:00:01"1.2501151.246561.2576951.2571)
    example62.AddSeriesDataOHLC(
    "8/29/2012 0:00:01"1.257091.2518951.257361.2530657)
    example62.AddSeriesDataOHLC(
    "8/30/2012 0:00:01"1.2530751.2487851.256391.25097)
    example62.AddSeriesDataOHLC(
    "8/31/2012 0:00:01"1.250961.2493751.2637851.25795)
    example62.AddSeriesDataOHLC(
    "9/02/2012 0:00:01"1.2571951.2568451.2587051.257355)
    example62.AddSeriesDataOHLC(
    "9/03/2012 0:00:01"1.257341.256041.2610951.258635)
    example62.AddSeriesDataOHLC(
    "9/04/2012 0:00:01"1.258651.252641.2627951.25339)
    example62.AddSeriesDataOHLC(
    "9/05/2012 0:00:01"1.25341.2501951.262451.26005)
    example62.AddSeriesDataOHLC(
    "9/06/2012 0:00:01"1.260061.2561651.265131.26309)
    example62.AddSeriesDataOHLC(
    "9/07/2012 0:00:01"1.263091.2626551.2817651.281625)
    example62.AddSeriesDataOHLC(
    "9/09/2012 0:00:01"1.280961.279151.2812951.279565)
    example62.AddSeriesDataOHLC(
    "9/10/2012 0:00:01"1.279571.275521.280361.27617)
    example62.AddSeriesDataOHLC(
    "9/11/2012 0:00:01"1.276171.27591.287121.28515)
    example62.AddSeriesDataOHLC(
    "9/12/2012 0:00:01"1.285161.2816251.293681.290235)
    Log(example62.tostring)
       
        example63.Initialize(
    page"example63")
        
    page.Cell(3,1).AddComponent(example63.ABMComp)
        example63.SetTitle(
    "Example 63: OHLC Comparison (Open,High,Low,Close Prices)")
        example63.xAxis.renderer = example63.renderer.CategoryAxisRenderer
        example63.AddSeriesRenderer(example61.renderer.OHLCRenderer, 
    True)
        example63.SingleSeries = 
    True
        example63.AddSeriesDataOHLCCompare(
    1,75,80,40,44)
        example63.AddSeriesDataOHLCCompare(
    2,30,60,15,20)
        example63.AddSeriesDataOHLCCompare(
    3,64,75,48,50)
        example63.AddSeriesDataOHLCCompare(
    4,67,78,20,36)
        example63.AddCategory(
    "Apple")
        example63.AddCategory(
    "Ubuntu")
        example63.AddCategory(
    "Microsoft")
        example63.AddCategory(
    "Android")
     

    Attached Files:

    joulongleu and inakigarm like this.
  15. Harris

    Harris Well-Known Member Licensed User

    Will the AddSeriesDateData accept a long value or must all date / times be formatted as this string (day/month/year h:m:s)?

    What actually draws the chart ( as in - chart.draw(data, options); with google charts...)?

    This framework seems to cover all forms of charting very well.
    I shall have to try it soon and check performance. I have tried and learned Chartist, jCharts and Google charts. So far, the latter is easiest to learn and implement - however it requires an internet connection to function, since only the loader.js is resident on your server. Amazing how fast this is thou.

    ABMCustomComponent makes adding other functionality (almost) trivial. Thanks!
     
    joulongleu likes this.
  16. Mashiane

    Mashiane Well-Known Member Licensed User

    I would think any date/time acceptable value, see example 23-25, the crucial thing I'm of the opinion is the formatstring of the output.
     
    joulongleu likes this.
  17. Mashiane

    Mashiane Well-Known Member Licensed User

    Gauges, example 64 - 68.

    In buildpage add

    Code:
    page.AddExtraJavaScriptFile("custom/jqplot.meterGaugeRenderer.js")
    64-68.png

    In ConnectPage


    Code:
    example65.Initialize(page"example65")
        
    page.Cell(2,1).AddComponent(example65.ABMComp)
        example65.SetTitle(
    "Example 64: Gauge: Network Speed")
        example65.seriesDefaults.renderer = example65.renderer.MeterGaugeRenderer
        example65.seriesDefaults.rendererOptions.label = 
    "MB/s"
        example65.AddSeriesData1(
    1)

        example66.Initialize(
    page"example66")
        
    page.Cell(2,2).AddComponent(example66.ABMComp)
        example66.SetTitle(
    "Example 66: Gauge Intervals")
        example66.seriesDefaults.renderer = example66.renderer.MeterGaugeRenderer
        example66.AddSeriesData1(
    1)
        example66.AddSeriesDefaultsInterval(
    2"#66cc66")
        example66.AddSeriesDefaultsInterval(
    3"#E7E658")
        example66.AddSeriesDefaultsInterval(
    4"#cc6666")
        
    'example66.seriesDefaults.rendererOptions.showTickLabels = False

        example67.Initialize(
    page"example67")
        
    page.Cell(3,1).AddComponent(example67.ABMComp)
        example67.SetTitle(
    "Example 67: Gauge Min Max")
        example67.seriesDefaults.renderer = example67.renderer.MeterGaugeRenderer
        example67.AddSeriesData1(
    322)
        example67.seriesDefaults.rendererOptions.sMin = 
    100
        example67.seriesDefaults.rendererOptions.smax = 
    500
        example67.AddSeriesDefaultsInterval(
    200"#66cc66")
        example67.AddSeriesDefaultsInterval(
    300"#93b75f")
        example67.AddSeriesDefaultsInterval(
    400"#E7E658")
        example67.AddSeriesDefaultsInterval(
    500"#cc6666")


        example68.Initialize(
    page"example68")
        
    page.Cell(3,2).AddComponent(example68.ABMComp)
        example68.SetTitle(
    "Example 68: Gauge Options")
        example68.seriesDefaults.renderer = example68.renderer.MeterGaugeRenderer
        example68.AddSeriesData1(
    52200)
        example68.AddSeriesDefaultTicks(
    10000)
        example68.AddSeriesDefaultTicks(
    30000)
        example68.AddSeriesDefaultTicks(
    50000)
        example68.AddSeriesDefaultTicks(
    70000)
        example68.AddSeriesDefaultsInterval(
    22000"#66cc66")
        example68.AddSeriesDefaultsInterval(
    55000"#E7E658")
        example68.AddSeriesDefaultsInterval(
    70000"#cc6666")
        example68.seriesDefaults.rendererOptions.label = 
    "Metric Tons Per Year"
        example68.seriesDefaults.rendereroptions.labelPosition = 
    "bottom"
        example68.seriesDefaults.rendererOptions.labelHeightAdjust = -
    5
        example68.seriesDefaults.rendererOptions.intervalOuterRadius = 
    85
     

    Attached Files:

  18. Mashiane

    Mashiane Well-Known Member Licensed User

    I have started cleaning up the code. There have been a lot of similaries between the objects so it was proper to create methods to just pass objects for rendering, for example,the x axis, axesdefaults, y axis, y2 axis and x2axis, these are all based from the AxisObject now.

    Also the seriesDefaults and the series object are similar so a method to render them has been passed. The output in terms of the js scripts to render the chart has also been nicely profiled to only render the needed details.

    10 series objects have been defined internally in this component however you need to add them with

    example1.addseries1..n to ensure that they are used in the plotting. There is no need to initialize them as they are already initialized. If however you want to create your own series you can create it like

    Code:
    dim myseries as seriesobject
    example12.InitializeSeries(myseries)
    myseries.label = 
    "my series" and then
    example12.addseries(myseries)
    The graphics below show the newest additions and usage

    . 6.1.png

    Code:
    example0.Initialize(page"example0")
        
    page.Cell(2,1).AddComponent(example0.ABMComp)
        example0.SetTitle(
    "Example 6.1: Series Defaults Hide 1 Marker")
        example0.SetWidthHeight(
    "100%","600px")
        example0.AddSeriesData6(
    1,2,3,2,3,4)
        example0.AddSeriesData6(
    3,4,5,6,5,7)
        example0.AddSeriesData6(
    5,6,8,9,7,9)
        example0.AddSeriesData6(
    7,8,9,11,10,11)
        example0.s1.showMarker = 
    False
        example0.addseries1
    Now let's look at example 70 below.

    Code:
    example70.Initialize(page"example70")
        
    page.Cell(2,2).AddComponent(example70.ABMComp)
        example70.SetWidthHeight(
    "100%","600px")
        example70.SetTitle(
    "Example 70: Another Line Chart")
        example70.AddColumn(
    "May")
        example70.AddColumn(
    "June")
        example70.AddColumn(
    "July")
        example70.AddColumn(
    "August")
        example70.SetSeriesLabel(example70.s1, 
    "Hotel")
        example70.SetSeriesLabel(example70.s2, 
    "Event Registration")
        example70.SetSeriesLabel(example70.s3, 
    "Airfare")
        example70.AddSeries1
        example70.AddSeries2
        example70.AddSeries3
        example70.AddSeriesData4(
    2006007001000)
        example70.AddSeriesData4(
    460, -210690820)
        example70.AddSeriesData4(-
    260, -440320200)
        
    'example70.SetLegendPlacement(example70.placement.outsideGrid)
        example70.xAxis.renderer = example70.renderer.CategoryAxisRenderer  'optional set with AddColumn
        example70.yAxis.pad = 1.05
        example70.yAxis.tickOptions.formatString = 
    "$%d"
        example70.seriesDefaults.rendererOptions.fillToZero = 
    True
    AddColumn is the same as AddCategory, just added in case one forgets. For this chart we have 3 series. We define their labels with SetSeriesLabel and we then run AddSeries1..3 for each, and this produces this.

    70.png

    The js (javascript) code for both chart is....

    Code:
    var data = [];
    data.push([
    123234]);
    data.push([
    345657]);
    data.push([
    568979]);
    data.push([
    789111011]);
    var sOptions = [];
    sOptions.push({
    rendererOptions:{
    },
    showMarker: false,
    shadow: false,
    });
    var options = {
    title: 'Example 6.1: Series Defaults Hide 1 Marker',
    series: sOptions,
    seriesDefaults: {
    rendererOptions:{
    },
    shadow: false,
    },
    axesDefaults:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    axes:{
    xaxis:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    yaxis:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    },
    highlighter:{
    },
    cursor:{
    },
    };
    example0plot = $.jqplot('example0', data, options);
    and

    Code:
    var data = [];
    data.push([
    2006007001000]);
    data.push([
    460, -210690820]);
    data.push([-
    260, -440320200]);
    var xticks = [];
    xticks.push(
    'May');
    xticks.push('June');
    xticks.push('July');
    xticks.push('August');
    var sOptions = [];
    sOptions.push({
    label'Hotel',
    rendererOptions:{
    },
    shadow: false,
    });
    sOptions.push({
    label: 'Event Registration',
    rendererOptions:{
    },
    shadow: false,
    });
    sOptions.push({
    label: 'Airfare',
    rendererOptions:{
    },
    shadow: false,
    });
    var options = {
    title: 'Example 70: Another Line Chart',
    series: sOptions,
    seriesDefaults: {
    rendererOptions:{
    fillToZero: true,
    },
    shadow: false,
    },
    axesDefaults:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    axes:{
    xaxis:{
    renderer: $.jqplot.CategoryAxisRenderer,
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    ticks: xticks,
    },
    yaxis:{
    tickOptions:{
    formatString: '$%d',
    },
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    pad: 1.05,
    },
    },
    highlighter:{
    },
    cursor:{
    },
    };
    example70plot = $.jqplot('example70', data, options);
     
    joulongleu likes this.
  19. Mashiane

    Mashiane Well-Known Member Licensed User

    Looking at the latest developments again....

    Another example of a horizontal bar chart, note the sequencing from 1...4. In most cases when defining charts, one will use x and y and thus, AddData2Series2 passing the series to add the data to. The sequences of how the series are added to the chart with AddSeries1, AddSeries2 or AddSeriesX will generate an array in that order.

    Code:
    example71.Initialize(page"example71")
        
    page.Cell(2,1).AddComponent(example71.ABMComp)
        example71.SetWidthHeight(
    "100%","900px")
        example71.SetTitle(
    "Example 71: A Simpler Bar Chart")
        example71.seriesDefaults.renderer = example71.renderer.BarRenderer
        example71.seriesDefaults.pointLabels.Show = 
    True
        example71.seriesDefaults.pointLabels.location = example71.Location.e
        example71.seriesDefaults.showAngle = 
    135
        example71.seriesDefaults.pointLabels.edgeTolerance = -
    15
        example71.seriesDefaults.rendererOptions.barDirection = example71.barDirection.horizontal
        example71.yAxis.renderer = example71.renderer.CategoryAxisRenderer
        example71.AddData2Series2(example71.s1, 
    2,1)
        example71.AddData2Series2(example71.s1, 
    4,2)
        example71.AddData2Series2(example71.s1, 
    6,3)
        example71.AddData2Series2(example71.s1, 
    3,4)

        example71.AddData2Series2(example71.s2, 
    5,1)
        example71.AddData2Series2(example71.s2, 
    1,2)
        example71.AddData2Series2(example71.s2, 
    3,3)
        example71.AddData2Series2(example71.s2, 
    4,4)

        example71.AddData2Series2(example71.s3, 
    4,1)
        example71.AddData2Series2(example71.s3, 
    7,2)
        example71.AddData2Series2(example71.s3, 
    1,3)
        example71.AddData2Series2(example71.s4, 
    2,4)

        example71.AddSeries1
        example71.AddSeries2
        example71.AddSeries3
    example71.AddSeries4
    71.png

    Let's also work on another chart type, the step chart.

    69.png


    Code:
    example69.Initialize(page"example69")
        
    page.Cell(2,1).AddComponent(example69.ABMComp)
        example69.SetWidthHeight(
    "100%","600px")
        example69.SetTitle(
    "Example 69: Step Chart")
        example69.axesDefaults.labelRenderer = example69.renderer.CanvasAxisLabelRenderer
        example69.seriesDefaults.rendererOptions.smooth = 
    True
        example69.seriesDefaults.bstep = 
    True
        example69.seriesDefaults.markerOptions.Show = 
    False
        example69.AddSeriesData9(
    3,7,9,1,5,3,8,2,5)
        example69.xAxis.pad = 
    0
        example69.xAxis.label = 
    "X Axis"
        example69.yAxis.label = 
    "Y Axis"
    NB: SeriesDefaults apply to all series in the chart. This object holds the same definition as series1..10, thus you can be series specific if you want leaving out series defaults.

    Example 71: JavaScript

    Code:
    var data = [];
    data.push([
    21],[42],[63],[34]);
    data.push([
    51],[12],[33],[44]);
    data.push([
    41],[72],[13],[24]);
    var sOptions = [];
    sOptions.push({
    rendererOptions:{
    },
    shadow: false,
    });
    sOptions.push({
    rendererOptions:{
    },
    shadow: false,
    });
    sOptions.push({
    rendererOptions:{
    },
    shadow: false,
    });
    var options = {
    title: 'Example 71: A Simpler Bar Chart',
    series: sOptions,
    seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    rendererOptions:{
    barDirection: 'horizontal',
    },
    pointLabels:{
    show: true,
    location: 'e',
    edgeTolerance: -15,
    },
    shadow: false,
    showAngle: 135,
    },
    axesDefaults:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    axes:{
    xaxis:{
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    yaxis:{
    renderer: $.jqplot.CategoryAxisRenderer,
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
    },
    },
    highlighter:{
    },
    cursor:{
    },
    };
    example71plot = $.jqplot('example71', data, options);
     

    Attached Files:

    Last edited: Dec 3, 2016
    joulongleu likes this.
  20. Mashiane

    Mashiane Well-Known Member Licensed User

    About to close off this custom component, just some final charting using AddData2Series

    Additional.png

    Code:
    example1.Initialize(page"example1")
        
    page.Cell(2,1).AddComponent(example1.ABMComp)
        example1.SetTitle(
    "Figure 4.2")
        example1.SetWidthHeight(
    "100%","600px")
        example1.AddData2Series2(example1.s1,
    10,100)
        example1.AddData2Series2(example1.s1,
    80,130)
        example1.AddData2Series2(example1.s1,
    65,75)
        example1.AddData2Series2(example1.s1,
    40,130)
        example1.AddData2Series2(example1.s1,
    60,80)
        example1.AddData2Series2(example1.s1,
    30,140)
        example1.AddData2Series2(example1.s1,
    70,120)
        example1.AddData2Series2(example1.s1,
    20,110)
        example1.AddData2Series2(example1.s1,
    95,100)
        example1.AddSeries1

    example2.Initialize(
    page"example2")
       
    page.Cell(2,2).AddComponent(example2.ABMComp)
       example2.SetTitle(
    "Figure 4.14")
       example2.SetWidthHeight(
    "100%","600px")
       example2.AddData2Series2(example2.s1,
    0,1.2)
       example2.AddData2Series2(example2.s1,
    10,2.4)
       example2.AddData2Series2(example2.s1,
    20,5.6)
       example2.AddData2Series2(example2.s1,
    30,12)
       example2.AddData2Series2(example2.s1,
    40,23)
       example2.AddData2Series2(example2.s1,
    50,60)
       example2.AddData2Series2(example2.s1,
    60,120)
       example2.AddData2Series2(example2.s1,
    70,270)
       example2.AddData2Series2(example2.s1,
    80,800)
       example2.AddSeries1
       example2.yAxis.renderer = example2.renderer.LogAxisRenderer
       
    'Log(example2.ToString)
         
       example3.Initialize(
    page"example3")
       
    page.Cell(2,1).AddComponent(example3.ABMComp)
       example3.SetTitle(
    "Figure 4.21")
       example3.SetWidthHeight(
    "100%","600px")
       example3.AddData2Series6(example3.s1, 
    1,2,3,2,3,4)
       example3.AddData2Series6(example3.s2,
    3,4,5,6,5,7)
       example3.AddData2Series6(example3.s3,
    5,6,8,8,7,9)
       example3.AddData2Series6(example3.s4,
    7,8,9,9,10,11)
       example3.AddSeries1
       example3.AddSeries2
       example3.AddSeries3
       example3.AddSeries4
       example3.Smoothen
       example3.HideMarkers
       example3.Animated
       
    'Log(example3.ToString)
       
       example4.Initialize(
    page"example4")
       
    page.Cell(2,2).AddComponent(example4.ABMComp)
       example4.SetTitle(
    "Figure 4.22")
       example4.SetWidthHeight(
    "100%","600px")
       example4.AddData2Series2(example4.s1, 
    10,200)
       example4.AddData2Series2(example4.s1, 
    20,230)
       example4.AddData2Series2(example4.s1, 
    30,214)
       example4.AddData2Series2(example4.s1, 
    40,212)
       example4.AddData2Series2(example4.s1, 
    50,225)
       example4.AddData2Series2(example4.s1, 
    60,234)
       
       example4.AddData2Series2(example4.s2, 
    10,455)
       example4.AddData2Series2(example4.s2, 
    20,470)
       example4.AddData2Series2(example4.s2, 
    30,465)
       example4.AddData2Series2(example4.s2, 
    40,432)
       example4.AddData2Series2(example4.s2, 
    50,455)
       example4.AddData2Series2(example4.s2, 
    60,464)
       
       example4.AddData2Series2(example4.s3, 
    10,40)
       example4.AddData2Series2(example4.s3, 
    20,60)
       example4.AddData2Series2(example4.s3, 
    30,54)
       example4.AddData2Series2(example4.s3, 
    40,52)
       example4.AddData2Series2(example4.s3, 
    50,65)
       example4.AddData2Series2(example4.s3, 
    60,54)
       
       example4.axesDefaults.useSeriesColor = 
    True
       
       example4.s2.yAxis = 
    "y2axis"
       example4.s3.yAxis = 
    "y3axis"
       
       example4.s1.IsDataArray = 
    True
       example4.s2.IsDataArray = 
    True
       example4.s3.IsDataArray = 
    True
       
       example4.AddSeries1
       example4.AddSeries2
       example4.AddSeries3
       
       example4.SetXAxisMinMax(
    0,70)
       example4.SetYAxisMinMax(
    190,240)
       example4.SetY2AxisMinMax(
    430,480)
       example4.SetY3AxisMinMax(
    35,80)
     
    joulongleu likes this.
Loading...